Introduction: Because I am studying VUE recently, I want to put the web page made into a website with my own domain name for everyone to learn and exchange (install B). The first consideration is to rent the cloud host, but the cloud host expensive force, thousands of hard finally find a cheap point 20 dollars a month of domestic host. The result just bought the domain name binding up fresh, led to be unable to visit for a while. A face meng force good! Actually need to put on record, Baidu put on record cycle almost a month… Playing with hair! Consulted, originally all domestic hosts must be put on record to access through the binding domain name. No wonder my Github hexo blog domain is accessible because Github uses a foreign host… I used to think that only CN domain name needs to be recorded. I also checked my Hexo blog (top domain name), which is still accessible, and I’ve been having this misunderstanding…

Finally, the vue page was displayed via Gh-Pages on Github and its domain name was bound (importantly, not registered and not blocked). So I began to wonder if the Travis CI for continuous integration of Vue pages could be used on hexo blogs to greatly reduce the tedious process of blog updates. It really reduced the number of commands per blog update (compare that to version 1.0 for those of you who are interested) and!! The hexo blog installation and migration process was also greatly simplified, resulting in this article!

My hexo blog: Marathoner | warehouse address use theme: Material

1. Install hexo

Note: Because my computer is Windows system, I have been using Linux on virtual machine before, so I think it is unnecessary, so I changed the Github client on Windows. So the following steps in this article are all done on Windows.

Before installing Hexo, make sure you have Git and Node.js installed on your system without further ado.

Use Git Shell to print the following command for a global installation of the Hexo scaffolding

npm install hexo-cli -gCopy the code

2. Initialize hexo

Let’s create a new hexo folder and use Git Shell CD to go to that directory, then type the following command to initialize hexo

hexo initCopy the code

3. Create the Github repository

I created a warehouse named zytx121.github. IO with the account name, because it seems to have seen before that only the user name as the warehouse name can show the web page. Later found to be completely is a rumor, making you the following any a warehouse can be generated have their own unique domain name display page (interested in children’s shoes can click on the article), is not to say a lot under the account can only have a warehouse display page, is not to say that each account multiple display page can have only one unified domain name.

3. Clone the Github repository to the local PC

4. Copy everything in the previously initialized hexo file to the github repository local directory

Now that the hexo blog is ready, it’s time for Travis-CI!

5. Continuous integration of Hexo using Travis-CI

(1) Log in with your Github account

This binds Github to Travis – CI so that it can read your github repository

(2) Open the specified warehouse and carry out relevant Settings


Build: When that branch is pushed, construction begins

Then go to github setting page to complete the Access Token application and store it as the value of environment variable GH_TOKEN here.


(3) Create Travis Settings file

Finally, let’s go back to the repository local directory and create a new.travis. Yml file under that directory

The content of the document is as follows:

language: node_js
node_js: stable

# Travis-CI Caching
cache:
  directories:
    - node_modules


# S: Build Lifecycle
install:
  - npm install

before_script:
 # - npm install -g gulp


script:
  - hexo g


after_script:
  - cd ./public
  - git init
  - git config user.name "yourusername"
  - 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 LifeCycle

branches:
  only:
    - hexo
env:
 global:
   - GH_REF: github.com/zytx121/zytx121.github.io.gitCopy the code

Here we see that Travis is actually a cloud hosting command line that runs scripts for you!

It executes the scripts in the order we specify, first install, then before_script, script, and finally after_script.

Branches Specifies the branches where scripts are executed.

The global variable GH_REF specifies your warehouse address.

We first installed the dependencies on Travis’s brand new host using NPM install, so there is no need to re-install hexo and initialize it. Once the required dependencies are installed, we can use the hexo command directly.

We then use the hexo g command to generate static files, which are placed in the public directory by default.

We CD to the public directory, initialize the repository with Git init, and set the relevant information.

Finally, Travis -ci pushes all files in the public directory to the master branch of the repository you created.

For more details, see this article on how to use Travis CI to automatically deploy your Hexo blog to Github

6. Pull into the github repository directoryHexo branchGo up

In this case, I’m using a PC client. The file changes are displayed in the directory. Enter Summary remarks, click Commit, and then Publish in the upper right corner. (Note that the source code for our blog resides on the Hexo branch and the static web files generated by hexo reside on the Master branch. The default branch for GH-Pages is master, but this can be set.)

Binding domain

To bind your own domain name, simply create a new CNAME file (in uppercase) in the /source/ folder under the root directory and write your domain name in it. Save it and push it together

Then, enter your domain name in the repository Settings.

Also add the following two resolvers to the server admin console where you bought the domain name:

Host record: @ Record type: A Record value: 192.30.252.153 TTL: 10 minutes Host record: WWW record type: A Record value: 192.30.252.154 TTL: 10 minutesCopy the code

This completes your domain binding.

About 404 page:

Similarly, you can create a new 404.html file in the /source/ folder under the root directory, And then write in it < script type = “text/javascript” SRC = “http://www.qq.com/404/search_children.js” charset = “utf-8” > < / script > and save. This way, when you visit a page that doesn’t exist in the blog, the browser will automatically redirect to Tencent’s Charity 404 page.

And you’re done!

7. Wait for Travis-CI to execute the script

That means it was successful. Red means it was unsuccessful. The page displays the command line that runs, and if an error occurs, an error is reported.

So far, the construction method of the blog is introduced. Repeat step 6 each time you need to update your post.

When you need to update your blog on another computer, use the following code:

  1. $ git clone https://github.com/zytx121/zytx121.github.io// Copy the repository and build it locallyzytx121.github.iofolder
  2. $ cd zytx121.github.io// Go to the root directory of the folder
  3. $ npm install(To be fair, this step can be omitted if you just add blog posts and don’t hexo. Because Travis will install dependencies on its host to generate static pages for you.

Then, you can happily update your blog on this new computer

Comparison with version 1.0

  • The hexo-deployer-git plug-in does not need to be installed

  • No need to produce static files locally (Hexo D) every time you deploy a blog (Hexo G)

  • After the replacement PC is cloned to the local PC, only NPM install is required to install dependencies, no need to install Hexo, out of the box.

  • Every time you update your blog post, all you need to do is push the changes to the Hexo branch, and Travis – CI does the rest for you.

Since continuous integration greatly simplifies the process of updating the Hexo blog, I started to restore the Hexo blog I had abandoned for too much trouble!!