Use Hexo to Create Blog

Posted on Edited on In Symbols count in article: 7.4k Reading time ≈ 7 mins.

Hexo is a fast, simple and powerful blog framework. You write posts in Markdown and Hexo generates static files with a beautiful theme in seconds.

Requirements

Installing Hexo is quite easy. However, you do need to have a couple of other things installed first:

For Chinese users, it is recommended to use cnpm.

Tip: If using Arch Linux, notice Arch Wiki: Node.js#Allow_user-wide_installations.

1
2
3
4
5
# install command cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

# or just set registry
npm config set registry https://registry.npm.taobao.org

Installation

Run the following commands

1
2
3
4
npm install hexo-cli --location=global
hexo init hexo-site
cd hexo-site
hexo server

Then you can see a web page at http://localhost:4000/.

Or a more convenient way: use neoFelhz’s HexoKit.

Usage

For more information, visit https://hexo.io/docs/commands.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# in hexo-site
# start a local server, by default, Hexo is running at http://localhost:4000/
hexo s

# clean the cache file (db.json)
hexo clean

# generate static files (/public)
hexo g

# deploy website
hexo d

# create new article in source/_posts
hexo new "title"

In addition, Hexo provides tag plugins: a useful way for you to quickly add specific content to your posts. For more information, visit https://hexo.io/docs/tag-plugins.

Themes

I recommend hexo-theme-next and hexo-theme-material. You could read a short comparison of popular Hexo themes at https://en.abnerchou.me/Blog/5c00ca67. For more themes, visit https://hexo.io/themes/index.html.

Website Optimization

A simple optimizing tool: Gulp. Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow.

Tip: hexo-all-minifier is a more convenient plugin, but maybe with more problems.

1
2
3
4
5
# install Gulp globally
npm install gulp-cli --location=global

# in hexo-site, install some relative plugins locally
npm install gulp gulp-uglify gulp-clean-css gulp-htmlmin gulp-htmlclean gulp-imagemin gulp-concat –-save-dev

gulpfiles.js should be in the root of hexo-site (like his gulpfile.js). Then the following command (if use his gulpfiles.js) will optimize your generated files.

1
gulp build

Other optimizations such as SEO (Search Engine Optimization): to be done.

Tip: You may want to use hexo-abbrlink to create one and only one link for every post.

Deployment

Here are several hosting service providers.

GitHub Pages

GitHub Pages is designed to host your personal, organization, or project pages directly from a GitHub repository. What is GitHub Pages? says it

  • may be no larger than 1GB
  • limit of 10 builds per hour
  • limit of 100GB or 100,000 requests per month

It’s easy to use hexo-deployer-git to complete deployment, visit https://hexo.io/docs/github-pages for other plugins.

For example, if you want to push the source files and generated files at the same time to two different branches, the option should be like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# _config.yml
deploy:
  # push the generated files (static site, i.e., hexo-site/public)
  - type: git
    repo: git@github.com:<username>/<username>.github.io.git
    branch: master
  # push the source files
  - type: git
    repo: git@github.com:<username>/<usersrepository>.git
    branch: src
    extend_dirs: /
    ignore_hidden: false
    ignore_pattern:
        public: .

Coding Pages

Outdated.

It’s recommended to host your site to Coding Pages if your main readers living in Chinese Mainland. Just add Hosted by Coding Pages to avoid redirection.

Use it as same as GitHub Pages. Just one difference: don’t need CNAME file, please set Pages service settings.

Netlify (Recommend)

“Netlify has everything you need to make a high performance site or web-app. You just push your code.”
–Tom Preston-Werner, Founder of GitHub & Creator of Jekyll

I think Netlify is the best choice. Netlify Docs says that they provide:

  • One-Click SSL: Netlify integrates with Let’s Encrypt and automatically provisions, distributes and renews your certificate
  • HTTP/2 works when HTTPS is enabled
  • Force SSL
  • Continuous Deployment: Each time you push to GitHub, Netlify runs a build with your tool of choice and deploys the result to CDN

Netlify lets you link a GitHub repository to a site. Each time you push to GitHub, Netlify runs a build with your tool of choice and deploys the result to Netlify’s powerful CDN. You also can deploy your static site without linking a GitHub (or GitLab) repository.
Use web UI or command line tools to deploy and generate.

By the way, Matt Biilmann and Netlify recommends www. domain unless you use ALIAS records or ANAME records, I’m naive, I drop www. directly. Users can’t remove the sitename.netlify.com “default” hostname on Netlify, so I have three blog addresses now.

Firebase

Deploying site to Firebase may be a good choice.

Firebase Hosting tells us Firebase

  • files deployed to Firebase Hosting are cached on SSDs at CDN edge servers around the world
  • provides free SSL certificates for custom domains
  • force SSL

Read Firebase Hosting Docs to learn how to deploy static site to Firebase.

You need to cross GFW, and have a Google account.

Login and create a project in Firebase console, get project-id.

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install -g firebase-tools

# may need set proxy for teriminal temporarily,
# as follows (socks5) (optional)
export http_proxy=socks5://127.0.0.1:1080

# in hexo-site
firebase login
firebase init
firebase use --add <project-id>

# all right, try to deploy /public to Firebase
firebase deploy

In fact, Firebase is user-friendly (it has Chinese tutorial), just need to follow its guides. In its console, you can see your history record and learn how to bind domain name.

Edit firebase.json to determine which files should be deployed.

Easy Deploy

Life is short, why not using npm-run-script?
Add "scripts": {} to package.json, as follows:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "6.2.0"
  },
    "scripts": {
    "build": "hexo clean && hexo g && gulp build",
    "blogupd": "hexo clean && hexo g && gulp build && hexo d"
  }
}

Then the following command will cover hexo clean, hexo g, gulp build, and hexo d.

1
2
# in hexo-site
npm run blogupd

However, if you use Linux, you may prefer to create a shell script, or edit .zshrc (or .bashrc, etc.).

For example: a shell script blogupd.sh.

1
2
#!/bin/sh
cd ~/blog && hexo clean && hexo g && gulp build && hexo d && cd -

just run (blogupd.sh should be in current folder)

1
sh blogupd.sh

Or edit ~/.zshrc (or ~/bashrc).

1
2
# ~/.zshrc
alias blogupd="cd ~/blog && hexo clean && hexo g && gulp build && hexo d && cd -"

just run (no matter where you are)

1
blogupd

Image Hosting

Hexo’s Asset Folders allows us to keep images or other files in hexo-site/source/images folder, use something like ![](/images/image.jpg) to access them.

Address Description
https://sm.ms support iOS and Android
https://portal.qiniu.com 七牛云
https://www.upyun.com 又拍云
https://ooxx.ooo/upload
https://tuchuang001.com
https://lightpic.info
https://upload.cc
http://photo.weibo.com/photos/upload 微博图床
http://www.moepic.net
http://www.z4a.net
http://www.lofter.com 乐乎
https://imgur.com Imgur
https://postimages.org
https://imgsafe.org
https://www.getcloudapp.com
https://www.img.ly
https://github.com GitHub Projects. GitHub Issues

HTTPS and Secure Symbol

If you get SSL certificates for your custom domains, and in your pages “absolute” URLs point to secure content - images, scripts and css files (all need HTTPS), then, to the left of the web address, Firefox and Chrome (or Chromium) will show (like this blog)

Otherwise, will show

You can use JitBit to scan your website for non-secure content.

I don’t think a secure symbol provided by Chrome or Firefox is important… But it seems that browsers force us be “secure”.

About This Blog

The comment system of my blog is Gitalk. Here is my whole custom settings: README.md.

I choose Github Actions to deploy automatically, see Lasy：使用 GitHub Actions 自动部署博客. Travis CI or GitLab CI is also a chioce.

Others’ relative articles:

Update

Update your Hexo blog when you are convenient.

use npm outdated to check which package is outadated.

1
$ npm outdated

then

1
2
npm install -g npm-check-updates
ncu -u

Failed. So I edit package.json, and run

1
npm install

It succeeds.