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.
- with
The main branch
To store the source code for the Hexo Blog project. - with
Gh - pages branch
Store 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_TOKEN
Fill in the value you generated in frontGitHub Token
And 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