Travis CI plus hexo to automatically build and deploy GitHub pages blogs

Posted on

This article has been published on my blog ne0ng’s blog
Travis Ci and hexo to realize automatic construction and deployment of GitHub pages blog | ne0ng’s blog

Re installed a few days agofedora 31So I rebuilt this blog at home during the Chinese New YearTravis CITo automatically build and deploy my blog, and then put my hexo blog file on GitHub. Finally, I don’t need to be afraid that I forget to back up my blog when I re install the system. At the same time, there is no need to configure the system locally. <!– more –>

Preparation in advance

  • Git
  • npm
  • Travis CI
  • Github


Installing hexo

npm install -g hexo-cli

Configure hexo

Initialize hexo site

hexo init

usernameIt’s your GitHub user name. Of course, you canusername.github.ioReplace it with whatever name you want

Make some necessary changes

  1. Open the site’s_config.yml
  2. The most important thing is to modify the following
project explain How to change it
title Title of the website Anything, such as my site title calledNe0Ng's Blog
author Your Name Put your name on this one
language Language of website If you can read my blog, change it tozh-CN
timezone Time zone of the site Fill in all areas in ChinaAsia/Shanghai
url Links to websites If you don’t have a domain name, fill

For other modifications, refer to hexo’s documentation

Configuration | Hexo Doc

Modify the theme of the site

In this paper, in order toSukaThe subject is an example

For more customization, please refer to suka doc

  1. Installation theme
cd themes
git clone suka
cd suka
npm install --production
cp -i _config.example.yml _config.yml
  1. Enable theme
#Go back to the root of the site

cat themes/suka/site_config.yml >> _config.yml

Edit site’s_config.yml, willtheme: landscapeChange totheme: suka

After the change, your site’s_config.ymlThat’s about it

# Extensions
## Plugins:
## Themes:
theme: suka

# Deployment
## Docs:
  type: ''

# Suka-theme
    enable: true
    path: search.json
    field: post # Page | Post | All. Default post
    enable: false
    line_number: true
    theme: default

Local debugging

hexo s --debug

#Confirm that the site is functioning properly

Upload site folder to GitHub

Initialize git locally

Since I directly clone the whole topic from the network in the CI phase, I willthemes/Joined.gitignoreSo here you have to copy the configuration file of the theme to the root directory of the site, and then put it back to the original location in the CI phase. (if the theme you use has other configuration files, it should be copied to the root directory of the site)

Copy a configuration file for the theme

cp themes/suka/_config.yml  _config.theme.yml

Initialize Git

git init 

ensure.gitignoreIt contains the following contents (if you don’t have this file, you can create it yourself)


Create repo in GitHub

Create a new repo (usernameIs your GitHub account name)

#Add GitHub warehouse to local
git remote add origin

#Create a new branch named source
git checkout -b source

#Add all files to GIT
git add .

#Add commit
git commit -m "initial"

#Push local files to the source branch on GitHub
git push -u origin source

If there is no problem in operation, the file in repo should be similar after you upload it

├── _config.theme.yml
├── _config.yml
├── .gitignore
├── package.json
├── package-lock.json
├── scaffolds
└── source

Configure Travis Ci

  1. Add Travis Ci to your GitHub account
  2. Go to the applications settings and letTravis CICan access your repo
  3. Go to personal access tokens forTravis CICreate a token(It only needsrepoThis scope), and thenRecord the value of token
  4. Go to Travis Ci and click on your repo pageMore OptionsfindSettings, and findEnvironment Variables, create a name (name) asGH_TOKEN, value is youToken recorded in the previous step, and finally save it
  5. In your GitHub project source branch, create a new one called.travis.ymlPlease refer to the following contents to fill in (I have notes, do not copy)
os: linux
language: node_js 
  -10  using nodejs lts v10
    -Source  only the branch of source is monitored
    - node_ Modules  cache node_ Modules speed up building
before_ Script: ාාාාාාාාාාාාාාාාාාා
  -NPM install - G hexo cli  install hexo in CI environment
  -MKDIR themes  since we did not upload themes / we need to create a new one
  - cd themes 
  - git clone  Suka ා pull suka theme from GitHub
  - cd suka
  -NPM install -- production  installs the dependency of suka theme
  -CD.. /..  return to site root directory
  - cp _ config.theme.yml  themes/suka/_ config.yml  #Put the theme's configuration file back in place    
  -NPM install  install site dependencies at root 
  - hexo generate # generate static files
Deploy: according to personal situation, it will be different here
  provider: pages
  skip_ Cleanup: true  do not clear after build
  token: $GH_ Token  the token you just set
  keep_ History: true  save history
  fqdn:  blog.ne0ng . page  custom domain name, using  Can be deleted
    Branch: source  branch of hexo site source file
  local_dir: public 
  target_ Branch: Master  stores the branch that generates the site file  Must be master
  1. After you save it, Travis CI will be deployed. After it is finished, you can put it in your repomasterBranch to view the generated site file
  2. You should be able to visit Check out your site

I’ve been revising it after I’ve finished writing it. Recently, I’ve made some steps clear (adding notes to some contents). Now I think it should be very clear. If you see it, please leave me a message (if you find any mistakes or if I don’t write clearly enough, you should leave me a message.

reference resources

  • Hexo Doc – Deployment – Github Pages
  • Travis CI Documents – GitHub Pages Deployment
  • Continuous integration services Travis CI tutorial – Ruan Yifeng’s network log
  • Suka Theme Docs

Copyright notice

Author: ne0ng
This paper adopts CC by-nc-sa 4.0 license agreement
Link to this article:

Leave a Reply

Your email address will not be published.