Station B video – Click transmit

If you watched the last video, 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 see your work, so let’s deploy this blog to the server. There are two modes of deployment:

  • It’s free to deploy abroad.
  • Deploy to be in home, need oneself buy a domain name, still have server, have 300 to a dollar probably about the same.

Release to making

Before you start blogging, you need to post your project to Github, which I briefly described as a remote Git repository where everyone can see and maintain your code. Or you can make it private, in which case you can use it as your own cloud-based repository for code version tracking.

To start, create a repository on Github and go to its website:

github

If you don’t have an account, register one first. If you do, log in directly. After login, click the New button on the left of your home page to create a warehouse.

  • Repository Name– The name of the warehouse, mandatory, such as my namefh-blog.
  • Description– Warehouse description, this is optional, I write one hereMy blog.
  • chooseprivateorpublic– If later deployed on Zeit, select open.
  • Is it right to addREADME– I don’t want to add it here, because we already have it locally.gitignoreandadd a licenceYou don’t have to add any.

Then click Create Repository and the repository is created. It then redirects to the repository’s home page, where there are two ways to submit code to Github. The first way is to click on the new repository, which is not locally available. Let’s use the second option here, which is to push existing code to Github. Specific operation:

  1. Open your blog project in VS Code and click the third button from the menusource control.
  2. Click if the repository has not already been initializedinitialize repositoryButton to initialize.
  3. Enter the COMMIT message in the message input box above, for exampleinitial commitAnd click the check box above to submit the code.
  4. Press the keyboardcommand(Mac)/ctrl(Windows) + shift + pTo open the shortcut command line tool and enteradd remote, select from the prompt that comes outGit: Add Remote.
  5. Give the url information for this remote repository a name, usually calledoriginThis is the origin warehouse of our project. Press Enter.
  6. Next ask for the url of your repository and paste your Github repository’s URL inside, for examplehttps://github.com/zxuqian/fh-blog.gitAnd then press Enter.
  7. Once you have added the remote repository, click on Source Control.Menu, select Push, etc., and then refresh the Github repository, with the code represents the success of push.

The deployment of

Once the code is pushed to Github, it’s happily deployed to the server.

Zeit

Zeit

It is called Zeit, which is also recommended by Docusaurus. However, some places may be inaccessible or very slow due to some reasons. But because it is so convenient, I will introduce it anyway. The free version includes the following features:

  • HTTPS-enabled Custom Domains– You 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 intelligent CDN
  • Unlimited Websites & APIs– Supports the creation of countless websites and apis
  • Serverless Functions in Node.js, Go, and more– Supports the creation of non-service functions using Node.js and Go languages.

Next, register an account and follow its instructions to start deployment.

Published to zeit

To publish to Zeit, first install its command-line tool:

npm i -g now
Copy the code

Next open a command line window in VS Code, use the shortcut CTRL + ‘, the default path is the root directory of the current project, and type the command:

now
Copy the code

It asks for information such as receiving a verification code with a registered email address, project name, and configuration information. Once it is up and running, the project can be deployed to zeIT. Go to zeit’s official website, you can see it automatically associated with github projects, you can also see the domain name it generated for us, click on it to access, to add a custom domain, click on the Domains menu, click Add, select a deployed project, and click Continue. Enter your domain name, click Add to Add it, and then point the DNS to the ones provided by Zeit. How to change the domain name DNS and I’ll talk about that later, different domain name providers do different things.

Domestic deployment

Zeit may be unstable in some parts of China, so we can deploy it on the domestic server. In front-end roadmap video before I roughly talked about the concept of domain name and server, to deploy our web site, you need to purchase a domain name and a server, because this site is static, we don’t need too complex functions, so the service USES a virtual host, virtual host is a server, Different directories are separated for different users, all users on the same server share its CPU, memory and other resources, and then have fixed bandwidth, storage capacity, database and so on.

Buy a domain name

Take a certain cloud as an example, open its official website https://www.aliyun.com/, select a domain name in the search box, and then enter a desired domain name, such as fhdev, select an available domain name, and add it to the list. Click “Settle immediately” after completion, select the number of years, and add real-name information. Just pay for it.

Buying a server

Server with shared virtual host, click transfer, new users can choose cloud virtual host, there may be a discount. Operating system select Linux, then select the purchase time, and finally purchase is ok.

For the record

After cloud in some in bought server, it provided put on record service, can click upper right corner put on record menu, undertake according to cleat put on record, fill in data with mobile phone put on record meeting a few faster.

Configure the host and domain name

Login to a cloud in the console, select in the menu on the left side of the folding cloud virtual host, can see you buy a virtual host, click on it to the right of the manage menu, you can see the information, it must be the domain name to the virtual host, below it has reference site opened, everyone can have a look at our operation. Here I click the host information in the left menu, find its IP address, copy it, return to the console, select the domain name in the menu, find the domain name I just bought, and click Manage.

For example, if you want to point to the DNS provided by Zeit, select DNS Modify from the menu and click on the right side to modify DNS server. Enter the DNS addresses provided by ZeIT one by one.

Parsing to their own servers, can be directly used in A cloud of the default DNS is ok, and then select DNS in menu item, click on add records after PM, record types to choose A record, A record that the domain name to resolve to an IP address above, here we have the IP address of the virtual host, So select A, enter @ in the host record, which means the IP address corresponding to the access to the root domain name, that is, do not have the WWW prefix, such as zxuqian.cn, then leave the default route, record the value and paste the IP address just copied, then click OK.

This is the same IP address used to access the domain name www.zxuqian.cn. This is the same IP address used to access the domain name www.zxuqian.cn.

Configuration making actions

The next step is to upload the site file to the server. You can use an FTP tool such as FileZilla, but this will require you to manually upload the site file again after each blog post. Create a.github/workflows folder in the root directory of your project and create the nodejs.yml file inside with the following code:

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 The ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: The ${{ matrix.node-version }}
      - run: npm install
      - run: npm run build --if-present
      - name: FTP Deploy
        uses: SamKirkland/[email protected]
        with:
          ftp-server: Your virtual host FTP Upload address/FTP directory
          ftp-username: The ${{ secrets.ftp_user }}
          ftp-password: The ${{ secrets.ftp_pwd }}
          local-dir: build/
        env:
          CI: true
Copy the code

This file tells Github Actions to run the following command on node.js 12, the latest version of Unbuntu:

  • NPM install – Installs dependent libraries
  • NPM Run Build – Package projects as static sites
  • FTP Deploy to the FTP server.

When you publish FTP, you need several parameters:

  • Ftp-server – Your virtual host FTP upload address, for exampleftp://byu*********.my3w.com/htdocs.
  • Ftp-username – FTP username.
  • Ftp-password-ftp password, these are private information, so use github private environment variables, we will talk about how to configure later.
  • Local-dir – Which directory to upload.

Add a.git-ftp-include file to the root directory of the project. If you want to upload the build folder to github, you need to upload the build folder from github Actions to the server. Write down:

! build/Copy the code

Upload the build directory generated after the NPM run build to the server.

Ftp-password Is used to set confidential information.

  1. Open the home page of the warehouse and clicksettings.
  2. Choose from the menu on the leftSecretes.
  3. Click on theAdd a new secret.
  4. innameEnter the name of the variable.
  5. invalueIs the value of the input variable.

Finally, click the Add Secret button to Add it.

Writing a blog post

Once you’ve got all the files in place, push the code to github and run it through github actions, and you’ll be able to access your website. Later to publish the article, just need to write in the local, push to Github to finish the job. Here you build your own blog to show the world your literary talent!