We set up personal website in the first place, is not to be able to write good blog? All repetitive and boring tasks should be automated, especially with static blogs, where we just focus on the text.

What is a CI

Continuous Integration (CI) is translated into Continuous Integration. Travis CI is a continuous integration platform that Github can associate with Travis CI, and when there is code push in the Github repository, a notification is pushed to Travis CI to run a specified task according to the set script.

Benefits of using CI to automate deployment

  • The MD file can be edited directly online, effective immediately. Let’s say you’ve posted an article, and a few days later you’re browsing on another computer and there are a few glaring typos. That’s totally unacceptable. But since you don’t have a full development environment on your computer, such as Hexo + Node.js + Git, reconfiguring your development environment is impractical. If you use CI, you can access the Project repository on GitHub directly with your browser, edit the md article directly with typos, correct it, submit it online, and wait a while for your site to be updated automatically.

  • Manual deployment requires pushing the entire public folder to GitHub. In the later stage, when there are many articles and pictures on the website, the connection to GitHub is not so smooth, and it often takes a long time to upload. With CI, you can just submit the SEPARATE MD file in the post file, which is very quick and cool, who uses who knows.

  • Using CI, you can deploy these static blog Pages to multiple servers at once, such as GitHub Pages, Qiniuyun, Aliyun, etc.

  • .

Set up process

This article uses Hexo +KeepAs an example of how to use Travis CI to automatically deploy to a GitHub Pages server.

Create a GitHub repository

Create a GitHub repository to store the source code and static pages of the Hexo project

Note: Select both public and private repositories, but Travis CI is only free for GitHub’s public repositories.

For example: this article case repository keep-site.

  • withThe main branchTo store the source code for the Hexo Blog project.
  • withGh - pages branchStore to compile generated static pages.

CI is automatically compiled and deployed to gh-Pages when the main branch source code (subject files, article MD files, images, etc.) is changed.

Making new Token

Create a GitHub Token with repo permission.

The newly generated Token is displayed only once. If any Token is lost, the newly generated Token is displayed again.

add.travis.yml

Add Travis CI’s configuration file.travis. Yml to your Hexo blog project folder.

The contents of the.travis. Yml file are as follows:

# Compile environment, language
dist: xenial
os: linux
language: node_js

# Node. Js version
node_js:
  - 12

branches:
  only:
    - main                      CI is triggered only when the main branch checks out changes

before_install:
  - export TZ='Asia/Shanghai'   Set time zone to UTC+8
  - npm install hexo-cli        # installation hexo

install:
  - npm install                 Install dependencies related to the Hexo project

# Execute script
script:                         
  - hexo clean                  Clear the hexo cache
  - hexo generate               # Generate static files

deploy:
  on:
    branch: main                # Work branch
  strategy: git
  provider: pages
  skip_cleanup: true            # Skip the cleanup
  token: $GH_TOKEN              # GitHub Token variable
  keep_history: true            # Keep push records in incremental commits
  local_dir: public             # Static file directory that needs to be pushed to gh-pages branch
  target_branch: gh-pages       Local_dir (public) -> gh-pages branch
Copy the code

Travis CI associates the project warehouse

  • Log in with your GitHub accountTravis CI’s official website, associate your Hexo blog project repository with the GitHub Token you generated earlier.

  • Click the profile picture in the upper right corner and select “Settings”.

  • Locate your Hexo project repository in the listed repository and click “Settings”. If there are too many warehouses, you can search directly.

  • Add the environment variable,GH_TOKENFill in the value you generated in frontGitHub TokenAnd finally click “Add” to Add.

Using the process

Modify the source code file

In your Hexo project folder, modify your articles, images, themes, etc.

Push to the warehouse

Push your Hexo project code to the GitHub repository’s main branch. Travis CI detects changes in the main branch code and automatically executes a script to compile the Hexo project to generate static pages and deploy it to the GH-pages branch.

Note: Gh-pages branch is a fixed branch of the GitHub Pages service, you just need to fill in the.travis. Yml file correctly, it will be created automatically.

Access using a custom domain name

You can access the GitHub Pages service using your own domain name by adding the CNANE file to the Source directory of the Hexo project.

The contents of CNANE file are as follows:

keep.xpoet.cn
Copy the code

Open the HTTPS

Below is a successful automatic deployment of Travis CI to the GH-Pages branch.

We can enable the domain name HTTPS protocol in the repository Settings.

At this point, the tutorial for automatically deploying the Hexo static blog to GitHub Pages using Travis CI is complete. Any questions, please leave them in the comments section.

Similar tools

In addition to Travis CI, we can also use GitHub Actions to automate Hexo deployment, and the effect is the same, at your choice.

GitHub Actions You can use a private repository. For those who require privacy, please try GitHub Actions.

Another tutorial by the author: How to use GitHub Actions to automatically deploy the Hexo blog

If it helps you, give the author a like