Tutorial summary

1. Problems to be optimized

When deploying hexo blogs using the hexo d command, the Github repository uploads only the page content generated in the public folder, which causes some problems:

  • The md source file of the local blog article is not backed up, which day the hard disk hangs what to do?
  • Blog is updated on the computer at home, change to the company computer want to publish a post, how to do?

Don’t panic, small problems, these problems can be solved with continuous integration services. Here is a diagram of the overall architecture with continuous integration services:

It doesn’t matter if you can’t read it, the purpose of this article is to make you understand the picture!

2. What is continuous integration service

Continuous Integration (CI) is a service that builds (compiles) code automatically in the cloud.

It binds to projects on Github and automatically grabs new code whenever it comes in. Then, provide a run environment, perform tests, complete builds, and deploy to the server.

The source file for C is a. C file, which is compiled into the. Out executable using the GCC command. This process is called build build.

Similarly, the source file for a Hexo blog is a.md file, and an HTML page can be generated using the Hexo G command, a process also known as build build.

So why is such a cloud-based automated build service called continuous integration?

The service is called “continuous” “integration” because it automatically runs builds and tests whenever the Github repository code changes, feeds back the results, and then “integrates” the new code into the trunk when it meets expectations. There are many tools for providing continuous integration services, and since most of our users are running on Windows, we use the continuous integration service tool Appveyor for this article.

Now for a simple analysis, how can continuous integration services be applied to the Hexo blog?

First, analyze the local Hexo directory:

You can create a new repository on Github to serve as a backup repository for the Hexo source files and upload the files indicated in the above image to achieve the purpose of backup.

Then script the repository for continuous integration:

Script code for setting up the environment in the cloud

  • Install nodeJS environment in Windows;
  • Install the Hexo blog framework;
  • Install nodeJS dependency module;
  • Install hexo plug-ins (such as the Abbrlink plug-in, if available);

Script code to build in the cloud

  • performhexo dCommand to generate HTML pages, i.e. public folder;

Deploy HTML pages in the cloud

  • Deploy the Public folder to the Hexo site repository;

3. Upload the Hexo blog source code to the new backup repository

Create a new repository on Github:

The local repository is then initialized at the site root and associated with the remote repository

git init
git remote add origin https://github.com/Mculover666/Hexo-Blog-Source.git
Copy the code

Since you do not need to back up all files, modify the.gitignore file to indicate the files and folders that are ignored.

  • All contents of the source folder
  • All contents of the Scaffolds folder
  • Site profile:_config.yml
  • All contents of the Themes folder

To sum up, the.gitignore file will look like this:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
public/
package-lock.json
Copy the code

Then execute the following git command to start pushing:

git add .
git commit -m "hexo source"
git push origin master
Copy the code

4. Establish CI using AppVeyor

Visit the AppVeyor login page and use your GitHub account:

Then create a new project:

Select the Github repository to bind to:

5. Create an Access Token and encrypt it

Appveyor needs to submit documents to the repository on Github, so it needs to generate a token on Github to Appveyor. However, the script is public, so it cannot be directly written into the token, so Appveyor provides an encryption function. You can expose encrypted tokens in scripts.

First, go to Github to generate Access Token. The generation method is as follows:

  • Creating a Personal access token for the Command line.

After GitHub generates the Access Token, replace Your GitHub Access Token by encrypting the Access Token on the AppVeyor encryption page:

6. Add the automated build file

When creating the Appveyor project, the GIthub repository is bound to the Appveyor project, so you need to store the Appveyor. yml script file in the repository. If the repository changes, the content of the script will be executed:

Manually add the Appveyor.yml file to the source file:

The document reads as follows:

It is recommended to copy these files directly. You only need to replace Your GitHub Access Token with the Token generated and encrypted in Step 4.

clone_depth: 5 environment: access_token: secure: [Your GitHub Access Token] install: - node --version - npm --version - npm install - npm install hexo-cli -g build_script: - hexo generate artifacts: - path: public on_success: - git config --global credential.helper store - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):[email protected]`n" - git config --global user.email "%GIT_USER_EMAIL%" - git config --global user.name "%GIT_USER_NAME%" - git clone --depth 5 -q --branch=%TARGET_BRANCH% %STATIC_SITE_REPO% %TEMP%\static-site - cd %TEMP%\static-site - del * /f /q - for /d %%p IN (*)  do rmdir "%%p" /s /q - SETLOCAL EnableDelayedExpansion & robocopy "%APPVEYOR_BUILD_FOLDER%\public" "%TEMP%\static-site"  /e & IF ! ERRORLEVEL! EQU 1 (exit 0) ELSE (IF ! ERRORLEVEL! EQU 3 (exit 0) ELSE (exit 1)) - git add -A - if "%APPVEYOR_REPO_BRANCH%"=="master" if not defined APPVEYOR_PULL_REQUEST_NUMBER (git diff --quiet --exit-code --cached || git commit -m "Update Static Site" && git push origin %TARGET_BRANCH% && appveyor AddMessage "Static Site Updated")Copy the code

If you have a plug-in installed, such as Abbrlink, you can add it after the existing commands in the Install section. Here is my configuration (for example, how to add it) :

7. Set the Appveyor environment variables

After appveyor.yml is added, add the following four variables to the Appveyor Portal:

  • STATIC_SITE_REPO: Github repository address;
  • TARGET_BRANCH: Branch of the blog site repository (default is master)
  • GIT_USER_EMAIL: GitHub account information;
  • GIT_USER_NAME: GitHub account information;

Completed 8.

After uploading the source code to the repository, Appveyor will detect the changes and automatically push and deploy.

Perform push

First suspend all changes and commit:

git add -A
git commit -m "first"
Copy the code

Then push to remote repository:

git push origin master
Copy the code

Observe the running status of automated scripts

Go to Appveyor and see the current build in current Build:

You can see that the automation script is running successfully, the site is deployed successfully, and you can check to see if the blog site repository is up to date.

9. The operation of replacing the computer

With the automated build service, the Hexo site repository (McUlover666.github. IO) is no longer relevant to us, we just need to manage the Hexo Source repository (hexo-blog-source).

After you’ve written an article or made any changes, you don’t need to do anything, just git push to the source repository, and the auto-build service will automatically detect the changes, generate the page, and deploy the page to the site repository.

So, after replacing the computer, first pull down the Hexo source repository, then modify or add new articles to it, and finally git push to the source repository. Ok! Let the automated build service do the rest

The architecture of the whole system can be adjusted as follows: