preface

First, why choose a static website? There is no background, no database, but it is convenient to toss around and can be completely customized. This is one of the biggest reasons why I choose a static blog. (in fact, lack of money to buy servers is the biggest reason)

There are many ways to deploy static websites. GitHub page, coding page, gitee page and vercel are all free. Each has its own advantages. Let's talk about these free websites first.

GitHub Page

Github Page giant hard home things, unless force majeure, or the probability of problems is very small. However, some parts of China cannot be accessed, and the access speed in some areas is slow. Github Action can be used to realize automatic deployment. The speed problem may be solved through CloudFlare's CDN, but the speed is still not good. Of course, if your domain name is filed, it is no problem to use domestic CDN.

Coding Page

The Coding Page indicates that it is Coding, but Coding is now Tencent, and the probability of problems is very small. But the nodes used are all overseas, usually Hong Kong, China and Singapore, And daily downtime, easily collapsed. It can also use integrated CI for automatic deployment.

Gitee Page

Gitee Page code cloud home, domestic node, speed is not to say, it will be finished soon. Custom domain names and automatic updates (that is, each time you update the blog, you have to manually click to deploy after pushing it to the code cloud) need to buy the Pro version, which is 99 yuan / year. However, because it is a domestic node, the bound domain name needs to be filed. Codecloud also has a better function, which can automatically judge the blog type, support Jekyll, Hugo and Hexo, automatically compile and deploy the generated files, that is to say, you can directly push up the whole blog folder. Each update only needs to be pushed by git, which will help you generate.

Vercel

Vercel can import the blog warehouse directly from GitHub, and can identify the static blog type, which is generated automatically like code cloud. By the way, the average speed of Ping is 62.0ms in the United States.

summary

• No custom domain name is required, no code cloud on the brain
• To customize GitHub Page or Vercel on domain name
• Coding not recommended

So this blog has not been deployed in the above way at present, but it has all experienced it. Because the domain name was filed, Tencent's static website hosting was directly adopted.

It is said that the domestic CDN billing rules are really complex. After reading them for the first time, they are basically confused. At this time, Tencent's cloud development appeared. Cloud development includes static website hosting, which is designed for static websites. The billing rule is very simple. The traffic fee + space fee is automatically deployed to the CDN, which is very fast.

As for how to use cloud development to deploy static blogs, the official has given a detailed tutorial Static website hosting Hexo - Best Practices - Document Center - Tencent cloud.

Of course, this is a charge, but it's very cheap. The normal small station doesn't exceed one yuan a month, and you can also apply for Tencent Cloud development website hosting "9.9 package year" sponsorship program.

Automatic deployment

Next, let's focus on the automated deployment using GitHub Action. If you don't know what GitHub Action is, you can have a look Official introduction In short, take your warehouse as the root directory and give you a computer to help you complete some things. If you want to know more, you can have a look Write your own GitHub Action and experience automated deployment

Connect GitHub

Make sure your entire blog folder has been push ed to GitHub. If not, create a new warehouse, Public or Private, and then connect the local warehouse to the warehouse.

Replace username with username and repo with warehouse name

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/username/repo.git
git push -u origin master

🚨 be careful

If the warehouse is Public, please do not write the private content directly in the file, and replace it with some words temporarily. There are ways to solve it when writing the automatic deployment file later

Write GitHub Action

From here on, by default, you have read the previously mentioned "write your own GitHub Action and experience automatic deployment", or you have a preliminary understanding of GitHub Action and know the general operation.

In my opinion Personal homepage For example, Vue JS, deployed in Tencent cloud static website hosting. GitHub warehouse address: homepage

It is divided into four steps: Setup Build Lint Deploy

• Setup: install node environment
• Build: build
• Lint: Lint code
• Deploy: push to Tencent static website hosting

name: Deploy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Setup
      run: npm install

    - name: Build
      run: npm run build

    - name: Lint
      run: npm run lint

    - name: Deploy
      id: deployStatic
      uses: TencentCloudBase/cloudbase-action@v1.1.1
      with:
        secretId: ${{ secrets.SECRET_ID }}
        secretKey: ${{ secrets.SECRET_KEY }}
        envId: ${{ secrets.ENV_ID }}
        staticSrcPath: dist

Privacy data must be set in SECRETS

Secrets. In the file XXX must be set in Settings > secrets of the warehouse

When creating secrests, the name is xxx and the Value is the content

Deploy to GitHub Page

1

name: Deploy                      # The name displayed by Actions can be set at will

on: [push]                        # Triggered after listening to the push event

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: Checkout              # Pull the specified branch of the currently executing Actions warehouse
      uses: actions/checkout@v2
      with:
        ref: master

    - name: Update Submodule      # If the warehouse has submodule s, update them here. If not, delete this step
      run: |
        git submodule init
        git submodule update --remote

    - name: Setup Node            # Install Node environment
      uses: actions/setup-node@v1
      with:
        node-version: "10.x"

    - name: Hexo Generate         # Install Hexo dependencies and generate static files
      run: |
        rm -f .yarnclean
        yarn --frozen-lockfile --ignore-engines --ignore-optional --non-interactive --silent --ignore-scripts --production=false
        rm -rf ./public
        yarn run hexo clean
        yarn run hexo generate

    - name: Hexo Deploy           # Deployment steps: take hexo deploy as an example
      env:
        SSH_PRIVATE: ${{ secrets.SSH_PRIVATE }}
        GIT_NAME: yourname
        GIT_EMAIL: your@email.com
      run: |
        mkdir -p ~/.ssh/
        echo "$SSH_PRIVATE" | tr -d '\r' > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        git config --global user.name "$GIT_NAME"
        git config --global user.email "$GIT_EMAIL"
        yarn run hexo deploy

Deploy to Tencent static hosting

Recommended use Official Action

Sample code

name: Deploy

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Setup Hexo
      run: |
        npm install hexo-cli -g
        npm install

    - name: Generate
      run: hexo clean && hexo g

    - name: Deploy
      id: deployStatic
      uses: TencentCloudBase/cloudbase-action@v1.1.1
      with:
        secretId: ${{ secrets.SECRET_ID }}
        secretKey: ${{ secrets.SECRET_KEY }}
        envId: ${{ secrets.ENV_ID }}
        staticSrcPath: public

In the process of deploying Hexo, the content before Deploy is almost the same. After all, you only need to modify the content after Deploy.

Deploy to Tencent COS

Recommended use zkqiang/tencent-cos-action

other

Most of them have official actions. Even if they don't, others will write them or refer to official documents.

Privacy issues

You can use Private warehouse directly.

For public repositories, you can use the sed command.

For example, I configure it on my blog_ config. There is Baidu push code in the YML file

baidu_url_submit:
  count: 200
  host: blog.JalenChuh.cn
  token: baiduToken
  path: baidu_urls.txt

The token belongs to private content and cannot be made public, so we can use Baidu token to replace the token

Then, when writing the Action, store the token in secrets, and use the sed command to replace the baidu token.

sed -i "s/baiduToken/${baiduToken}/" _config.yml

sed -i is used as sed -i's / original string / new string / 'file path

Use with secrets

- name: env
  env:
    baiduToken: ${{ secrets.baiduToken }}

  run: sed -i "s/baiduToken/${baiduToken}/" _config.yml

Automatically submit Baidu collection

After solving this problem, we can do some more fun, such as Baidu automatic push

First, make sure that hexo Baidu URL submit is installed and that package The plug-in is contained in the dependencies of JSON.

TIP

package. If not in JSON, you must use NPM I hexo Baidu URL submit -- save to install

Then, modify the scripts section of the file

"scripts": {
  .......
  "xx": "xxxx",
+  "baidupush": "hexo deploy"
},

JSON specification must be followed

The last line, baidu rush, has no comma at the end, while the penultimate line must have a comma

Baidu has given you thousands of quotas. You can use hexo deploy & & hexo deploy Execute many times and use up all the quota, but it seems that repeated submission of a link will be reduced by Baidu (don't understand SEO), so it's up to you.

But there is another problem. If you use GitHub Page, you will push the blog at the same time. It's not necessary, so we can create a new configuration file_ baidupush.yml, will_ config. Copy my content in YML, then modify the deploy part at the end, and only keep Baidu push.

deploy:
  - type: baidu_url_submitter
-  - type: git
-    repo: git@github.com:jalenchuh/test.git
-    branch: master

Then all hexo deploy in the previous command needs to be replaced with hexo deploy -- config_ baidupush. yml

Then save Baidu token in secrets

And write an Action, which will be automatically executed at 0:00 Beijing time every day

name: baiduPush

on:
  schedule:
    - cron: '0 16 * * *' # Github Action uses UTC time

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Setup Hexo
      run: |
        npm install hexo-cli -g
        npm install

    - name: BAIDU env
      env:
        baiduToken: ${{ secrets.baiduToken }}

      run: sed -i "s/baiduToken/${baiduToken}/" _baidupush.yml # Replace Baidu token

    - name: generate
      run: hexo clean && hexo g

    - name: push
      run: npm run baidupush # Execute the previously written command

last

Travis CI is also a famous CI tool. In contrast, I think GitHub Action is easier to use, and its direct integration with GitHub is one of its advantages.

However, there are still some disadvantages. For example, there is no way to debug locally. For the first time, the Action list is always full of: x:. In addition, after an error, re run can only start all over again. There is no way to specify a certain step to start from

Of course, it's done very well. At the same time, look forward to the upcoming Codespaces.