首次创建博客，网上也查了不少资料，Hexo框架应该是目前个人博客用得最多的了，还有很多主题、插件的支持。只是网上的资料大多已经老旧，一些配置因为版本更替的原因也发生了变化，所以接着自己搭建博客的机会，重新整理了一个系列，把个人博客的搭建过程分享给大家。
这一期文章包括以下内容：
- 使用Hexo框架创建个人博客
- 应用Matery主题
- 开始你的第一篇博客
- 提交代码到github仓库
- 发布到Cloudflare Pages
使用Hexo框架创建个人博客
安装nvm管理nodejs
因为Hexo框架是基于nodejs的，所以你需要先安装nodejs，如果使用的是linux系统，建议使用 nvm 进行nodejs的版本管理，当然你也可以选择跳过这一步自行安装nodejs版本。
# 一键安装脚本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/$(curl -s https://api.github.com/repos/nvm-sh/nvm/releases/latest | grep '"tag_name":' | sed 's/.*"tag_name": *"\([^"]*\)".*/\1/')/install.sh | bash
source ~/.bashrc
# 显示安装版本
nvm --version安装好以后你就可以通过nvm来管理你的nodejs版本，推荐使用18以上版本来构建。
# 显示当前版本
nvm current
# 安装20.x的版本
nvm install 20
# 如果已安装，可以直接切换版本
nvm use 20国内对github的访问向来是时断时续的，如果安装失败可以等一等，或者使用科学上网工具，这里推荐可以 注册 一个，目前有免费流量可以薅羊毛。
手动安装nodejs
你可以选择从 官网下载，如果是linux系统也可以用自带的包管理器安装。
# for debian / ubuntu
apt-get install nodejs
# for redhat / centos / fedora
yum install nodejs
# 显示安装版本
node -v安装hexo创建博客
# 安装命令行工具
npm install hexo-cli -g
# 显示安装版本
hexo v
# 创建博客
hexo init blog
cd blog
# 启动本地服务
hexo s这一步做完你已经可以访问 http://localhost:4000 访问你的本地博客了，里面包含了一个hello world页面。
生成与发布
Hexo是使用Markdown文件来写博客的，在发布前需要将md转换成静态html文件。
hexo cl && hexo g这会在你博客项目的根目录下创建一个 public 目录，里面就是生成的博客网站的静态资源，你可以将它们上传到你自己的服务器上，或者按后面的教程直接发布到Cloudflare Pages上。至于发布到Github Pages，因为国内的限制这里就不推荐了，大家要是有兴趣的话可以自行搜索，有很多文章介绍的。
应用Matery主题
hexo-theme-matery 是一个成熟度比较高的主题，而且对中文的支持也很好，能同时适配PC和手机浏览，配置说明也比较详细。
安装主题
# 进入主题目录
cd themes
# 安装hexo-theme-matery主题
git clone https://github.com/blinkfox/hexo-theme-matery.git
cd hexo-theme-matery
# 删除git文件
rm -rf .git使用主题
安装完博客项目有两个 _config.yml 文件，一个在博客项目根路径下是全局的配置文件，一个在主题目录下是主题相关的配置。首先需要将全局配置里的 theme 值改为 hexo-theme-matery。
theme: hexo-theme-matery修改全局配置
- 请修改
_config.yml的url的值为你的网站主URL（如：http://xxx.github.io）。 - 建议修改两个
per_page的分页条数值为6的倍数，如：12、18等，这样文章列表在各个屏幕下都能较好的显示。 - 如果你是中文用户，则建议修改
language的值为zh-CN。
新建分类 categories 页
categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "categories"编辑你刚刚新建的页面文件 source/categories/index.md，至少需要以下内容：
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---新建标签 tags 页
tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "tags"编辑你刚刚新建的页面文件 source/tags/index.md，至少需要以下内容：
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---新建关于我 about 页
about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "about"编辑你刚刚新建的页面文件 source/about/index.md，至少需要以下内容：
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---新建留言板 contact 页（可选）
contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "contact"编辑你刚刚新建的页面文件 source/contact/index.md，至少需要以下内容：
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的
_config.yml文件中，第19至21行的“菜单”配置，取消关于留言板的注释即可。
新建友链 friends 页（可选）
friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "friends"编辑你刚刚新建的页面文件 source/friends/index.md，至少需要以下内容：
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬，只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
"url": "https://blinkfox.github.io/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]新建 404 页
如果在你的博客 source 目录下还没有 404.md 文件，那么你就需要新建一个。编辑你刚刚新建的页面文件 /source/404.md，至少需要以下内容：
---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---内容搜索
主题中还使用到了 hexo-generator-search 插件来做内容搜索，安装命令如下：
npm install hexo-generator-search --save在博客项目根目录下的 _config.yml 文件中，新增以下的配置项：
search:
path: search.xml
field: post中文链接转拼音（建议安装）
如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下：
npm i hexo-permalink-pinyin --save在博客项目根目录下的 _config.yml 文件中，新增以下的配置项：
permalink_pinyin:
enable: true
separator: '-' # default: '-'这一切做完后，你可以本地先看下效果，再做细节的调整，主题配置文件里面对每个配置项已经做了很详细的说明，这里不再展开细节了。
开始你的第一篇博客
设置完你的主题后，就可以开开心心的发表你的第一篇博客了：）在这之前，默认创建的hello world可以先删了。
# 这里可以用中文，但是我更建议用英文
hexo new "my_first_post"创建完在 source/_posts 目录中就创建了一个新的文件 my_first_post.md，接下来你可以用Markdown编辑器进行编辑。如果你正在使用 VSCode，那么 Markdown All in One 插件就很好用了，推荐安装一个可以一边编辑一边预览，所见即所得。
开始是文章的元数据需要你修改，这部分是不会显示在正文中的。
---
title: 我的第一篇博客 # 文章的标题，这里要用中文了
date: 2024-12-20 10:52:30 # 最后更新时间
tags: # 标签会影响在你博客标签页面的归类，多个标签之间是平级关系，如果不需要可以留白
- Hexo
- Cloudflare
categories: # 分类会影响在你博客分类页面的归类，从上往下多个分类是上下级关系，如果不需要也可以留白
- 经验分享 # 第一级分类
- 个人博客 # 第二季分类
keywords: # 根据你博客提取的关键字，有助于文章搜索
- 博客
- Hexo
- Matery主题
- Cloudflare Pages
---这之后的部分就是文章正文了，怎么写一篇好的博客就不在这里教学了，毕竟我也才算是入门汉。
提交代码到github仓库
当上面的步骤都做完以后，你已经可以在本地看到一个漂亮的博客网站了，接下来我们先把它提交到Github上再进行发布。当然首先你需要一个Github账号，注册账号就不在这里教学了，可以自行搜索。
创建github仓库
登录你的Github账号，创建一个新的仓库，如果你不想公开你的博客代码的话，建议选择私有。
安装git工具
如果你用的Windows，可以从 官网下载 安装包。如果是Linux，可以直接使用包管理器安装。
# for debian / ubuntu
apt-get install git
# for redhat / centos / fedora
yum install git
# 创建你的公钥
ssh-keygen -t rsa
# 一路回车到底可以生成一个id_rsa.pub文件
cat ~/.ssh/id_rsa.pub将你的公钥复制出来，添加到Github中，这样你在Linux上使用ssh协议操作Github仓库时就不再需要输入用户名密码了。操作步骤是点击右上角你的头像，选择 Settings，显示下面的页面，选择 SSH and GPG keys，然后在 Key 中填上你上面复制的公钥，Title 可以随便填。
提交git仓库
# 下面命令在你的博客项目根目录执行
# 初始化git仓库
git init
# 设置你提交的名称和Email
git config --global user.name "your name"
git config --global user.email "[email protected]"
# 这里要把yarn.lock添加到.gitignore，不然后面Cloudflare发布会报错
echo "yarn.lock" >> .gitignore
# 本地提交
git commit -a -m "初始导入博客项目"
# 提交到github
git branch -M main
git remote add origin [email protected]:你的用户名/你的仓库名.git
git push -u origin main发布到Cloudflare Pages
Cloudflare 作为一个全球性的CDN供应商，网络质量是相当不错的，关键是国内可以直接访问，无需科学上网，而且网速也很奈斯。同时你也不需要做域名备案，如果是国内的服务器，你就必须得备案，不然会被阻断。
在开始前你同样需要先申请一个账号和一个托管到 Cloudflare 的域名，账号的申请和域名的购买托管可以看我的另外一篇博客 如何注册一个域名并托管到Cloudflare。
连接Github仓库
首先 登录 Cloudflare 网站，点击 Workers 和 Pages，再点击 创建 按钮，选择 Pages 页签，点击 连接到Git 按钮。
初始的时候是没有链接 Github 账号的，你需要点击添加账户跳转到 Github 授权页面登录 Github 账号后，跳转到选择仓库页面，选择你刚提交的仓库。
选择完点击 Save 后再回到前面的页面就可以发现你刚才创建的仓库已经出现在列表中，选中它，点击开始设置。
发布你的博客
选择刚提交的 main 分支，构建命令填入 npm run build，构建输出目录填入 public，点击 保存并部署 按钮开始发布到 Cloudflare Pages。
稍等一会发布就成功了，发布完的界面是这样的，红框里是默认给你分配的域名，你已经可以通过这个域名访问你的博客了。
设置自定义域名
通常这个域名是很难记的，而且 pages.dev 的域名国内访问有时候也会被阻断，所以这时候就需要绑定你自己的域名了。选择 自定义域 页签，点击 设置自定义域 按钮，这里可以填入你托管域名的子域名，比如 blog.example.org。Cloudflare 会自动帮你建立一个 DNS 记录，并使用 *.example.org 的证书覆盖。你不需要再做更多的配置，已经可以从这个域名访问你的博客了。
后记
这篇博客的内容就到此结束了，之后你的博客代码已经通过Github仓库和Cloudflare Pages进行了绑定，每次Github提交都会为你进行新的部署。所以通常推荐的方式是在本地用 hexo s 测试看效果，满意以后再提交到Github执行自动发布。
