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

  1. Check node.js installation:

    1
    $ node -v
  2. Check git installation:

    1
    $ git version
  3. 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

  1. Initiate a hexo project (after you choose a proper file location):

    1
    $ hexo init my_blog
  2. 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
    2
    hexo new draft draft_post
    hexo publish draft_post
  • Create pages:

    1
    hexo new page new_page
  • Front Matter

    Front matter is the meta-data in front of each posts, which is written in either yml or json. 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
    4
    categories:
    - [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/.

  1. In the config.yml file, set the asset folder to true:

    1
    post_asset_folder: true
  2. Inside the .md file:

    1
    {% asset_img xxx.JPG %}

Also, we can use the standard markdown syntax:

  1. Set the asset folder to true:

    1
    post_asset_folder: true
  2. Use a npm package to link the asset folder (πŸ”— reference link):

    1
    npm i -s hexo-asset-link
  3. 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

  1. Go to the /theme/ folder and clone the theme file:

    1
    git clone https://github.com/next-theme/hexo-theme-next themes/next
  2. Go to the config.yml file and change the theme name:

    1
    theme: next

Customize NexT Theme

Reference: πŸ”— NexT Custom Files

  1. Set up the NexT theme, and then create a custom stylesheet file /source/_data/styles.styl.

  2. Inside the /next/config.yml file, change the custom_file_path part (uncomment the path that we want):

    1
    2
    3
    4
    5
    custom_file_path:
    ...
    #variable: source/_data/variables.styl
    #mixin: source/_data/mixins.styl
    style: source/_data/styles.styl
  3. Customize 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.