Hexo Basics | Hexo 基础总结

About This Blog | 关于这篇博客

This blog is a simple cheatsheet for Hexo, the official documents and tutorials are:
这篇博客更像是一个使用 Hexo 基本功能的小小总结(类似于一篇 Cheatsheet),更官方的文档和教程可以参考:

Hexo Docs | Hexo 官方文档
Hexo Tutorial | Hexo 教程

写在前面

作为一个设计师兼半个程序员,拥有一个个人博客一直是我的梦想。在我搭建个人博客的道路上,我尝试过使用经典博客平台 Wordpress,在申请研究生的时候试过自己写前端代码搭建静态的作品集网页,甚至自己捣鼓过用 Django 加 Markdown 渲染页面的方式搭建个人博客。几番权衡过后我决定用 Hexo 来搭建我的博客。Hexo 是一个快速,简单的博客框架,使用我最爱的 Markdown 编写文章,它提供各式各样的风格主题(Theme),当然,要修改或者自定义主题也非常简单。在写作这篇博客的时候我用的就是 Hexo 里面的 NexT 主题,然后按照自己的喜好和需要进行了一些改变。

新增 Hexo 部署过程介绍,可参考站内博客:

Hexo Deployment | Hexo 部署过程

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 zyq_blog
  2. Go into the project file (zyq_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 (note, the new page can only be access through the url: http://localhost:4000/new-page/)

    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

    1
    tag: [tag1, tag2, tag3]
  • Categories

    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 here ):

    1
    npm i -s hexo-asset-link
  3. Inside the .md file:

    1
    ![Alt Text](post-name/xxx.JPG)

Basic Functions | 实用语句

  • If Statement

    Example: show content based on the author

    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 | 自定义NexT风格

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.