background

Recently, I am not doing blog, the ali cloud server I bought in the previous activity has expired, and now there is no discount, look ~, the brick party can not afford it, now I want to build a server to run my blog

I mainly play static blog and nodeJS etc., there is no need for the server side, DOCker and mysql I do not do, so even if the server is a waste of ah, no need no need ~

I white whoring party just pure want a white whoring opportunity 😎

A brief description of my requirements:

  1. Have a server that can host your blog (preferably free, this is important 😆~)
  2. GitHub can be tied to GitHub for automatic deployment (my code is stored on GitHub, I want automatic blog updates when I submit the code)
  3. To be stable, can not open the page every two days ~ that I am not very embarrassed
  4. Access speed to keep up with, it is best to have CDN accelerated services, can not wait for a long time the page is still turning around ~
  5. Support custom domain name, preferably to give a free SSL certificate, cough ~

Such a simple request should not be too much ~

Some open source blogging frameworks such as Hexo already integrate automatic deployment to GitHub and Coding.

GitHub we since need not much, know all understand 😐, open source preferred, many frameworks and libraries are basic to do the relevant deployment support, it provides gh-Pages service is very simple and convenient (GitHub pages), for us to quickly deploy a website, and free for life ~, I call GitHub YYds ~

For static website services, Gitee and others also provide Gitee Pages. Those who are interested can explore by themselves. Here we mainly introduce the use of Coding

What is the Coding

Coding (Coding.net /) is a one-stop software development and management collaboration platform, providing a series of online tools such as Git/SVN code hosting, project collaboration, test management, product library, CI/CD, etc. Help the R&D team quickly adopt agile development and DevOps development methods, improve the efficiency of R&D management, and realize the upgrade of R&D efficiency.

Why is Coding used

As for the role of Coding, in terms of my own usage scenarios, not to mention its collaboration platform capabilities, it is similar to Gitee, which is deployed in China, with significant speed increase, and can be included in Baidu. Due to well-known reasons, the speed of accessing GitHub in China is touching. I also tried to use Gh-Pages of GitHub directly at the beginning, but it was greatly affected by the network environment, fluctuated obviously, and the efficiency was very low. If it was just for demo demonstration of development, it would be ok, but after all, it was used as a blog, and it was still seeking stability. Therefore, Coding was selected as the mirror of the warehouse. Of course, Gitee is the same here.

Don’t say much, open dry ~

On the whole

Here’s an example from my blog: ssscode.com/

Generate GitHub token and Coding token

This step is to provide token access to the GitHub Action script

Github token and Coding token

  • GitHub token: Executedgh-pagesBranch push needs to correspondGitHubtherepopermissions
  • Coding token: ExecutionpushtoCodingWarehouse needs to be correspondingCodingtherepopermissions
  • For security we need to set environment variables for use by the script

The token configuration is pretty simple, we just check the repO permission, other doesn’t matter

We got the token value generated by GitHub and the token value generated by Coding in our GitHub repository

Click Setting => Secrets => New Repository secret

Create a new key and paste in the corresponding values. Make sure the keys are the same: ACCESS_TOKEN/CODING_TOKEN

This way, we can get the environment variable ACCESS_TOKEN/CODING_TOKEN when we execute the script

Create the GitHub Action script

First create the.github/workflows folder in your project directory

We then create the script file ci.yml in that directory

The overall idea is as follows:

A quick note:

  • The main function of CI. yml is to monitor our submission behavior when we submit code, execute our build packaging script, and then synchronize the generated dist directory file to the Coding repository. This step is mainly for Coding to obtain the deployment file. (We also deployed a GH-Pages to GitHub incidentally.)

  • For blog deployment, we leave this part to Coding.

Yml syntax is also relatively simple, if you are not clear about it, please refer to Teacher Ruan Yifeng’s tutorial YAML language tutorial

# process name
name: Deploy

# monitor event
on:
  push: # listen for a push event on the master branch.
    branches:
      - master

jobs: # workflow
  build: # custom name
    name: deploy-site
    runs-on: ubuntu-latest # Run in the VM environment ubuntu- Latest

    steps: Step #
      - name: Checkout Step # 1
        uses: actions/checkout@v2 Check out the repository and get the source code

      - name: Use [email protected] Step # 2
        uses: actions/setup-node@v1 Install nodeJS
        with:
          node-version: 14.x

      - name: Install dependencies Step # 3
        run: npm install # install dependencies

      - name: run deploy.sh # Step 3 (Simultaneously deploy to Github and coding)
        env: Set environment variables
          GITHUB_TOKEN: The ${{ secrets.ACCESS_TOKEN }} # toKen private variable
          CODING_TOKEN: The ${{ secrets.CODING_TOKEN }} # toKen private variable
        run: npm run deploy Run a shell script we wrote ourselves

Copy the code

package.json

{
  "scripts": {
    "deploy": "bash deploy.sh"}}Copy the code

Because there is a lot of logic, I have separated the deployment process into a separate script, and we will cut to deploy.sh

Write the deployment script deploy.sh

The script performs the following steps:

  1. npm run buildPack to generatedist
  2. thedistdirectorypush 到 GitHub gh-pagesbranch
  3. thedistdirectorypush 到 Coding masterbranch

Remember to specify the compiler in the file header: #! /usr/bin/env sh

#! /usr/bin/env sh

Make sure the script throws any errors it encounters
set -e

The current system time
nowDate=$(date "+%Y-%m-%d %H:%M:%S")

Generate static files
npm run build

Go to the generated folder
cd docs/.vuepress/dist

msg="The deploy. Sh = = = > update:${nowDate}"

Git user info
git config --global user.name "JS-banana"
git config --global user.email "[email protected]"

# git commit 
git init
git add -A
git commit -m "${msg}"

# deploy to github
githubUrl=https://JS-banana:${GITHUB_TOKEN}@github.com/JS-banana/vuepress.git
git push -f $githubUrl master:gh-pages # Push to Github

# deploy to coding
# Attention!! The user name and token are required to use the personal token provided by CodingCodingUrl =https:// User name of personal token:${CODING_TOKEN}@e.coding.net/ssscode/blog/vuepress.git 
git push -f $codingUrl master # Push to coding

Return to the directory where you started
cd -

# remove dist
rm -rf docs/.vuepress/dist
Copy the code

Ok, that’s it for GitHub

We are going to Coding to receive a wave of ~

Coding configures automatic deployment of static blogs

Coding configuration is still relatively friendly, we just need to point, basically done ~

Enter our corresponding project, you can see that the warehouse has been updated ~

Then click on the left menu to go to the Continuous Deployment > Web hosting page and click On New Site

Here, the source of our code is the existing warehouse, the warehouse source is the corresponding warehouse, check the static website, select the appropriate node, and wait for the system deployment

After the deployment is successful, we can view the basic information of the application

One of the more accessible website addresses appears to be generated by default, for example, Servere-Page-bucket-2z.com

However, this address is very unfriendly, it looks like a long string, if LET me remember this address I directly in place cracked good ~

Fortunately, we can set up our own website address by configuring the custom domain name, here is relatively simple, according to the steps and the custom domain name configuration document in a few minutes.

Finally, the SSL certificate of HTPPS, we can also directly open for free, very convenient, here we need to enter Tencent cloud for some basic configuration, follow the steps.

OK, done, generally speaking, or relatively simple, no complex logic, are some basic configuration and operation

However, if you don’t understand anything, you can take a moment to look at the documentation, and you can handle most scenarios

Honestly, white piao is really drop cool 😏~