Teach you to use Travis CI to automatically deploy your Hexo blog to GitHub

Brief introduction

This year if not a blog is embarrassed to others that you are a programmer, I use XX notes Ah, no? No, this thing can not be shared openly, or publicly share to members, now everywhere is open source, and learned that things can not be shared with people in need of help, it is really sad. So let's talk about it today. When you use Hexo to build a blog, how to automatically update it, we all know that Hexo is required to manually generate HTML static Web pages, although the command is very few, but each time you write a blog to push to git and then generate a static file, then push to the server, think of my heart is also drunk, But to see that there are still people with a U disk, I can only hehe ~, you have patience is very good ~

Well, let's talk today about how to use Travis CI to build your blog.

What is Travis CI

Travis CI is a new open source continuous integration construction project, it is very obvious to jenkins,go with the YAML format, while he is in the online service, unlike Jenkins need your local fight server, concise and fresh unique. Most github projects are now moving into the Travis CI build queue, which is said to run more than 4,000 full builds per day for Travis Ci. For open source projects or users of GitHub, if your project has not yet joined the Travis CI build queue, then I really want to say out to you.

My blog Architecture

It's kind of a frame.

First of all, my blog was built using Hexo, hosted on GitHub-provided gitpage services.

After each blog git push to GitHub, and then Travis automatically build, after the completion of the automatic push to the Gitpage service

Generated HTML files and blog source files I put it in a warehouse, just used a different branch

Master: The static file of the blog, that is, the Hexo generated HTML file, because to use the Gitpage service, so he set the page file must be in the master branch

Blog-source: Is the source code of the blog

Of course this has privacy issues, because anyone can where your blog source, of course, since it is a blog, so there are no such problems

Enable the project you want to build

First, if you want to use Travis CI, you have to have a GitHub account (as if Travis CI only supports building github projects) and a project

Use your GitHub account to login to Travis CI website, as

After login will enter the following interface

Of course, if you have not used before, so you signed up there is no red box content, this is because I have been used before writing this blog, so there will be these content

Next we click on the + next to my repositories, meaning to add a warehouse to be built automatically, such as:

After clicking, you will see the following screen:

You can see that this screen will show the current GitHub account, if not displayed, click on the top right corner of the "Sync Account" button, you can sync up (PS: The last time with a Windows computer is always synchronized to the project, and finally replaced by Mac can sync, Finally back to Windows also can, Khan (⊙﹏⊙) B, not quite understand, what kind of situation)

Actually the warehouse is synchronized, then the next step must be to open the warehouse you need to build, you can see I opened the Lifengsofts.github.io this project, of course, this is my blog.

After opening we also need to do some configuration, the operation is as follows

Click on the Red box of the menu button, the drop-down menu will appear, we choose settings, to this interface, we follow the following tick

Build only if the. Travis.yml is present: Yes, only the branch configured in the. travis.yml file has changed to build
Build pushes: Start building when the branch is pushed out

At this point, we have opened the warehouse to be built, but there is a question of how we can push the generated files to GitHub, and if we can't push them, we don't need Daoteng to use Travis CI service, and the result is, As long as we want GitHub to push, he will automatically build and push static files to Gitpages, then the next thing to solve is Travis CI how to access GitHub

Configure GitHub's access Token in Travis CI

The title has been very clear, we need to configure access Token on the Travis, so that we can automatically push to Gitpgaes after he has finished building, there must be someone to ask, how do you write the username password directly in the file, if you really have such a problem, Then I can only say hehe ~, but I want to tell you is that it must be able to push the success of the

Generate Access tokens on GitHub

First we go to GitHub's Settings screen, click to personal Access Tokens page, click on the upper right corner of the Generate new token button will regenerate a, click after he will ask you to enter the password, then to the following interface, give him a name, Here are some of the check permissions

After the build, you need to copy down, only then he shows, download in order to security he will not show, if you forget to regenerate only one, after the copy we need to Travis CI site configuration

In Travis CI configuration

The configuration interface is also in the setting of the project, such as

As for why we have to configure here, I think you should definitely understand that writing in the program is not safe, CONFIGURED here is equivalent to an environment variable, we can be used in the construction of reference to him.
Here I have configured the warehouse to be built and the token to access, but the problem comes, he knows how to build, how to generate static files, how to push the gitpages, and push to that warehouse, So here we also need to create a. travis.yml configuration file in the source code repository, put it in the root directory of the source code, as

The contents are as follows:

language:Node_jsNode_js:Stable# S:build Lifecycleinstall:-NPM Install#before_script: #-NPM install-g Gulpscript:-Hexo GAfter_script:-CD./public-git init-git config user.name "lifengsofts" -git config user.email "[email protected]" -git Add.-git commit-m "Update docs" -git push--force--quiet "Https://${gh_token}@${gh_ref}" master:Master# E:build Lifecyclebranches:only:-Blog-sourceEnv:global:- gh_ref: github.com/lifengsofts/lifengsofts.github.io.git

Which gives you the configuration information behind the GIT config that you need to replace
Change the value of Gh_ref to your warehouse address

At this point, we have completed the configuration, now is the time to witness the miracle

Push article to GitHub

In this step, we can write an article to add to your blog's _posts directory,

Then commit and push on to your GitHub.

git push origin blog-source:blog-source

If there is no accident, we can see on the Travis CI website that he is already building, such as:

After the build is complete, we go to the blog to see this article

Is it a full-on force?

If my article to bring the help, can add me, Weibo, QQ what what to make a friend is also good, in addition, Weibo will not regularly send some high-quality articles, thank you for your support ~ ~, contact in my personal introduction, thank you for reading, thank you ~

Teach you to use Travis CI to automatically deploy your Hexo blog to GitHub