Super simple! Use Docusaurus to build a personal blog (2)

B station video-click to send

If you watched the last video, then you should have learned how to build a docusaurus blog locally, but you can’t just watch this blog locally, you have to let the world appreciate your masterpiece, so we have to write this blog Deploy to the server. There are two ways to deploy:

• Deploying abroad is free.
• For deployment in China, you need to buy a domain name and a server by yourself, which is about 300 yuan.

Publish to github

Before you post a blog, you must publish the project to github. I briefly introduced this before. It is a remote git code repository. Everyone can see your code and maintain it together. Or you can treat it as a private one, in which case you can use it as your own cloud code repository for code version tracking management.

First, create a warehouse on github and open its official website:

github

Not have an account, then go to a register, any direct login, login after clicking on your own home page on the left Newof this button to create a warehouse, where the need to fill some of the information:

• Repository Name-The name of the warehouse, required, such as my name here fh-blog.
• Description-The description of the warehouse. This is optional. I will write one here 我的博客.
• Choose 私有or 公开-if you deploy on Zeit later, choose public here.
• Is not add README- do not add up here, because we already have a local, in addition .gitignore, and add a licencealso do not add.

Click after the expiry of Create repositorythe warehouse created. After that, it will jump to the home page of the warehouse. There are two ways to submit the code to github. The first is to press a brand new warehouse, which is not available locally. Let's use the second method here, to push the existing code to github. Specific operation:

1. Open your blog project in VS Code and click the third button in the menu source control.
2. If the repository is not yet initialized, click on the initialize repositorybutton to initialize.
3. Enter the commit information in the message input box above, for example initial commit, click the check mark above to submit the code.
4. Press the keyboard to command(Mac)/ctrl(Windows) + shift + popen the shortcut command line tool, enter add remote, and select from the prompts that come out Git: Add Remote.
5. Give the URL information of this remote warehouse a name, generally called origin, which means this is the origin warehouse of our project. Press Enter.
6. Next, you are required to enter the url of the warehouse, paste the url of your github warehouse inside, for example https://github.com/zxuqian/fh-blog.git, and press enter.
7. After adding a good remote repository, then click in the source control ...menu, select the push, such as after completion, then refresh github repository, with the code represents the push was successful.

deploy

After the code is pushed to github, it can be happily deployed to the server.

time

time

Here I recommend you a relatively easy-to-use foreign server, the configuration is super simple, it is called zeit, it is also officially recommended by docusaurus, but there may be some places that cannot be accessed for some reasons, or are very slow. But because it is so convenient, I still want to introduce it. Its free version includes the following features:

• HTTPS-enabled Custom Domains -Can automatically add https support to custom domain names
• Continuous Deployment with Git -Ability to use git for continuous integration
• High-performance Smart CDN -High-performance smart CDN
• Unlimited Websites & APIs -Support to create countless websites and apis
• Serverless Functions in Node.js, Go, and more -Support the creation of serviceless functions using Node.js and Go language.

Next, register an account, and start deployment after completing its requirements.

Publish to zeit

To publish to zeit, first install its command line tools:

npm i -g now

Next, open a command line window in VS Code, use the shortcut key ctrl + `, the default path is the root directory of the current project, enter the command:

now

It will ask for some information, such as receiving a verification code with a registered mailbox, project name, configuration information. After it finishes running, the project can be deployed to zeit. Zeit to the official website, you can see that it is automatically associated with the github project, it can also see the domain name to our generation, we can point to open access, and if you want to add a custom domain name, it is opening the domainsmenu, click add, select deployment of a project, and then point continue, enter your own domain name, click Addon it to add up, DNS domain names should point to the last few zeit offer. How to modify the domain name DNS I will talk about later, different domain name providers also have different operations.

Deploy to the country

Zeit may be unstable in some places in the country, so we can deploy it on the domestic server. In the video of the front-end roadmap, I roughly talked about the concept of domain name and server. To deploy our website, we need to purchase a domain name and a server, because our website is static and does not require too complicated functions. , So the server can use one virtual host. The virtual host is inside a server. Different directories are separated for different users. All users on this server share its CPU, memory and other resources. Then there are fixed bandwidth, storage capacity, database, and so on.

Buy domain name

Take Alibaba Cloud as an example, open its official website https://www.aliyun.com/ , select the domain name in the search box, and then enter a domain name you want, for example fhdev, select an available domain name and add it to the list After finishing, click on settlement immediately, select the age limit, add the real-name information, and then pay for the purchase.

Buy server

The server can use a shared virtual host, click to send , new users can choose cloud virtual host, there may be discounts. Operating system selection linux, and then choose the length of time to buy, and finally buy it.

Record

After Alibaba Cloud bought the server, it will provide filing services. You can click on the filing menu in the upper right corner and follow the prompts for filing. It will be faster to fill in the information with the mobile phone.

Configure host and domain name

Log in to the Alibaba Cloud console, select the cloud virtual host in the left folding menu, you can see the virtual host you purchased, click the 管理menu on the right, and you can see its information. Here you need to point the domain name to This virtual host has a website for reference below. You can see the operation for yourself. Here I click on the host information on the left menu, find its IP address, copy it, return to the console, select in the menu 域名, find the domain name I just purchased, and click Manage.

It is mentioned here that if you want to point the DNS to the one provided by Zeit, select it in the menu DNS修改, click on the right side 修改DNS服务器, and fill in the dns addresses provided by Zeit one by one.

To resolve to your own server, you can just use Alibaba Cloud's default dns, and then select it in the menu item, click on it 域名解析, and then click 添加记录, record type select A record, A record means that this domain name needs to be resolved to an ip Above the address, here we have the IP address of the virtual host, so choose A, fill @in the host record , which means the corresponding ip when accessing the root domain name, that is to say without wwwthis prefix, for example zxuqian.cn, and then the resolution line keeps the default, record Just paste the ip address you just copied, and then click OK.

Then add one, here to fill in the host record www, the other with @the same, this is the access www.zxuqian.cntime of the domain name, point to the IP address, with the @record is the same.

Configure github actions

The next step is to upload the website files to the server. You can use ftp tools, such as FileZilla, but you have to manually upload the website files every time you finish blogging, which is more troublesome. Here you can use the continuous integration tool github actions . In the root directory of the project to create .github/workflowssuch a hierarchy of folders, and then created inside the nodejs.ymlfile, write the following code inside:

name: Node.js CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${
    
    {
    
     matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${
    
    {
    
     matrix.node-version }}
      - run: npm install
      - run: npm run build --if-present
      - name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-[email protected]
        with:
          ftp-server: 你的虚拟主机 FTP 上传地址/ftp 目录
          ftp-username: ${
    
    {
    
     secrets.ftp_user }}
          ftp-password: ${
    
    {
    
     secrets.ftp_pwd }}
          local-dir: build/
        env:
          CI: true

This file tells github actions that this project is in Node.js 12 version, the latest version of unbuntu, run the following command:

• npm install-install dependent libraries
• npm run build-package the project as a static website
• FTP Deploy, publish to FTP server.

When publishing FTP here, several parameters are required:

• ftp-server-FTP upload address of your virtual host, for example ftp://byu*********.my3w.com/htdocs.
• ftp-username-ftp username.
• ftp-password-ftp password, these are private information, so the private environment variables of github are used, and how to configure it later.
• local-dir-Which directory to upload.

Note that, because we upload the code on github does not include buildfolders, so, you need to generate after github actions run the build folder uploaded to the server, here in the root directory of the project, add a .git-ftp-includefile, write:

!build/

The meaning is npm run buildgenerated after the build directory to upload to the server.

ftp-password The method of setting this confidential information is:

1. Open the home page of the warehouse and click settings.
2. Choose from the menu on the left Secretes.
3. Click Add a new secret.
4. In the nameEnter the name of the variable.
5. In valuethe input value of the variable at.

Finally, click the Add secretbutton to add it.

Post a blog

After finishing all these files, push the code to github and wait for github actions to run, you can visit your website. To publish an article in the future, you only need to write it locally and push it to github to finish the work. Here you have set up your own blog, show your literary talent to the world!