关于这篇博客

这篇博客更像是一个使用 Hexo 基本功能的小小总结（类似于一篇 Cheatsheet），更官方的文档和教程可以参考：

🔗 Hexo 官方文档

🔗 Hexo 教程

写在前面

作为一个设计师兼半个程序员，拥有一个个人博客一直是我的梦想。在我搭建个人博客的道路上，我尝试过使用经典博客平台 Wordpress，在申请研究生的时候试过自己写前端代码搭建静态的作品集网页，甚至自己捣鼓过用 Django 加 Markdown 渲染页面的方式搭建个人博客。几番权衡过后我决定用 Hexo 来搭建我的博客。

Hexo 是一个快速，简单的博客框架，使用我最爱的 Markdown 编写文章，它提供各式各样的风格主题（Theme），当然，要修改或者自定义主题也非常简单。在写作这篇博客的时候我用的就是 Hexo 里面的 NexT 主题，然后按照自己的喜好和需要进行了一些改变。

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

🔗 Hexo 部署

目录

安装

  1. 检查 node.js 的安装：

    1
    $ node -v

  2. 检查 git 的安装：

    1
    $ git version

  3. 安装 Hexo：

    1
    $ npm install -g hexo-cli

    MacOS 在安装时可能会遇到一些权限的问题，解决方案：

    1
    2
    $ sudo chown -R `whoami` /usr/local/lib/node_modules
    $ npm install -g hexo-cli

运行

  1. 创建一个 hexo project：

    1
    $ hexo init my_blog

  2. 进入 project 所在的文件 (my_blog), 然后在本地运行 Hexo：

    1
    $ hexo server

写作

  • 创建「文章」：

    1
    hexo new post first_post

  • 创建 & 发布「草稿」：

    1
    2
    hexo new draft draft_post
    hexo publish draft_post

  • 创建「页面」：

    1
    hexo new page new_page

  • Front Matter

    Front Matter 是文件最上方以 --- 分隔的区域，用 yml 或 json 编写，用于指定这个文件的参数，举个例子：

    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）

    在新建文章时，Hexo 会以 scaffolds 文件夹内相对应文件作为模版来创建新的文章。

标签 & 分类

  • 标签（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）用于存储静态数据（例如图像和视频），Hexo 创建与帖子名称相同的静态文件夹。例如，FirstPost.md 的静态文件夹是 /FirstPost/。

  1. 在 config.yml 文件中, 开启静态文件夹：

    1
    post_asset_folder: true

  2. 在博客文章（.md）文件里引用静态文件夹中的元素：

    1
    {% asset_img xxx.JPG %}

另外，我们也可以用 markdown 的引用方法：

  1. 开启静态文件夹：

    1
    post_asset_folder: true

  2. 使用一个 npm 连接静态文件夹 (🔗 参考链接)：

    1
    npm i -s hexo-asset-link

  3. 在博客文章（.md）文件里引用：

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

实用语句

  • If 语句

    举例：

    1
    2
    3
    4
    5
    <% if(page.author == "Mike") { %>
      Mike is the author
    <% } else { %>
      Mike is not the author
    <% } %>

  • For 循环

    举例：展示所有文章的标题

    1
    2
    3
    4
    <% site.posts.forEach(function(post){ %>
      <%- post.title %>
      <br>
    <% }) %>

风格主题

示例主题： NexT

  1. 在 /theme/ 文件夹下 clone 主题文件：

    1
    git clone https://github.com/next-theme/hexo-theme-next themes/next

  2. 在 config.yml 文件里指定使用的主题：

    1
    theme: next

自定义 NexT 风格

参考文件：🔗 NexT Custom Files

  1. 设置好 NexT 主题后, 在以下地址创建一个自定义 stylesheet 文件 /source/_data/styles.styl。

  2. 在 /next/config.yml 文件中, 增加 custom_file_path 的路径：

    1
    2
    3
    4
    5
    custom_file_path:
      ...
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      style: source/_data/styles.styl

  3. 在 styles.styl 文件中自定义样式代码并重新启动博客页面。这样我们就可以在不改变原有主题文件的情况下自定义博客的风格。

提示：可以先使用 检查 工具在浏览器中预览页面的样式，然后在 styles.styl 文件中更改相应的css元素。