About This Blog
This blog can be regarded as a simple cheatsheet for Hexo, the official documents and tutorials are:
π Hexo Docs
π Hexo Tutorial
Introduction
As a designer and half of a programmer, it has always been my dream to own a personal blog. After trying different blog-building tools, I decided to use Hexo.
Hexo is a fast and simple blog framework that uses Markdown to write articles which provides a variety of themes. It is also very easy to modify and customize those themes. When writing this blog, I applied the NexT theme in Hexo.
I also wrote a blog to introduce the deployment of hexo on remote servers:
π Hexo Deployment
Table of Contents
- Installation
- Initialization
- Create Posts
- Tags & Categories
- Asset Folders
- Basic Functions
- Themes
- Customize NexT Theme
Installation
Check
node.js
installation:1
$ node -v
Check
git
installation:1
$ git version
Install Hexo:
1
$ npm install -g hexo-cli
For MacOS, might have some permission problems, solution:
1
2$ sudo chown -R `whoami` /usr/local/lib/node_modules
$ npm install -g hexo-cli
Initialization
Initiate a hexo project (after you choose a proper file location):
1
$ hexo init my_blog
Go into the project file (my_blog), and run hexo server locally:
1
$ hexo server
Create Posts
Create posts:
1
hexo new post first_post
Create & publish drafts:
1
2hexo new draft draft_post
hexo publish draft_postCreate pages:
1
hexo new page new_page
Front Matter
Front matter is the
meta-data
in front of each posts, which is written in eitheryml
orjson
. The front matter presents data such as title, date or tags.Example:
1
2
3
4
5
6
7
8---
title: First Post
categories:
- [cat1, cat1.1]
- [cat2]
date: 2018-06-01 13:48:59
tags: [tag1, tag2]
---Scaffolds
Scaffolds are the
templates
that can be defined by the user to specify some type of posts.
Tags & Categories
Tags example:
1
tag: [tag1, tag2, tag3]
Categories example:
1
2
3
4categories:
- [cat1, cat1.1] #cat1.1 is the sub-category of cat1
- [cat2]
- [cat3]
Asset Folders
Asset folders are used to store static data (such as images & videos), Hexo create asset folders that have the same name of the posts. For example, the asset folder for FirstPost.md
is /FirstPost/
.
In the
config.yml
file, set the asset folder to true:1
post_asset_folder: true
Inside the .md file:
1
{% asset_img xxx.JPG %}
Also, we can use the standard markdown syntax:
Set the asset folder to true:
1
post_asset_folder: true
Use a npm package to link the asset folder (π reference link):
1
npm i -s hexo-asset-link
Inside the .md file:
1
![Alt Text](post-name/xxx.JPG)
Basic Functions
If Statement
Example:
1
2
3
4
5<% if(page.author == "Mike") { %>
Mike is the author
<% } else { %>
Mike is not the author
<% } %>For Loop
Example: show titles of all posts
1
2
3
4<% site.posts.forEach(function(post){ %>
<%- post.title %>
<br>
<% }) %>
Themes
Example theme: NexT
Go to the
/theme/
folder and clone the theme file:1
git clone https://github.com/next-theme/hexo-theme-next themes/next
Go to the
config.yml
file and change the theme name:1
theme: next
Customize NexT Theme
Reference: π NexT Custom Files
Set up the NexT theme, and then create a custom stylesheet file
/source/_data/styles.styl
.Inside the
/next/config.yml
file, change the custom_file_path part (uncomment the path that we want):1
2
3
4
5custom_file_path:
...
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.stylCustomize style settings in the
styles.styl
file and restart the blog page. In this way, we can customize the style of the blog while unchanging the original theme file.
Tips: we can first use the inspect
tool to preview the style of the page in browser, and then change the css elements accordingly in the styles.styl
file.