搭建 Hexo 为框架的博客时的一些心得

  1. 新建 Github Page 仓库及配置 git
    1. 配置 git
  2. 安装 Hexo
  3. 部署 Github Page
  4. 安装主题
  5. 写新文章
  6. 发布文章
  7. 在文章的开始添加目录

本篇文章不会详细讲解搭建 Hexo 为框架的博客的完整教程，望读者寻找其他教程。

[toc]

新建 Github Page 仓库及配置 git

配置 git

1
ssh-keygen -t rsa -b 4096 -C "[email protected]"

之后在 SSH and GPG keys (github.com) 新增 SSH key。

安装 Hexo

1
2
3
4
cd 到建立 Hexo 的根目录
npm install -g hexo-cli
hexo init # 初始化
npm install
1
2
hexo g or hexo generate # 生成页面
hexo s or hexo server # 本地预览

此时访问 http://localhost:4000 应该能看到 Hexo 的默认欢迎页面

部署 Github Page

1
npm install hexo-deployer-git --save

修改 _config.yml 文件末尾的 Deployment 部分。

1
2
3
4
deploy:
  type: git
  repository: [email protected]:用户名/用户名.github.io.git
  branch: main
1
hexo d or hexo deploy # 远程部署

安装主题

以 cactus 为例（probberechts/hexo-theme-cactus）。

1
2
cd 到建立 Hexo 的根目录
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

找到 Hexo 根目录下的 _config.yml，修改 theme 配置

1
2
# theme: landscape
theme: cactus

修改 cactus 配置文件：cactus 配置文件为 themes\cactus\_config.yml。

注意：此时的优先级为themes\cactus\_config.yml > _canfig.yml。

写新文章

1
hexo new "Title"

发布文章

1
2
3
hexo clean
hexo g
hexo d

在文章的开始添加目录

themes/cactus/layout/post.ejs 替换成以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <%- partial('_partial/post/title', { post: page, index: false, class_name: 'posttitle' }) %>
    <div class="meta">
      <span class="author p-author h-card" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span class="p-name" itemprop="name"><% if (page.author) { %><%- page.author %><% } else { %><%- config.author %><% } %></span>
      </span>
      <%- partial('_partial/post/date', { post: page, class_name: 'postdate' }) %>
      <%- partial('_partial/post/category') %>
      <%- partial('_partial/post/tag') %>
    </div>
  </header>
  <%- partial('_partial/post/gallery') %>
  <div class="content e-content" itemprop="articleBody">
    <%- toc(page.content, {
        class: 'post-toc',
        list_number: false
    }) %>
    <%- page.content %>
  </div>
</article>
<%- partial('_partial/comments') %>

在文章的开头部分前添加辅助函数 toc

1
2
3
4
<%- toc(page.content, {
    class: 'post-toc',
    list_number: true
}) %>