浅谈如何搭建Hexo博客

前言

由于老博客年久失修且文件杂乱不易于维护，笔者意将老博客存档并部署了新博客，开一个文章与大家分享部署过程。

本文所提供的教程至少在当下完全免费。

综述

笔者使用的博客系统是 Hexo，主题为 Fluid，Netlify 与 Cloudflare 作为部署网站，Decap CMS 作为后台。

本篇将会带你建设一个与上述配置相近的博客。

正式搭建

本地搭建框架

安装 node.js，通过 npm install -g hexo-cli 安装 hexo 基础包。

准备一个空文件夹存储博客源码，在文件夹下运行 hexo init 以初始化博客。

准备完成后，可以使用 hexo s 来浏览。

文章

到这里，基本的博客就搭建好了，你可以使用 hexo new post 文章名 新建一篇文章。

文章的结构大致应是这样的：

1
2
3
4
5
---
title: xxx
......
---
正文

其中，开头由 --- 包裹起来的区域称之为 front-matter，存储了该篇文章的基本信息，具体将会在后面讲到。正文支持 Markdown。

若要引用静态资源如图片等，笔者建议在 source 文件夹下新增 images 文件夹存放所有的静态资源，文件夹名无需一样。在文章内可使用 ![](/images/xxx.png) 或类似的方法引用图片，这为后面后台的部署打下了基础。

同样，可以在 front-matter 字段内指定文章的 tags 和 categories。

关于界面

hexo 可能不会自动创建关于界面，使用 hexo new page about 创建。接着，在 /source/about/index.md 的 front-matter 内添加 layout 标识，让 hexo 知道这是关于页。你也可以编辑正文，为关于页添加内容。

1
2
3
4
5
6
---
title: about
......
layout: about
---
正文

安装主题

若你觉得默认主题不够好看，可以安装自定义主题。

笔者对其他主题不是很了解，所以仅会阐述本博客使用的 Fluid 主题的安装与配置，社区上还有许多优秀的主题，如 NexT，A4 等等，有需要可自行上网搜索。

Fluid

下载 最新 Release 版本 并解压至 themes 目录，并将解压出的文件夹重命名为 fluid。在 _config.yml 中设置 theme: fluid，启用主题。

配置

公共配置

公共配置文件是根目录下的 _config.yml。

1
2
3
4
5
6
7
8
# Site
title: Gavinの个人博客
subtitle: 'Gavinの个人博客'
description: '* 一个树洞 *'
keywords:
author: Gavin
language: zh-CN
timezone: Asia/Shanghai

这部分是基本信息。

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://gib716-blog.netlify.app/
permalink: :year/:name/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

这部分也没有特别要说的，笔者建议将 permalink 一项改成上示那样，该选项控制了单篇文章的 url 格式，仅保留年份可以更加简洁。更改这项后，需将 source/_posts 中的文章目录手动重构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Writing
new_post_name: :year/:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

没有特别说的，就是 new_post_name 一项尽量与上述 permalink 的格式同步。

主题配置

主题配置文件一般存在于 themes/主题名/_config.yml 文件内。

本文仅会讲解 Fluid 主题的配置。

Fluid
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
51
52
# 网页访问统计
# Analysis of website visitors
web_analytics:  # 网页访问统计
  enable: false

  # 遵循访客浏览器"请勿追踪"的设置，如果开启则不统计其访问
  # Follow the "Do Not Track" setting of the visitor's browser
  # See: https://www.w3.org/TR/tracking-dnt/
  follow_dnt: true

  # 百度统计的 Key，值需要获取下方链接中 `hm.js?` 后边的字符串
  # Baidu analytics, get the string behind `hm.js?`
  # See: https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376
  baidu:

  # Google Analytics 4 的媒体资源 ID
  # Google Analytics 4 MEASUREMENT_ID
  # See: https://support.google.com/analytics/answer/9744165#zippy=%2Cin-this-article
  google:
    measurement_id:

  # 腾讯统计的 H5 App ID，开启高级功能才有cid
  # Tencent analytics, set APP ID
  # See: https://mta.qq.com/h5/manage/ctr_app_manage
  tencent:
    sid:
    cid:

  # 51.la 站点统计 ID
  # 51.la analytics
  # See: https://www.51.la/user/site/index
  woyaola:  # 51.la 站点统计 ID，参见

  # 友盟/cnzz 站点统计 web_id
  # cnzz analytics
  # See: https://web.umeng.com/main.php?c=site&a=show
  cnzz:

  # LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
  # LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
  leancloud:
    app_id:
    app_key:
    # REST API 服务器地址，国际版不填
    # Only the Chinese mainland users need to set
    server_url:
    # 统计页面时获取路径的属性
    # Get the attribute of the page path during statistics
    path: window.location.pathname
    # 开启后不统计本地路径( localhost 与 127.0.0.1 )
    # If true, ignore localhost & 127.0.0.1
    ignore_local: false

访问统计服务，如果有可自行开启。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 对页面中的图片和评论插件进行懒加载处理，可见范围外的元素不会提前加载
# Lazy loading of images and comment plugin on the page
lazyload:
  enable: true

  # 加载时的占位图片
  # The placeholder image when loading
  loading_img: /img/loading.gif

  # 开启后懒加载仅在文章页生效，如果自定义页面需要使用，可以在 Front-matter 里指定 `lazyload: true`
  # If true, only enable lazyload on the post page. For custom pages, you can set 'lazyload: true' in front-matter
  onlypost: false

  # 触发加载的偏移倍数，基数是视窗高度，可根据部署环境的请求速度调节
  # The factor of viewport height that triggers loading
  offset_factor: 2

懒加载，可提高加载速度，强烈建议启动。

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
#---------------------------
# 页脚
# Footer
#---------------------------
footer:
  # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
  # HTML of the first line of the footer, it is recommended to keep the Fluid link to promote this theme to more people
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
  '

  # 展示网站的 PV、UV 统计数
  # Display website PV and UV statistics
  statistics:
    enable: false

    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
    # Options: busuanzi | leancloud
    source: "busuanzi"

  # 国内大陆服务器的备案信息
  # For Chinese mainland website policy, other areas keep disable
  beian:
    enable: false
    # ICP证号
    icp_text: 京ICP证123456号
    # 公安备案号，不填则只显示ICP
    police_text: 京公网安备12345678号
    # 公安备案的编号，用于URL跳转查询
    police_code: 12345678
    # 公安备案的图片. 为空时不显示备案图片
    police_icon: /img/police_beian.png

页脚内容，可自行修改。

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
#---------------------------
# 评论插件
# Comment plugins
#
# 开启评论需要先设置上方 `post: comments: enable: true`，然后根据 `type` 设置下方对应的评论插件参数
# Enable comments need to be set `post: comments: enable: true`, then set the corresponding comment plugin parameters below according to `type`
#---------------------------

# Utterances
# 基于 GitHub Issues
# Based on GitHub Issues
# See: https://utteranc.es
utterances:
  repo:
  issue_term: pathname
  label: utterances
  theme: github-light
  theme_dark: github-dark

# Disqus
# 基于第三方的服务，国内用户直接使用容易被墙，建议配合 Disqusjs
# Based on third-party service
# See: https://disqus.com
disqus:
  shortname:
  # 以下为 Disqusjs 支持, 国内用户如果想使用 Disqus 建议配合使用
  # The following are Disqusjs configurations, please ignore if DisqusJS is not required
  # See: https://github.com/SukkaW/DisqusJS
  disqusjs: false
  apikey:

more...

评论系统，可自行配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  avatar: /img/avatar.png
  name: "Gavin"
  intro: ""
  # 更多图标可从 https://hexo.fluid-dev.com/docs/icon/ 查找，`class` 代表图标的 css class，添加 `qrcode` 后，图标不再是链接而是悬浮二维码
  # More icons can be found from https://hexo.fluid-dev.com/docs/en/icon/  `class` is the css class of the icon. If adding `qrcode`, The icon is no longer a link, but a hovering QR code
  icons:
    - { class: "iconfont icon-github-fill", link: "https://github.com/gi-b716", tip: "GitHub" }

关于页的自定义内容。

其他可自行设置，不做过多阐述。

拓展功能

一些有趣的小功能。

音乐

使用 npm install hexo-tag-aplayer --save 安装相关插件。

在全局设置中添加配置。

1
2
aplayer:
  meting: true

由于篇幅原因，使用方法不过多介绍，可查看相关教程。

博客加密

使用 npm install hexo-blog-encrypt --save 安装相关插件。

在全局设置中添加配置。

1
2
3
4
5
6
7
8
9
# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了，请输入密码查看。
  message: 您好，这里需要密码。
  tags:
  - {name: Private, password: ???}
  wrong_pass_message: 抱歉，这个密码看着不太对，请再试试。
  wrong_hash_message: 抱歉，这个文章不能被校验，不过您还是能看看解密后的内容。
  theme: surge

tags 内可以快速为特定标签下的所有博客设置密码，theme 可自由选择。

具体可以看这篇文章。

部署

目前本博客采用的模式是，在 Github 上保存博客的源代码，Netlify 和 Cloudflare 会在检测到 Github 更新后自动拉取代码部署。

上传到 Github

请确保你熟悉 git 的基本操作且熟悉 Github 的基本操作，本文不再赘述。

将博客源代码全部上传到一个新的仓库，仓库名任意。

Netlify 端部署

这是必须的，博客的后台必须依赖 Netlify 身份验证系统。

准备一个 Netlify 账号，在 Netlify 中 Add new site 选择 Import an existing project，在里面选择 Github，然后点选存储源代码的仓库。Site name 中可以选择一个好听的名字，Build command 改成 npm install && npm run build，确保 Publish directory 为 public。确认后，就完成了一切设置。

剩下请自行探索。

Cloudflare 端部署

Cloudflare 一般访问更快，但无法使用后台

由于 Cloudflare 仪表板 上不去，咕了。大概就是用 Cloudflare pages，操作跟 Netlify 差不多。

私有仓库

若你使用了密码插件，可以将 Github 上的源代码仓库私有以确保密码不会泄露。

更改为私有后，Netlify 端可能需要一些变化。在 Site configuration 中 Build & deploy 找到 Deploy key，点击生成。在 Github 的仓库中点击 Settings，Deploy keys，Add deploy key。在 Key 一栏粘贴刚生成的密钥，取一个好听的标题，Allow write access 就不用勾选了。

后台

咕咕咕

科技
浅谈如何搭建Hexo博客
https://gib716-blog.netlify.app/2024/浅谈如何搭建Hexo博客/
作者
Gavin
发布于
2024年12月15日
许可协议