Hexo搭建博客之路

序

一些讲在最前面的话。
​自己老早就想搭一个自己的博客，从零到一的那种。为此准备了很久很久？各种材料（优秀的博客网站，搭建视频，整理需求…）也一直在整理🤣，试想一下哪个理工男没有过这种浪漫呢，用自己开发的语言写一个自己的操作系统，上面运行着一个自己的虚拟机，奈何我等普通人只能退而求其次，追求一个自己的博客网站就好。

其实也认真想过，前后端全栈完全由自己开发部署，这样的好处自然是高度自由，只要能力够🙃。但随着踏入社会参加工作，这种想法对于一个上班族来说，要付出巨大的代价，我害怕折腾到最后还把自己的那点热情都折进去了。于是乎，我选择了 Hexo ，主题是 Stellar，部署在 Gitee 上，图床则用了阿里云的 OSS 存储，写博客的工具则是 Typora，与之搭配的是 PicGo，它是用来上传图片给我的博客提供一个远程路径的。至于 Typora + PicGo，可以参考

不同的是我用的是软件，他用的是命令行，此外我的软件还装了个 super-prefix 插件，这样上传文件时会用日期来创建目录，用时间来为文件重命名，也方便后续的整理。

开始

其实搭建一个博客系统非常简单，当然这里说的是那种用文字记录生活技术的博客，Hexo 已经为我们完成了太多，巨人的肩膀上甚至还支撑着我们的改造计划。

1.安装Node.js

首先自然是要安装 Node.js，Hexo官方文档已经很贴心的为我们列出了步骤，再不济的话网上也有各种资料。这里要说一下 Windows 墙裂推荐用 nvm 安装，不用配环境变量后续也能随时切换 Node.js 版本，NVM下载地址

安装 nvm 很简单，安装好后在 nvm 的目录下找到 settings.txt 文件，添加下面两行代码设置淘宝镜像

1
2

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

用这种效果也是一样的

1
2

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

1.1.开始使用

1

nvm list available          # 显示可以安装的所有node.js的版本

Node.js 各版本查看

安装 LTS 那一栏有值的版本号即可，我选了一个16的，一个14的，安装命令如下：

1
2
3
4
5
6

nvm install <version>       # 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall <version>     # 卸载node.js的命令，卸载指定版本的nodejs，当安装失败时卸载使用

nvm ls                      # 显示所有安装的node.js版本
nvm use <version>           # 切换到使用指定的nodejs版本
nvm uninstall <version>  	# 删除对应版本

1.2.检查一下

1
2

node -v
npm -v

2.安装Git

懒得折腾就改下安装目录，一路next就好。环境变量会自动配置，我们需要做的就是配置用户名和邮箱

1
2
3
4
5

#配置用户名
git config --global user.name "hwl"

#配置邮箱
git config --global user.email  2930811148@qq.com

2.1.配置SSH公钥登录

• 打开 git 窗口执行 ssh-keygen 命令，然后一路回车到命令执行完毕。执行完命令后电脑用户目录下会生成两个文件，公钥位于 id_rsa.pub 文件中(另一个文件则是私钥)

• 我用的是 gitee，在个人设置中配置 ssh 公钥，就是将 id_rsa.pub 文件中的全部内容复制到右侧的框中, 并点击确定即可

• 在本地执行命令，测试一下即可

  1	ssh -T git@gitee.com

2.2.配置全局忽略文件夹

进入电脑用户目录，创建 .gitignore 文件（自己注意文件命名，与下面的命令保持一样即可），文件内容可参考文章，然后在当前目录执行如下命令

1

git config --global core.excludesfile ~/.gitignore

再查看当前目录 .gitconfig 配置文件里的内容验证下即可

2.3.Git版本更新

这里多记录一下，windows 更新 Git 到最新版本的命令

1
2
3

git update-git-for-windows

git -v

3.安装Hexo

1
2

npm install -g hexo-cli
hexo -v

3.1.初始化Hexo

进入一个你指定的博客目录，执行初始化命令

1

hexo init blog

至于博客的主题我用的是 Stellar，访问GitHub

1
2
3
4

cd blog

# 安装主题
npm i hexo-theme-stellar

1
2
3
4
5
6
7
8
9
10

# 自定义版需要一定的动手和学习能力，但通常能够做到更加自主
# 1.git 初始化
git init
# 2.把 Stellar 主题仓库 fork 到您的 GitHub 账号下
# 3.把您 fork 的 Stellar 主题仓库添加为博客仓库的子模块，其中 Godlike-long 替换为自己的 GitHub 账号名
git submodule add https://github.com/Godlike-long/hexo-theme-stellar.git themes/stellar
# 4.测试，往后获取最新的主题更新需先在github仓库上同步，然后在stellar目录下执行命令
cd .\themes\stellar\

git pull

在 blog/_config.yml 文件中找到并修改（冒号后面带个空格）

theme: stellar

运行博客

1
2
3
4
5

# 生成静态文件
hexo g

# 启动
hexo s

3.2.部署

在 Gitee 上创建一个自己的仓库，复制下仓库的 SSH 地址。打开 blog 目录下的 _config.yml 文件，编辑 deploy 模块，内容如下：

1
2
3
4

deploy:
  type: git
  repo: git@gitee.com:coclong/coclong.git
  branch: master

还需要安装一个扩展，这样才可以一键远程部署

1

npm install hexo-deployer-git --save

部署

1

hexo d

而如果想要看到部署后的页面，则还需要开通 Git Pages 服务：进入 Gitee 上的仓库主页，点击服务选项卡，选择 Gitee Pages，进入的页面中会看到一个网站地址，这个就是未来的访问地址，我们需要勾选强制使用HTTPS，再点击开启/更新（这个功能需要实名认证）。稍等片刻后，使用刚刚看到的网站地址即可看到效果了。

3.3.绑定域名

日后再说

4.Hexo入门

我们先来看一下 blog 的目录结构：

1
2
3
4
5
6
7

+ blog
  + public        //静态资源文件夹，内容会推送到代码库
  + scaffolds     //模板文件夹，新建文章时，Hexo会根据模板来建立文件
  + source        //资源文件夹，Markdown和HTML文件会被解析并放到public文件夹，而其他文件会被拷贝过去
  + themes        //主题文件夹，Hexo会根据主题来生成静态页面
  - _config.yml   //网站的配置信息，可以在此配置大部分的参数
  - package.json  //应用程序的信息和依赖关系

方便起见，我们把网站的语言设置为中文，编辑 blog 目录下的 _config.yml 文件，将 language 这一项设置为 language: zh-CN，将 url 这一项设置为 url: http://yourname.com（你购买的域名，若未购买可以用 http://yourname.gitee.io 代替），其他配置项请根据自己的需要进行设置。

接下来新建一篇文章：

1

hexo new [layout] <title>

layout 可选值有：draft（草稿）、page（页面）、post（文章），对应模板文件夹中的3个文件，如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数（默认值 post ）代替。若标题包含空格，请使用引号括起来。

现在，我们来新建一篇名为 test 的文章，输入以下命令：

1

hexo new test

结果在 source/_posts 目录下生成了 test.md 文件，内容如下：

1
2
3
4
5

---
title: test
date: 2023-07-08 21:04:11
tags:
---

这里给出 Front-matter 的概念，Front-matter 是文件最上方以 --- 分隔的区域，用于指定文件的变量。

常见参数：title（标题）、date（创建日期）、tags（标签）、categories（分类），只有文章（post）支持标签和分类参数，建议文章分类只写一个，标签可以有多个，写法为 tags: [tag1,tag2,tag3] ，注意每个参数的冒号后面都应该有一个空格，这一点同样体现在 _config.yml 文件中

编辑 test.md 文件，内容如下：

1
2
3
4
5
6
7

---
title: test
date: 2023-07-08 21:04:11
tags: [tag1,tag2,tag3]
categories: java
---
文章正文

保存后刷新页面，通常情况下页面会自动更新，若修改没有生效，则需要重新执行以下命令：

1
2

hexo g
hexo s

这里再介绍一个命令：

1

hexo clean

它的作用是清除缓存文件 (db.json) 和已生成的静态文件 (public) 。在某些情况下（尤其是更换主题后），如果你发现对站点的更改无论如何也不生效，你可能需要运行该命令。

打开网站首页并刷新，你会看到刚才设置的标签和分类生效了

发现首页 Hello World 这篇文章的内容被折叠起来了吗，很简单，只需要在文章正文合适的地方加上下面这行代码就搞定了（上下各要留一个空行）。

1

<!--more-->

4.1.总结

最后，我们来总结一下发布文章的流程：

第一步，hexo new <title> 生成一篇文章，这里的 title 指文件名，不建议使用中文

第二步，编辑文章，修改 title、tags 等参数，这里的 title 指文章标题，可以使用中文

第三步，hexo s 本地预览效果，不满意继续修改

第四步，hexo g 生成静态文件

第五步，hexo d 将静态文件推送至代码库

第四步和第五步可以合并成一条命令，hexo d -g ，表示部署之前预先生成静态文件。修改配置与发布文章的流程相似，最后都需要执行第三四五步。

至此，博客的搭建就算完成，博客的美化则需要按照 Stellar 主题文档来使用。

这里在多记录一个小节，换电脑后迁移 Hexo：

• 删除原博客项目的 node_modules 文件夹，然后把剩余的文件全部备份
• 新电脑准备好必需环境后，将备份文件转移到新电脑上
• 进入项目目录，重新安装依赖
• 下载 hexo 的 git 工具
• 下载完以后，就可以在新电脑上正常使用了
  hexo clean
hexo d
  接下来就是正常写博客了

不要害怕问题，百度是可以解决初级程序员90%的问题的。

结束

写博客是一件需要长期坚持的事情，其实也不是非得搭建一个系统才去写，更多的方式有手机的备忘录，公众号，各类社交平台，专门的博客平台等等。在此之前，我的过去学习之旅中就一直在写笔记，直到投入工作中才停歇下来。时代在发展，除了学生提笔写字的机会都是越来越少，也许有一天，我们连码字都不需要呢~

来自广东的 sentry 使用 小米 12 Pro 拍摄。