Out of the box, Hexo blog’s Github + Server is automatically deployed

It took HEXO some time to build up his personal blog, but every time he published an article, he had to turn on his computer, compile it, and then submit it to the server. It was really troublesome. After chatting with his friends about his blog publishing method, he got over his pain and quickly published the blog. Travis CLI get up!

Quick publishing of chat logs

A few days ago, I attended a sharing meeting with my friend Pipe. I saw him take notes. After the meeting, I told him to send them to me. Oh, my God, it was sent to the site in an instant! Pipe is very productive. If you look at his blog, “Productive as sows” is not an exaggeration. May is not over yet, with seven posts.

I asked him, how can he be so productive? Pipe says the first thing is that his blog is fragmented and doesn’t have to be a big post, and the second thing is that his blog system needs to be easy to post as you write.

In contrast, my blog, update frequency is really low, on the one hand, like to suppress the special articles, dragging, and then no and then. On the other hand, publishing is really troublesome. The computer has to edit Markdown, execute all kinds of commands, and finally push it to Github and my own server, so that the article can be seen by everyone. At the beginning, I thought it was quite geek, but later, due to these thresholds, I was really hit by those writing thoughts coming at any time.

By the Way, Pipe uses Jekyll, and continuous integration with Github is natural, whereas HEXO doesn’t have that advantage. Switching from Hexo to Jekyll wasn’t too much of a hassle, but I did some work on Hexo Ecology and I’m still a bit reluctant.

• Github Blog: My branch of the blog
• hexo-generator-index-plusThe hexo widget, the home page sort generator, is significantly different from the native index-Generator by adding a top function, which can be added in front-mattertopProperties.
• Hexo-theme-fresh: Hexo blog theme, green little fresh, Medium style.

HEXO’s development and production branches

The repository is divided into two branches, dev for main development and GH-Pages for production. The blog can be viewed by visiting Github Pages, or by visiting my domain at wuyuying.com/blog.

Development branch Dev

On my blog, the development branch is dev, and the directory structure is hexo init at the beginning.

- Scaffolds // Page templates, including Drafts, Pages, articles, and other custom templates -source// Put page and article markdown document - themes // blog theme - _config.yml // config file - package.json -.travisCopy the code

The local development process generally looks like this.

// Hexo server, hexo generate, hexo generate, hexo generate, hexo generatesource` inside pages and articles compiled into ` public ` HTML file inside hexo g / / hexo deploy, if _config yml has configured the deploy content, execute this command is executed hexo d corresponding deployment logicCopy the code

HEXO’s specifications and instructions will not be written here, but portals are available in the official documentation.

Gh-pages production branch

In the Dev branch, after hexo G is compiled, the compiled static files are stored in the public folder, and we move the contents to the final production branch gh-Pages, which is the static blog we see.

When we open the Github-Pages service on Github and render the GH-Pages branch, we can access our own blog (yuyingwu.github.io/blog/).

Travis CI

With an overview of HEXO’s development process, we can start to think about what we need to do to achieve fast publishing. User Story: I hope I can write an article on Github, and after submitting it, I can see it directly on my online blog.

In this case, we use Travis CI, which provides Continuous Integration services, but not the CI services it provides, more by listening for dynamic branch commits to perform our custom deployment logic once the Integration is successful.

Continuous integration is a software development practice in which team development members integrate their work frequently, with each member integrating at least once a day, meaning that multiple integrations may occur per day. Each integration is verified by an automated build (including compilation, release, and automated testing) to catch integration errors early.

Oh, and some preparation:

• In the firstdevBranch, create.travis.yml
• Turn on the CI switch for this branch on the Travis CLI platform

1. Compile and synchronize to GH-Pages

Go to my CI configuration code.

language: node_js
node_js: stable

addons: # Travis CI suggests adding an automatic update API
  apt:
    update: true

cache:
  directories: 
  - node_modules # cache node_modules

install:
- npm install First install, in CI environment, perform install NPM dependency

# before_script: 

script:
- hexo g # execute hexo generate to compile the article in public

after_success: After executing the script successfully, go to public and submit the code inside to the gh-Pages branch of the blog
- cd ./public
- git init
- git config user.name "Yuying Wu"
- git config user.email "[email protected]"
- git add .
- git commit -m "Update site"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:gh-pages

branches:
  only:
  - dev # CI is for branch dev only

env:
  global: # global variables, the above submission to Github command is useful
  - GH_REF: github.com/YuyingWu/blog.git
  - secure: 
# Secure is automatically generated, execute 'Travis encrypt 'GH_TOKEN=${your_github_personal_access_token}' --add'
Copy the code

Github commits the part that involves generating and encrypting the Github Access token.

1. Generate Personal Access Tokens on Github
2. Install Travis CLIgem install travis(If you encounter an environment problem with login, check out the solutions in the reference article below.)
3. Go localdevDirectory (with.travis.yml), the implementation oftravis loginLog in and run againtravis encrypt 'GH_TOKEN=${your_github_personal_access_token}' --addEncrypt your Personal Access token (aka later.travis.ymltheenv.global.secureThe value of the)

After submitting.travis. Yml, check out the Travis CLI and start continuous integration.

Once the integration is complete, you can also see article updates on the Github Pages page.

2. CI goes to my server

The setup file of the server is id_RSA. The setup file of the server is id_RSA. The setup file is id_RSA. We can log in to the server via SSH user@ip_address.

# this command will automatically pass the id_rsa encryption to the Travis of the.git repository (in my local case the file is called qq_rsa, not the default id_rsa).
travis encrypt-file ~/.ssh/id_rsa --add
Copy the code

Yml will also generate an encrypted id_rsa.enc file in the branch directory. Be sure to submit this file as well.

before_install:
- openssl aes-256-cbc -K $encrypted_3cf6c1fd150f_key -iv $encrypted_3cf6c1fd150f_iv
  -in qq_rsa.enc -out ~/.ssh/id_rsa -d
Copy the code

Then to ensure proper execution in Travis, we process the rsa file permissions and output prompts for the runtime environment, before_install as follows.

before_install:
- openssl aes-256-cbc -K $encrypted_3cf6c1fd150f_key -iv $encrypted_3cf6c1fd150f_iv
  -in qq_rsa.enc -out ~/.ssh/id_rsa -d
- chmod 600 ~/.ssh/id_rsa
- echo -e "Host Host IP address \n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
Copy the code

Finally, add a copy of the target file to the server target directory in after_success, and you’re done!

after_success
# other actionsSCP - o stricthostkeychecking = no - r. / * [email protected]: / home/wyyNode/public/blog /Copy the code

Refer to the article

• How to quickly build a Hexo blog with a domain name and continuous integration (version 2.0) – Eva-Yue
• Hexo automatically deploys to Github – three water
• Continuous Integration Services Travis CI Tutorial – Nguyen Yifeng
• “no implicit conversion of nil into String” when logging in- in the implementationtravis loginSolutions to problems encountered
• Deploy to GitHub pages from Travis CI
• Use Travis to upload GitHub files to the server – Godi13

About me

Yuying Wu

Front-end enthusiast/encourager/New Zealand working holiday/shoveling officer

Currently, I am working in B2B front-end team of a large e-commerce company.

If you like the front end like me, like to play with independent blog or cutting-edge technology, or have any career questions, you can follow my Zhihu ID Yuying Wu/independent blog wuyuying.com/Github, welcome all kinds of communication.