Hexo 搭建个人博客

Hexo 是什么？

Hexo 是一个快速、简洁且高效的博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在其他平台上，是搭建博客的首选框架。除了在 Github Pages 部署以外，现在你有了一个新的选择，那就是使用云开发静态网站功能来部署啦！

准备工作

安装 Node.js npm yarn

对于 Windows，安装 Node.js 会一起安装 npm，yarn 可以通过 npm 安装也可以直接下载 yarn 的安装程序，安装过程如下：

安装 Node.js，建议 LTS 版，🔗 官方下载

安装 Git，🔗 官方下载

下载后直接一路 Next 安装即可

安装 yarn，🔗 官方下载

安装 Hexo

全局安装 Hexo

打开系统 Windows PowerShell / 命令提示符，全局安装 Hexo

yarn global add hexo-cli

现在我们的 Hexo 已经在本地计算机安装好了，下面我们从自己的第一个 Blog 开始

初始化博客

创建一个用于存放 Hexo 博客文件的目录，在当前目录下打开 Windows PowerShell / 命令提示符

# 初始化一个 Hexo 目录
$ hexo init
# 安装依赖
$ yarn install

此时 Blog 目录的结构如下所示

.
├── .GitHub 
├── node_modules   # Hexo 所需依赖
├── _config.yml    # Hexo 全局配置文件
├── package.json   # npm软件包及版本信息
├── scaffolds      # 模版文件夹
|   ├── draft.md   # 草稿模板
|   ├── page.md    # 页面模板
|   └── post.md    # 文章模板
├── source         # 资源文件夹
|   ├── _drafts    # 草稿文件夹
|   └── _posts     # 文章文件夹
├── .gitignore     # Git 忽略文件信息
├── _config.[主题名].yml # 主题的配置文件
└── themes         # 主题文件夹

更换主题

1. 安装主题

下载 最新 release 版本 解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

2. 指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

3. 创建「关于页」

首次使用主题的「关于页」需要手动创建：

hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

4.主题配置

覆盖配置

TIP
覆盖配置可以使主题配置放置在 fluid 目录之外，避免在更新主题时丢失自定义的配置。
通过 Npm 安装主题的用户可忽略，其他用户建议学习使用。

Hexo 5.0.0 版本以上的用户，在博客目录下创建 _config.fluid.yml 文件，将主题的 _config.yml 内容复制过去。

当前博客配置文件备份

以后如果修改任何主题配置，都只需修改 _config.fluid.yml 的配置即可。

注意：

• 只要存在于 _config.fluid.yml 的配置都是高优先级，修改原 _config.yml 是无效的。
• 每次更新主题可能存在配置变更，请注意更新说明，可能需要手动对 _config.fluid.yml 同步修改。
• 想查看覆盖配置有没有生效，可以通过 hexo g --debug 查看命令行输出。
• 如果想将某些配置覆盖为空，注意不要把主键删掉，不然是无法覆盖的，比如：

about:
  icons:  # 不要把 icon 注释掉，否则无法覆盖配置
    # - { class: 'iconfont icon-github-fill', link: 'https://github.com' }
    # - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }

主题更多配置参照这里。

5.文章配置

文章配置参照这里

样式预览参照这里

6. 更新主题

更新主题的方式参照这里。

本地预览

使用命令 hexo -s -p [端口号] 启动本地预览，默认端口号为 4000

# 以默认端口启动本地预览
$ hexo s
# 此时本地预览的网址为 http://localhost:4000

# 以自定义端口启动本地预览，比如 250
$ hexo s -p 250
# 此时本地预览的网址为 http://localhost:250

退出使用 Ctrl + C

参考

Hexo 搭建个人博客教程 - Dejavu’s Blog