0%

How to Create Blog on GitHub with Hexo & Travis CI

0. Assume you have already installed Node.js and git.

1. Install Hexo CLI globally.

1
npm install -g hexo-cli

2. Use Hexo CLI to create your project and initialize it.

1
2
3
hexo init <project-name>
cd <project-name>
npm install # install dependencies

3. Setup version control for your project.

1
2
3
git init
git add --all
git commit -m "Initial commit"

4. (Optional) Replace the default theme.

Follow the instructions here: How to Change Hexo Themes.

This blog is using NexT theme if you’re interested.

Don’t forget to commit it:

1
2
git add _config.yml
git commit -m "replace the default theme"

5. Auto-Deploy to GitHub Pages with Travis CI.

Preparation

Create an empty repo on GitHub named blog.
Add Travis CI to GitHub in the Marketplace, and add the blog repository in Travis CI.

Config Access Token

Go to Personal access tokens page on GitHub,
Generate a new token with repo scopes. Copy that generated token.

Open Travis CI, add your blog repo and then go to Settings.
Add an Environment Variables with GH_TOKEN as name and paste that token as value. Save it.

Add Config File

Add a .travis.yml file to your project with the following content:

.travis.yml (Click to open)
.travis.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sudo: false
language: node_js
node_js:
- 10 # use nodejs v10 LTS
cache: npm
branches:
only:
- master # build master branch only
script:
- hexo generate # generate static files
deploy:
provider: pages
skip-cleanup: true
github-token: $GH_TOKEN
keep-history: true
on:
branch: master
local-dir: public

Commit it:

1
2
git add .travis.yml
git commit -m "Add Travis CI"

Push your project.

1
2
git remote add origin https://github.com/<your-username>/blog.git
git push -u origin master

Re-Check

Open the repo’s Settings on GitHub, navigate to GitHub Pages section.
Make sure gh-pages branch is selected as the Source option.

Check the webpage at your-username.github.io/blog !

From now on, you can even add or edit posts on GitHub directly!
Travis CI will detect the updates and rebuild your page for you!

Happy Blogging!