Use hexo and netlify for blog

I was using Gridea for a long time, but everytime when I try to setup in my new laptop, I have trouble syncing it, and don’t know what happened under the hood and hard to fix it.

So switch to hexo, I like it so far. It is clean and have a clear struture, with the command line, you know what it does, which files saved to which folder, etc. And it is very easy to setup and integrate with Netlify, all free.

You don’t need another tutorial for how to set it up and host it with Netlify, this article already did a good job.

Themes

There are over 300 themes ! Currently I am using the cactus one, clean. When you put the cactus folder under the themes folder, don’t use git clone, just directly download the cactus zip, then unzip it and put it under the themes folder.

Config file sample, in top level’s yaml:

1
2
3
4
5
6
7
url: https://bofeng.netlify.app
root: /
permalink: /:year/:month/:day/:title/
##
theme: cactus-customized
theme_config:
  colorscheme: white

theme level yaml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
nav:
  home: /
  Tags: /tags/
  articles: /archives/

# comment out all social medias
# social_links:
#   twitter: /

tags_overview: true

posts_overview:
  show_all_posts: true
  post_count: 20
  sort_updated: false
  
logo:
  enabled: true
  width: 50
  height: 50
  url: /images/logo.png
  gravatar: false
  grayout: false

RSS

To add rss output support:

1, npm install hexo-generator-feed --save

2, In themes (cactus)’s _config.yml file, add:

1
rss: atom.xml

Then you will be able to see your rss address at yourwebsite.com/atom.xml

Another good thing, it is easy to integrate the search!

1, In your hexo blog top folder, run:

1
$ npm install hexo-generator-search --save

2, Create new the search folder under source:

1
$ hexo new page search

3, cd to the source/search folder, change index.md‘s content to :

1
2
3
title: Search
type: search
---

4, Open your theme’s _config.yml file, in the nav item, add search:

1
2
nav:
  search: /search/

5, And in top level yaml (optional, b/c this is the default setting):

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

Hexo Command

1, Create new post: hexo new post "post name"

2, Create new page: hexo new page "open source", this will create a open-source folder under the source folder, and you can further edit the index.md inside.

3, To run hexo local server and preview your post: hexo server

4, To generate all static files for your site, use hexo generate or hexo g

Reference

1, Hexo Official Website

2, A Step-by-Step Guide: Hexo on Netlify