MENU

How to Use GitHub and Hexo to Build a Personal Blog

September 10, 2017 • Read: 362 • Default

Blog Settings and Configuration Guidance

©Copyright Weslie. All rights reserved.

All Blogs are based on my Mac. The command line and the keyword may be different on Windows or other operating system. If you are not using macOS. Please Check the complete edition of the Documentation for more help.

For English version only. There will be no Chinese version in all of the blogs.

The complete edition of the Documentation: https://hexo.io/docs/

GitHub+HEXO

Initialize the hexo and setup

Requirements

You must install the following items first.

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

Add themes

  • chose a theme on the Github and clone it into blog/themes/
  • change the folder's name you just cloned to a single word to represent the theme.

e.g. You just cloned a repo from the Github, and the folder name's xxx-master. You may change its name to xxx.Yep! It looks much clear.

  • change the theme: landscape in blog/_config.yml. You may change the value of the theme to the folder name you just named.
  • More configuration for the theme may be included in the website which you just downloaded it from.

Tip: The default config file in the /theme/xxx/ will probably be _config.sample.yml. And you may rename it with _config.yml.

New Blog

$ cd blog
create a new blog
$ hexo new "title" 
generate
$ hexo generate
server
$ hexo server

Now you can view the website on the local server http://localhost:4000/.

Deploy to remote repo(With Github)

Create a repo named <yourname>.github.io. The repo URL may look like https://github.com/<yourname>/<yourname>.github.io

add the following into blog/_config.yml.

e.g:

deploy:
    type: git
    repo: https://github.com/iWeslie/iWeslie.github.io
    branch: master

Then, you can deploy it on the remote repo on github.

$ hexo deploy

If this report ERROR Deployer not found: git, type in the following code.

$ npm install hexo-deployer-git --save

After deploying to the Github, you may visit your own website on _<yourname>.github.io_.

The easiest way to post a Blog and deploy to remote repo

$ hexo new "new post"
$ hexo clean
$ hexo d -g

Link your Github Pages to your own domain

In this, you must buy a domain ahead of time.

  • Create a CNAME file in blog/source with no suffix!!

To avoid probably error.You may enter the blog directory. Press Shift + Command + . to reveal the hidden files. The Github may automatically generate a .gitignore file in the blog folder after you deploy hexo. Then drag the .gitignore together with holding on Option file into the blog folder itself. And a copy .gitignore 2 will appear. Next, select it, press ENTER and rename it to CNAME without any suffix. Then you can double-click it and check it. Delete everything in it and add your own domain without http://. My domain is weslie.me, so I just add weslie.me without anything else.

  • DRAG THE CNAME FILE INTO blog/source/. This step is the most important ! ! !
  • Now, you can access to your domain management to DNS Settings. It can be found in the website you bought your domain.
  • Check your GitHub Page's IP Adress

Type the following in the terminal will output its IP Adress.

$ ping <yourname>.github.io
  • Add the following records and leave other settings default:
Record: CNAME   Host: www   Points_to: <yourname>.github.io
Record: A       Host: @     Points_to: <IP Adress>
  • Now, with everything done, you can deploy it again.
  • Type in your own domain in the Safari Address Bar. It will show your blog! Cheers
Last Modified: September 20, 2019
Archives Tip
QR Code for this page
Tipping QR Code