用Hexo搭建个人博客

发表于 更新于 分类于 阅读次数：

安装环境

1. 安装Homebrew

Mac建议使用 Homebrew 安装必要的插件，Windows用户可以跳过这一步。关于 Homebrew 的介绍请看我的这篇博文 Mac开发必备工具（一）—— Homebrew。

2. 安装Git和Node.js

Node.js 可以通过 Homebrew 安装，安装命令如下：

1
brew install node

3. 安装 Hexo 博客框架

Hexo 框架可以使用下面的 npm 命令来安装。

1
npm install -g hexo-cli

使用Hexo建站

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <folder>
cd <folder>
npm install

建站步骤可参考Hexo官方文档

接着执行如下命令：

1
2
hexo generate
hexo server

命令执行完毕后，在浏览器输入localhost:4000就可以预览本地博客效果。

将Hexo部署到GitHub

在 GitHub 上新建一个仓库，然后修改 Hexo 的配置文件_config.yml中的 Deployment 配置项，修改内容如下：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: master

注意： 上面的的 repository 项要换成自己新建完成的 GitHub 仓库地址，也就是把上面的xxx换成你 GitHub 的用户名。

配置完后，接着执行如下命令：

1
2
3
hexo clean
hexo generate
hexo deploy

这样就将博客部署到GitHub上了。可以在浏览器中输入https://xxx.github.io查看博客效果。我的博客效果可以点这里查看。

如果部署报错ERROR Deployer not found: git 或者 ERROR Deployer not found: github，就先执行npm install hexo-deployer-git --save安装部署插件后再运行hexo deploy命令

开始写作

你可以执行下列命令来创建一篇新文章:

1
hexo new <title>

命令执行完后，会在 Hexo 项目的\source\_posts目录下生成一个对应名称的.md文件。用编辑器打开就可以开始写文章了，注意文章得使用 Markdown 编写。文章写完后执行上面的清理、生成和部署命令将文章发布到GitHub仓库。
当让也可以不使用上面的生成命令，直接将事先编辑好的.md 文件复制到对应的目录，也是可以的。只不过用命令生成的.md文件会带一个Front-matter，内容如下：

1
2
3
4
5
---
title: 文章标题
date: 创建时间
tags: 文章标签
---

所以，事先编辑好的.md文件里也应该包含相应的Front-matter。

Hexo CI/CD

为了博客的安全，以及版本控制，可以在 GitHub 上建立一个私有仓库用来存储 Hexo 博客源码。GitHub 支持使用 Action 来进行 CI/CD，可以给 Hexo 源码仓库添加一个 GitHub Action 来实现全自动化部署。这样每次写完文章，只需要提交到仓库就行了，不用手动敲命令部署了。

Hexo Action

使用 Hexo Action 来给仓库添加 GitHub Action。具体步骤可以参考说明文档中的使用说明。Hexo Action 主要步骤如下：

生成 SSH-Key

如果 Hexo 博客源码的仓库使用的 SSH-Key 的公钥已经添加到 GitHub 账号中了，那么 GitHub Pages 仓库就不需要再添加 Deploy Keys, 只需要把私钥添加到 Hexo 博客源码仓库中的 Settings > Secrets 中，并命名为 DEPLOY_KEY。如果还没有 SSH-Key，则需要使用 ssh-keygen -t rsa -C "username@example.com" 命令生成 SSH-key，更多 SSH-Key 的内容可以参考Git快速入门。

创建 GitHub 工作流

在 Hexo 博客源码仓库中，创建一个文件夹 .github/workflows，并在该文件夹下创建一个 hexo_CI.yml (.yml 文件的名称可以自己取)。最后 .yml 内容如下：

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
name: Deploy

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    name: A job to deploy blog.
    steps:
    - name: Checkout
      uses: actions/checkout@v1
      with:
        submodules: true # Checkout private submodules(themes or something else).
    
    # Caching dependencies to speed up workflows. (GitHub will remove any cache entries that have not been accessed in over 7 days.)
    - name: Cache node modules
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    - name: Install Dependencies
      if: steps.cache.outputs.cache-hit != 'true'
      run: npm ci
    
    # Deploy hexo blog website.
    - name: Deploy
      id: deploy
      uses: sma11black/hexo-action@v1.0.2
      with:
        deploy_key: ${{ secrets.DEPLOY_KEY }}
        user_name: DavidSheh  # (or delete this input setting to use bot account)
        user_email: davidsheh1015@gmail.com  # (or delete this input setting to use bot account)
        commit_msg: ${{ github.event.head_commit.message }}  # (or delete this input setting to use hexo default settings)
    # Use the output from the `deploy` step(use for test action)
    - name: Get the output
      run: |
        echo "${{ steps.deploy.outputs.notify }}"

其中 user_name 和 user_email 两个条目可以直接删除，也可以填写自己的信息。

更换博客主题

更换默认主题

可以去官网主题页选择喜欢的主题，下载主题包。然后将主题文件夹放到 Hexo 项目的 themes 文件夹下。但是为了更好的进行主题的同步和更新，建议使用 submodule 的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Add submodule
$ git submodule add https://github.com/theme-next/hexo-theme-next themes/next

# Get tags list
$ cd themes/next
$ git tag -l
…
v6.0.0
v6.0.1
v6.0.2
...

# Switch on v6.0.1 tagged release version
$ git checkout tags/v6.0.1
Note: checking out 'tags/v6.0.1'.
…
HEAD is now at da9cdd2... Release v6.0.1

# If you want to switch on latest release version without defining tag (optional)
$ git checkout $(git describe --tags $(git rev-list --tags --max-count=1))

主题更新和同步

主题的更新和同步推荐使用 Hexo-Way 的方式，先在 Hexo 根目录下新建一个 _config.next.yml 的文件（其中的 next 要跟主题的文件夹名保持一致）。然后将需要改动的配置都配置在该文件夹中，只需要将主题的 _config.yml 文件中需要改动的部分拷贝一份然后在 _config.next.yml 文件中改动就行。具体步骤请参考官网的配置说明 中的关于“独立的 _config.[theme].yml 文件”的说明。

NexT 主题设置

首先，修改 Hexo 站点配置文件 _config.yml 中的 Extensions 配置项，修改内容如下：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

博主使用的是 NexT主题，所以 theme 项配置的是next，这里配置的字段一定要和 themes 文件夹下主题包的文件夹名称相同。下文关于主题的配置均是针对于 NexT 主题，主题的具体使用说明可以参考 NexT 官方网站。

然后，NexT 主题的设置在官网的开始使用中说的很详细，我这里就不画蛇添足了，不清楚的可以直接看官网。

关于 NexT 主题的文档是我见过的所有 Hexo 主题中最完善的，你所能想到大部分配置都集成到主题了，基本实现了傻瓜式配置。

第三方插件

  1. 本站搜索插件。使用 npm install hexo-generator-searchdb 安装插件，并在 _config.next.yml 中添加如下设置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

  2. 自动摘录插件。在主页显示文章概要，需要手动添加 <!--more--> 标签，使用 hexo-auto-excerpt 插件可以实现自动化摘录。安装命令为：npm install --save hexo-auto-excerpt。

  3. 分享插件。hexo-next-share，安装命令：npm install theme-next/hexo-next-share，并在 _config.next.yml 中添加如下设置：

    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    # Share
    # Likely Share
    # See: https://ilyabirman.net/projects/likely/, https://github.com/ilyabirman/Likely
    # Likely supports four looks, nine social networks, any button text.
    # You are free to modify the text value and order of any network.
    likely:
      enable: true
      cdn:
        js: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.min.js
        css: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.min.css
      look: normal # available values: normal, light, small, big
      networks:
        twitter: Tweet
        facebook: Share
        linkedin: Link
        #gplus: Plus
        vkontakte: Share
        odnoklassniki: Class
        telegram: Send
        whatsapp: Send
        pinterest: Pin

    # NeedMoreShare2
    # Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
    # For more information: https://github.com/revir/need-more-share2
    # iconStyle: default | box
    # boxForm: horizontal | vertical
    # position: top / middle / bottom + Left / Center / Right
    # networks:
    # Weibo | Wechat | Douban | QQZone | Twitter | Facebook | Linkedin | Mailto | Reddit | Delicious | StumbleUpon | Pinterest
    # GooglePlus | Tumblr | GoogleBookmarks | Newsvine | Evernote | Friendfeed | Vkontakte | Odnoklassniki | Mailru
    needmoreshare:
      enable: true
      cdn:
        js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
        css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css
      postbottom:
        enable: false
        options:
          iconStyle: default
          boxForm: horizontal
          position: bottomCenter
          networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Reddit
      float:
        enable: true
        options:
          iconStyle: box
          boxForm: vertical
          position: middleRight
          networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

  4. 生成站点地图。hexo-generator-sitemap，安装命令：npm install hexo-generator-sitemap --save。并在 _config.next.yml 中添加如下设置：

    1
    2
    3
    4
    5
    6
    sitemap:
      path: sitemap.xml
      template: ./sitemap_template.xml
      rel: false
      tags: true
      categories: true

  5. 提交 URL 到搜索引擎。hexo-submit-urls-to-search-engine，安装命令：npm install --save hexo-submit-urls-to-search-engine。

  6. hexo-neat，安装命令：npm install hexo-neat --save，并在 _config.next.yml 中添加如下设置：

    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
    # 文件压缩，设置一些需要跳过的文件 
    # hexo-neat
    neat_enable: true
    # 压缩 html
    neat_html:
      enable: true
      # 一些百度、Google 的验证文件需要排除掉
      exclude:
        - '**/baidu*.html'
        - '**/google*.html'
    # 压缩 css
    neat_css:
      enable: true
      exclude:
        - '**/*.min.css'
    # 压缩 js
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '**/*.min.js'
        - '**/jquery.fancybox.pack.js'
        - '**/index.js'

  7. Hexo跨博客文章推荐插件，安装命令：npm install hexo-recommended-posts --save。

  8. Hexo 给文章中英文添加空格