My personal static blog is hosted on Github. I used Hexo before, but as its complicated package dependence and cumbersome deployment process, I have to encapsulated the whole deploying environment into Docker image for rapid deployment. But it was still too complex. Now I switch to Hugo which is faster, simpler.
Attention: The following operation process will not involve account registration, Git configuration.
- Registering a Github account;
- Registering a Travis CI account (login with Github account);
hugoin your system;
- Personal domain (optional, here my domain is
The relevant operations in this document are based on the official document as the operation guides:
- Travis CI
- Github url: https://github.com/gohugoio/hugo
- Downloading page: https://github.com/gohugoio/hugo/releases
- Release Info API: https://api.github.com/repos/gohugoio/hugo/releases/latest
Current release version info
This Python script is used to install or upgrade Hugo on GNU/Linux.
Create A New Site
Here I name the site to
quickstart (it is just the directory name, not the final site name).
Generated directory structure by Hugo:
Attention: These files are not the final blog contents, they are just used to generate the blog contents.
content is used to store your blog file (Markdown file).
If you wanna preview the final effect, just executing command
hugo server to set up a local server which is listening port
1313. And opening the link in your browser.
hugo in your project directory, it will generate a directory named
public. This directory contains the final blog contents. What you need to do is push all the files in this directory to the branch
master of your GitHub repository.
The demonstration process is as follows:
Github Repository Operation
Important: The handling ideas and operations of this section are very important. Not involving Git setting procedure.
If you use Github Page to host blog, you need to create a repository named
<username>.github.io. Then putting the files generated by Hugo to the branch
master of this repository.
I create 2 branches via command
git checkout --orphan to store source files and blog contents in directory
codestores source files;
masterstores blog contents in directory
Attention please, this method is different from official document Configuring a publishing source for GitHub Pages.
Create Empty Repository
My GitHub account is
MaxdSre, so I need to create a repository named
After creating the repository, it will prompts
or create a new repository on the command line
or push an existing repository from the command line
There are 4 steps:
- Initializing Git repository via command
git initin project directory;
- Creating branch
code, pushing source files to remote repository;
- Executing command
publicdirectory; Transferring all the files in this directory to another temporary directory, empty project directory, then move the files store in temporary directory back to project directory;
- Creating branch
git checkout --orphan, then pushing all files store in current directory to remote repository.
Entering the target directory (here is
/PATH/quickstart/), then executing the following commands in sequence.
hugo in project directly to generate directly
public. If you wanna check the branch info of this repository, just executing command
git branch -a.
This section is optional. In order to store images in GitHub directly, I create the third branch
image. All images used in blog will be saved in this branch.
If you wanna switch your local branch to remote branch
remotes/origin/image, you may consider executing the following command
Deleting branches has three types: remote branch, local branch, local remote-tracking branch, more details in How do I delete a Git branch both locally and remotely?.
Travis CI Configuration
Github Access Token Generation
You’ll need to generate a personal access token with the public_repo or repo scope (repo is required for private repositories). Since the token should be private, you’ll want to pass it to Travis securely in your repository settings or via encrypted variables in .travis.yml.
personal access tokens in GitHub page Developer settings. If it is a private repository, choose
repo. Otherwise, just choose
public_repo. Here I choose
The length of the generated token is 40, please keep is private.
Environment Variables Setting
token is used in Travis CI, the page url of target repository in Travis CI is https://travis-ci.org/MaxdSre/maxdsre.github.io/settings.
Don’t forget to check
Build only if .travis.yml is present,
Build pushed branches,
Build pushed pull requests.
The default name of
token defined in official document GitHub Pages Deployment is
GITHUB_TOKEN, this document alse lists other directives.
Notice that the values are not escaped when your builds are executed. Special characters (for bash) should be escaped accordingly.
Defining variables, it will be used in file
|GITHUB_EMAIL||[email protected] (pseudo value)|
|GITHUB_TOKEN||75e8b7y318ebf48df0bc35cp4affd79e167b2489 (pseudo value)|
Hugo is written by Golang. If I chose
language: go in
.travis.yml, the process of build Golang environment costed too much time (a few minutes).
I find someone use Python to deploy successfully, then chose Python as operation environment. As the containers of Travis CI is based on Ubuntu, I can use command
apt-get, but it needs
As Python failed to build frequently, because GitHub forbided HTTP request from Travis container. I solve this problem via
The final code is as follow
Writing it into file
.travis.yml, and push file
.travis.yml to the branch
code of remote repository.
After all operations are finished. If you push your changed source file to branch
code. Travis CI will automatically execute directives defined in file
.travis.yml, then pushing the generated blog contents to branch
- Continuous Integration of Hugo Website using Travis CI and Github
- Travis continuous delivery
- How to create a website like freshswift.net using Hugo, Travis CI, and GitHub Pages
- GitLab CI remove priority zero from Hugo sitemap
- Deploy Hugo site to Github Pages with Travis CI
- 2018.04.11 00:20 Wed America/Boston
- first draft
- 2018.07.11 12:20 Wed America/Boston
- add python script for hugo installation
- 2018.08.03 08:44 Fri Asia/Shanghai
- add switch branch
- 2018.12.04 11:46 Tue America/Boston
- use Golang in travis
- 2019.01.30 09:38 Wed America/Boston
- still use Python in travis, short time consuming
- 2019.04.05 22:44 Fri America/Boston
- update hugo version to
- update hugo version to