Hexo + GitHub Actions + OSS blog system construction

Another blog?

The Hexo blog should be familiar and easy to use, just generate static files locally and push them to Github. If necessary, you can also configure custom domain names for Github Pages.

But access to Github Pages was impressive, and Github. IO DNS was often tainted or simply unstable. Pushing after each local build is also tedious. GitHub Actions is a great way to deploy Hexo for GitHub projects, even if you don’t need your own server. I wonder if I can use GitHub Actions to deploy Hexo elsewhere.

In short, we want to implement a publishing system that automatically deploits Hexo blog content to OSS via CI

Hexo skip

Hexo. IO /zh-cn/

Speak of the OSS

Let’s just post the link of OSS ali Cloud object storage service

OSS is widely used in daily brick moving. Here OSS is used as an example. Of course, you can also change to AWS, Seven Cow Cloud, Tencent Cloud, etc. OSS can be simply understood as a web disk that you can upload media and data files directly on the surface, which can then be accessed through the generated resource link address.

A static website is a collection of HTML, CSS, and JS resources, which can be accessed by uploading these files to the OSS directory structure.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Hello, World!</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
Copy the code

Create a Bucket in OSS (custom, unique name) and upload the index. HTML file to OSS.

However, OSS has a limitation. The OSS itself provides static site support, which needs to be configured. Otherwise, THE HTML file cannot be opened directly in the browser, but will trigger the download.

Can try stamp here: erii-blog.oss-cn-hangzhou.aliyuncs.com/index.html

For security reasons, starting from August 13, 2018, and starting from September 25, 2019, web files on OSS (mimeType: text/ HTML, extension: HTM, HTML, JSP, PLG, HTX, STM) can be accessed by browsers in China and outside China:

Content-disposition :’attachment=filename; Content-disposition :’attachment=filename; ‘. When a web page file is accessed from a browser, the file content is not displayed but is downloaded as an attachment.

Content-disposition :’attachment=filename; Content-disposition :’attachment=filename; content-disposition :’attachment=filename; ‘, as long as your browser supports the preview of this type of file, you can preview the contents of the file directly.

Therefore, we need to configure the custom domain name for the Bucket configuration of OSS:

Setting home page:

Set the custom domain name. I used blog.ierii.com, which I bought on Tencent Cloud (because it was cheap!). , so we also need to configure CNAM on Tencent cloud

blog.ierii.com cname erii-blog.oss-cn-hangzhou.aliyuncs.com
Copy the code

The custom domain name is then configured on OSS

You can see the home page

Upload the Hexo resource to OSS

Next we’ll see how to upload static resources generated by Hexo to OSS, starting with a Hexo blog project:

hexo init hexo-oss-action
Copy the code

Hexo uses yarn to install dependencies by default, but we will use NPM directly when we go to GitHub Actions. It is recommended that we also use NPM to install dependencies for initialization projects.

After installing the dependency NPM run build, look at the production static file:

Public ├ ─ ─ 2020 │ └ ─ ─ 12 │ └ ─ ─ 27 │ └ ─ ─ the hello world - │ └ ─ ─ index. The HTML ├ ─ ─ archives │ ├ ─ ─ 2020 │ │ ├ ─ ─ 12 │ │ │ └ ─ ─ Index.html │ │ └ ─ ─ index. The HTML │ └ ─ ─ index. The HTML ├ ─ ─ CSS │ ├ ─ ─ fonts │ │ ├ ─ ─ FontAwesome. Otf │ │ ├ ─ ─ │ │ ├── The state of the union, the state of the union, the state of the union, the state of the union, the state of the Union, and the state of the Union │ │ └ ─ ─ fontawesome - webfont. Woff2 │ ├ ─ ─ images │ │ └ ─ ─ banner. JPG │ └ ─ ─ style.css. CSS ├ ─ ─ fancybox │ ├ ─ ─ Jquery. Fancybox. Min. CSS │ └ ─ ─ jquery. Fancybox. Min. Js ├ ─ ─ index. The HTML └ ─ ─ js ├ ─ ─ jquery - 3.4.1 track. Min. Js └ ─ ─ script. JsCopy the code

OSS provides a variety of SDKS for various environments. Here’s how to install the node SDK dependencies:

npm i ali-oss recursive-readdir -D
Copy the code

Recursive-readdir is a library for retrieving the paths of all files in a target folder.

The basic usage of ali-OSS is also simple:

const OSS = require('ali-oss');

const client = new OSS({
    region: 'oss-cn-hangzhou'.// Create the area selected by the bucket
    bucket: 'erii-blog'.// Create a bucket name
    accessKeyId: '* * *'./ / your accessKeyId
    accessKeySecret: '* * *'./ / your accessKeySecret
});

// Upload public/index.html to hexo-index.html in the root directory of eriI-blog bucket
client.put('hexo-index.html'.'./public/index.html').then(res= > {
    console.log(res.url);
    // http://erii-blog.oss-cn-hangzhou.aliyuncs.com/hexo-index.html
});
Copy the code

AccessKeyId and accessKeyId can be obtained here:

The upload is completed and hexo-index.html can be viewed on the OSS console

Publish directory: publish directory: publish directory: publish directory: publish directory: publish directory

// upload.js
const OSS = require('ali-oss');
const recursive = require('recursive-readdir');
const ORIGIN = 'http://blog.ierii.com';
const PUBLISH_PATH = './public';

const client = new OSS({
    region: 'oss-cn-hangzhou'.// Create the area selected by the bucket
    bucket: 'erii-blog'.// bucket name
    accessKeyId: '* * *'./ / your accessKeyId
    accessKeySecret: '* * *'./ / your accessKeySecret
});

function getFiles() {
    return new Promise((resolve, reject) = > {
        recursive(PUBLISH_PATH, (err, files) = > {
            if(! err) { resolve(files); }else{ reject(err); }}); }); }function upload(file) {
    return client.put(file.replace('public/'.' '), `. /${file}`).then(res= > {
        const url = `${ORIGIN}/${res.name}`;
        console.log(`SYNC SUCCESS: ${url}`);
        return url;
    });
}


(async function main() {
    const files = await getFiles();
    const uploadTasks = files.map(file= > upload(file));
    await Promise.all(uploadTasks); }) ();Copy the code

Blog.ierii.com shows that static files produced by Hexo are already synchronized to OSS, so we just need to consider how to automate deployment of these operations through CI.

Automatic deployment via GitHub Actions

Post the Hexo project to Github first.

For the GitHub Actions tutorial, please check out the official documentation and ruan yifeng’s GitHub Actions Tutorial.

Unlike GitLab CI and Travis CI, GitHub Actions are built on top of each other. Deployment and configuration for the environment is much more convenient than GitLab CI and Travis CI. So let’s just get started and make sense of it.

Under the current directory. To create a new lot/workflows/main yml configuration file:

touch .github/workflows/main.yml
Copy the code

This is the default GitHub Actions configuration file directory, main.yml configuration is as follows:

name: hexo-oss-action

on: [push] Trigger when there is a new push

jobs:
  build: # A task called Build

    runs-on: ubuntu-latest # Run on the latest version of Ubuntu
    
    steps:
    - name: Checkout Download the contents of the master branch from the repository to the working directory
      uses: actions/checkout@v2 # scripts from https://github.com/actions/checkout
      
    - name: run node Configure the Node environment
      uses: actions/setup-node@v1 # configuration scripts from https://github.com/actions/setup-node
      with:
        node-version: '12'
    - run: npm install
    - run: npm run build
    - run: node sync.js
      env:
        OSS_REGION: The ${{ secrets.OSS_REGION }}
        OSS_BUCKET: The ${{ secrets.OSS_BUCKET }}
        OSS_ACCESS_KEY_ID: The ${{ secrets.OSS_ACCESS_KEY_ID }}
        OSS_ACCESS_KEY_SECRET: The ${{ secrets.OSS_ACCESS_KEY_SECRET }}
        ORIGIN: The ${{ secrets.ORIGIN }}
Copy the code

The configuration file is easy to understand, push triggers CI tasks, run-on: Ubuntu-latest specifies the system environment, and the steps steps clearly describe the build process:

Use actions/checkout@v2 to download the repository contents to the working directory
Use actions/setup-node@v1 to configure the Node environment
npm installInstall dependencies
npm run build hexo build
node sync.jsSynchronize static content from publish directory to OSS

There are many private configurations in env that cannot be hardcoded directly in code, such as accessKeyId and accessKeySecret of the underlying OSS. We need a more secure way to transfer the configuration information to the CI environment. In GitHub Actions, we can directly obtain the secrets configuration of the current project by using the ENV item in CI. Secrets can be directly configured in GitHub Setting, which is very convenient:

Then take a look at the key sync.js:

// sync.js
const OSS = require('ali-oss');
const recursive = require('recursive-readdir');
const PUBLISH_PATH = './public';

// Get the configuration from Github Secrets
const {
    OSS_REGION,
    OSS_BUCKET,
    OSS_ACCESS_KEY_ID,
    OSS_ACCESS_KEY_SECRET,
    ORIGIN,
} = process.env;

const client = new OSS({
    region: OSS_REGION,
    bucket: OSS_BUCKET,
    accessKeyId: OSS_ACCESS_KEY_ID,
    accessKeySecret: OSS_ACCESS_KEY_SECRET,
});

function getFiles() {
    return new Promise((resolve, reject) = > {
        recursive(PUBLISH_PATH, (err, files) = > {
            if(! err) { resolve(files); }else{ reject(err); }}); }); }function upload(file) {
    return client.put(file.replace('public/'.' '), `. /${file}`)
        .then(res= > {
            const url = `${ORIGIN}/${res.name}`
            console.log(`SYNC SUCCESS: ${url}`);
            return url;
        });
}

(async function main() {
    const files = await getFiles();
    await Promise.all(files.map(file= > upload(file)));
    console.log('SYNC DONE ! '); }) ();Copy the code

There is no difference with the upload above, but some configurations are moved to Github Secrets. Here it needs to be emphasized that the directory where CI runs is the root directory of the current project. There is no need to change the directory in sync.js. Now we need to push our local changes to Github to see the Github Actions build.

At this point, a simple Hexo blog publishing system is complete

Of course, Github Actions can also implement more powerful functions, interested partners can delve into it, here is just a little practice ideas.

other

OSS doesn’t seem to be free, you need to spend $4 or $7 to open it, it’s still very cheap to play by yourself

If the DEFAULT HTTP protocol is not configured after the OSS domain name is configured, you can configure the certificate hosting as the self-defined domain name with HTTPS green:

My domain name certificate is directly generated by Tencent Cloud’s free certificate, you can also play Let’s Encrypt

The demo warehouse address is here: github.com/kinglisky/h…

Finally, post a favorite cartoon:

Hee hee ~

Hexo + GitHub Actions + OSS blog system construction

Another blog?

Hexo skip

Speak of the OSS

Upload the Hexo resource to OSS

Automatic deployment via GitHub Actions

other

Related Posts

How does a professional front end use Console?

Learn webPack module dependency analysis with Bundler

Six classic JavaScript error analysis