使用hexo搭建个人博客

发表于 分类于 / Changyan：

介绍

利用 Hexo 在 GitHub 上搭建个人博客。

准备工作

你的电脑需要安装下面两个应用程序：

或者直接查看 hexo 的官方文档查看安装教程。

安装 Hexo

安装文档

终端全局安装：

1
npm install -g hexo-cli

建站

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

1
2
3
hexo init 你的站点文件夹
cd 你的站点文件夹
npm install

命令执行

下方是三个常见命令，可以先执行前俩看看效果，最后一个部署命令待会再执行。

  • hexo server -p 5000 本地启动服务器，5000 端口
  • hexo new '你想要创建的文章名称' 创建文章
  • hexo clean && hexo deploy 部署网站

使用第三方主题

安装 Next 主题

1
2
cd 你的站点目录
git clone https://github.com/next-theme/hexo-theme-next themes/next

配置

创建分类和标签

分类

运行：

1
hexo new page "categories"

p.s. 命名为 categories 原因是 categories 在 next 主题中是一个关键词对应着分类。

在主站根目录下,也就是你 hexo 的目录下找到 /source/categories/index.md，打开后的效果类似下方代码：

1
2
3
4
5
6
---
title: categories #本页标题
date: 2018-03-13 23:02:50 #创建日期
type: 'categories' #分类属于
comments: false #如果有启用多说 或者 Disqus评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false
---

接着在 themes 主题文件夹下找到 next 文件夹，修改 _config.yml 文件：

1
2
3
4
5
6
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

然后在命令行输入添加文章命令：

1
hexo new '你想要创建的文章名称'

根目录(主站目录下)/source/_posts/<刚创建的文章名称>.md，双击打开：

1
2
3
4
5
6
---
title: 文章标题
date: 2018-03-13 23:13:23
tags: html #属于哪个标签
categories: interview #属于哪个分类
---

标签

打开命令行，进入博客所在文件夹。执行命令：

1
hexo new page tags

成功后会有一个路径提示

1
INFO Created: ~/Documents/blog/source/tags/index.md

找到对应的文件打开

1
2
3
4
---
title: tags
date: 2018-03-14 00:02:05
---

添加 type: “tags”到内容中，添加后是这样的：

1
2
3
4
5
6
---
title: 标签
date: 2018-03-14 00:03:52
type: 'tags'
comments: false
---

打开你的文章页面：

1
2
3
4
5
6
7
8
9
---
title: jQuery对表单的操作及更多应用
date: 2019-03-14 00:03:55
categories: 前端
tags: jQuery  #如果想要多个标签可以 tags: [jQuery, 表格, 表单验证] or
- jQuery
- 表格
- 表单验证
---

p.s. 如果想要实现父子分类，也和标签一样的格式：

1
2
3
categories:
- IDE
- VSCode

参考：分类和标签

修改文章底部 # 号标签，改为图标

寻找 themes/next/_config.yml 中的 tag_icon ，改为 true

头像设置

把头像放在站点根目录的 source/uploads/ 下，然后在 theme/next/_config.yml 下修改配置：

1
2
avatar:
  url: /uploads/avatar.png

侧边栏

菜单

在 theme/next/_config.yml 下配置：

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

社交

1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/yourname || fab fa-weibo
  Google: https://plus.google.com/yourname || fab fa-google
  Twitter: https://twitter.com/yourname || fab fa-twitter
  FB Page: https://www.facebook.com/yourname || fab fa-facebook
  StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  YouTube: https://youtube.com/yourname || fab fa-youtube
  Instagram: https://instagram.com/yourname || fab fa-instagram
  Skype: skype:yourname?call|chat || fab fa-skype

阅读更多

在文章想要截断的地方添加 <!-- more --> ，这样在文章列表中就会只展示到截断位置为止。

第三方插件

部署到 GitHub：hexo-deployer-git

如何部署

在 _config.yml 下配置：

1
2
3
4
deploy:
  type: git
  repo: 'https://github.com/evestorm/evestorm.github.io'
  branch: 'gh-pages'

然后在你的 githubpages 的 repo 下新建 gh-pages 分支，最后执行：hexo clean && hexo deploy 即可部署。

本地热更新：hexo-server

关键词搜索：LocalSearch

配置博客

安装完成，编辑博客配置文件：hexo/_config.yml

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

配置主题

Next 主题自带搜索设置，编辑主题配置文件：_config.yml

找到文件中 Local search 的相关配置，设为 true

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Dependencies: https://github.com/next-theme/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

最后记得 hexo 重新部署。

统计分析：busuanzi_count

NexT 主题集成了不蒜子（busuanzi_count）统计功能，在 NexT 配置文件中找到关键词 busuanzi_count: ，把 enable 设置为 true

p.s. 除此之外，如果设置为 true 后仍然无效，且打开控制台显示 js 报错。有可能是不蒜子链接失效的原因，需要在 Next 主题配置文件位置：

1
themes\next\layout\_third-party\analytics\busuanzi-counter.swig

修改 script 链接为：

1
2
3
4
<script
  async
  src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
></script>

评论功能：ChangYan

文档地址：https://theme-next.js.org/docs/third-party-services/comments.html#Changyan-China

  • 注册登录：https://changyan.kuaizhan.com/

  • 获取 APP ID 和 APP KEY

  • 设置 changyan enable: true:

    1
    2
    3
    4
    5
    # changyan
    changyan:
      enable: true
      appid:
      appkey:

代码块复制

下载clipboard.min.js并保存至themes\next\source\js\clipboard.min.js

在 .\themes\next\source\js\ 下创建 clipboard-use.js , 添加如下内容：

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
/*页面载入完成后，创建复制按钮*/
document.addEventListener('DOMContentLoaded', () => {
  'use strict';
  var initCopyCode = function () {
    let parents = document.querySelectorAll('.highlight .code');
    parents.forEach(parent => {
      let btn = document.createElement('button');
      let i = document.createElement('i');
      let span = document.createElement('span');
      btn.classList.add('btn-copy');
      btn.setAttribute('data-clipboard-snippet', '');
      i.classList.add('fa', 'fa-clipboard');
      span.innerText = '复制';
      i.appendChild(span);
      btn.appendChild(i);
      parent.insertBefore(btn, parent.firstChild);
    });

    new ClipboardJS('.btn-copy', {
      target: function (trigger) {
        return trigger.nextElementSibling;
      }
    });
  };
  initCopyCode();
});

在 根目录\source\_data\ 下创建 styles.styl ，添加如下内容：

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
// 代码块复制按钮
// --------------------------------------------------
.highlight {
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
  display: inline-block;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: #333;
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  padding: 2px 6px;
  position: absolute;
  right: 5px;
  top: 5px;
  opacity: 0;
}
.btn-copy span {
  margin-left: 5px;
}
.highlight:hover .btn-copy {
  opacity: 1;
}

在 source\_data\ 下创建 body-end.swig ，添加如下内容：

1
2
3
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/clipboard.min.js"></script>
<script type="text/javascript" src="/js/clipboard-use.js"></script>

在 next 配置文件中启用 styles.styl 和 body-end.swig：

1
2
3
custom_file_path:
  bodyEnd: source/_data/body-end.swig
  style: source/_data/styles.styl

常用配置

Hexo 瞎折腾系列(4) - 站点首页不显示文章全文

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// npm全局安装Hexo
npm install -g hexo-cli

// 新建Hexo项目
hexo init <folder>
cd <folder>
npm install

// 新建文章
hexo new '文章名'

// 启动服务器
hexo server -p 5000

// 生成静态文件
hexo generate --watch

// 部署
hexo clean && hexo deploy

相关配置及资源