1. Why do I deploy continuously

As powerful and convenient as Hexo’s personal blog is, typing Hexo Clean && Hexo G-d quickly generates static pages and deployable access. Hexo, however, generates static pages without a back end, and the work is done on your local computer. If you change your computer, you need to pull down the source code on Github, rebuild the environment, and then deploy. It’s a little harder to edit articles without a computer. In addition, the source code is also pushed to the repository after each native deployment.

This is obviously a bit cumbersome. Fortunately, Github Actions provides a solution for adding automated Actions to the repository, placing the source code of the Hexo blog (not the generated public folder, but the entire project code) on Github. After writing the workflow of the Github Actions, Just push it locally to Github each time, and Github Actions will do all the deployment automatically for us.

My blog is deployed to Ali Cloud OSS, support CDN acceleration, full site open HTTPS access, the key is super low cost!

2. Overall deployment roadmap

  • The Hexo blog project was uploaded to Github
  • In ali cloudOSSCreated in theBucketAnd configure it asStatic page hosting
  • getBuckettheAccessKeyIdandAccessKeySecretTo the Github repository
  • writeGithub ActionsThe working process
  • Local triggerpushCommand,Github ActionsStarting automatic deployment

3. Implement the deployment process

3.1 Uploading the Hexo Project

Needless to say, create a private repository on Github and upload the local source code for the Hexo blog project.

On the other hand, I removed the.gitignore file and uploaded all of the project files to the repository (including node_modules, etc.) so that the Github Actions don’t have to re-install the required dependencies each time they deploy, which is probably faster (I don’t know if it will be faster). However, for the first Push, it takes a long time, so you should consider whether to do this by yourself.

3.2 createBucket

When creating a Bucket in Aliyun OSS, note that the read/write permission must be changed to public read.

After the creation is complete, find the static page in basic Settings and perform the following configurations:

You can then configure the domain name that the Bucket accesses, configure CDN acceleration, and upload the HTTPS certificate. Click Transfer Management:

3.3 getAccessKey

Put the mouse over the profile picture in the upper right corner of the Ali Cloud page, click AccessKey management, and obtain the AccessKeyId and AccessKeySecret. It is recommended to use the sub-user AccessKey.

Because the AccessKey has high permissions, it is very dangerous to expose it directly to the code, so configure it to Github repository Secrets and use it as a constant.

In the repository where the Hexo source code is stored, click Settings, find Secrets, and add two items. The name is KEY and the value is SECRET. The value is AccessKeyId and AccessKeySecret.

3.4 Writing workflow

In the repository where the Hexo source code is stored, click Actions and click Set Up a Workflow Yourself:

Copy all of the following code into the code area and modify it slightly according to the comments:

# workflow name
name: Hexo Blog CI

# Trigger this process when there is a push command on the main branch
on:
    push:
        branches:
            - main

jobs:
    build:
        runs-on: ubuntu-latest

        steps:
            - name: Checkout Repository master branch
              uses: actions/checkout@master

            - name: Setup Node.js 10.x
              uses: actions/setup-node@master
              with:
                  node-version: '10.x'

            - name: Setup Hexo Dependencies
              run: # # | NPM install if no upload depend on package, are the lines to remove NPM install - g hexo - cli hexo clean hexo generate gulp # I installed the compression static file plugin, if not installed, will delete this line            - name: setup aliyun oss
              uses: manyuanrong/setup-ossutil@master
              with:
                  endpoint: oss-cn-hangzhou.aliyuncs.com
                  access-key-id: The ${{ secrets.KEY }} # AccessKeyId that has just been configured
                  access-key-secret: The ${{ secrets.SECRET }} # AccessKeySecret just configured
            - name: cp files to aliyun
              run: ossutil cp -rf public oss://xxxxx/ # change XXXXX to the name of the Bucket created. -rf indicates overwrite
Copy the code

Click the Start COMMIT button when you’re done.

3.5 complete!

Then the Github Actions start working for the first time, and a green tick indicates successful deployment! Quickly open the domain name to view ~

Since you just created main.yml in the remote repository, you can perform git pull locally to synchronize the latest files in the remote repository, and then push.

4. How to use it remotely

Once the deployment is complete, we can release and modify articles from the local project in a remote repository, even without a computer nearby!

You can use [HexoPlusPlus] to implement a sort of background-like page on which to post new articles, modify articles, and so on.

Of course, you can also manage articles directly in the Github repository.

5. Additional work

If I had my computer around, I still used to manage my blog locally and push it. I didn’t have to type hexo clean&&hexo g -d, but I had to type git add., git commit -m ‘XXX’, git push.

I wrote one because I was too lazy. BAT script file, placed in the project.

@echo off
git pull
git add .
git commit -m 'WIN10'
git push
Copy the code

In this way, I only need to double-click the script after the local modification, and the script will be automatically pushed to the warehouse, which will automatically complete the deployment!