零基础小白的博客搭建全记录（GitHub+Hexo） - 一些有的没的 | おいでよー = この夏に🎇 = 猫和甜品，夏天和你。

2023 年 3 月 23 日，小倖第一次成功通过 GitHub 搭好了 Hexo 的博客。兴奋之余，也想要将这场历时两天的艰辛记录下来。如您所见，小倖是小白，故这篇不是技术帖！！！~~（其实更像是小倖的碎碎念啦）~~

小倖真是踩了好多坑。因为 Vercel（一个开箱即用的网站托管平台）已经没有了 Hexo 的框架，因此没有办法懒人建站法 —— 一键通过 Vercel 建站了。小倖在网上也找了很多博客搭建方法，尝试过的有：

Cloudflare Pages
Github Pages
Wordpress
Vercel

前两个是一直卡在网站发布上（即在本地查看没有问题，但无法在网页中显示）。Wordpress 是因为太笨重了遂放弃。小倖倒是通过 Vercel 建好了一个 Hugo 的博客，但如前言所说，Vercel 现在已经没有 Hexo 的框架了，因而在搭建 Hexo 博客上一直失败。

** 补充：** 在网络上，通过 GitHub Pages 部署 Hexo 站点的办法大致分成两种。一种是将本地代码 Push 到远程仓后，在相应 Repo 的 Settings 中找到 Pages，部署是在那里完成的；另一种是通过 hexo d 命令来部署。前者小倖一直失败，后者倒是几乎毫无障碍地建成了，遂推荐。

~~（为什么小倖一定要一个 Hexo 的博客呢？还不是因为 Hexo Themes 有很多很好看的主题嘛。）~~

总之，小倖现在终于能够拥有一个可爱的博客啦，很开心☆*: .｡. o (≧▽≦) o .｡.:*☆☆*: .｡

# 博客搭建

# 1. 初识 Hexo

Hexo 是友邻推荐给小倖的，小倖也经常在各个地方看到，当然最主要是主题很好看啦，遂采用。Hexo 对于小倖来说有如下几个优点：

发布方便
- 只需要在 Git Bash 中敲几行代码即可部署到 Github Pages 等平台上。
支持 Markdown
- 虽然几乎现在所有的平台都支持啦。
海量主题任君挑选
- 这才是最重要的嘛！

总之，Hexo 最高！

# 2. 准备工作：环境布置

想要将通过 Hexo 布置站点，首先需要布置 Node.js 和 Git 环境。

这一步不难，只要进入各自的官网中下载就可以了。

Node.js 下载：https://nodejs.org/en/download
Git 下载：https://git-scm.com/downloads

如何检验自己是否成功安装呢？可在 Git Bash 中输入如下命令：

	git version
	node -v
	npm -v

如果能够出现对应的版本号，则说明安装完成。接下来就可以进入 Hexo 的安装阶段啦。

# 3. 安装 Hexo

这一步也很简单，只需要敲入如下命令：

	npm install -g hexo-cli #安装 Hexo
	hexo init <文件夹名> #创建文件夹并初始化
	cd <文件夹名> #进入该文件夹
	npm install #导入文件

这样就会得到包含配置文件 _config.yml 的文件夹啦。你可以在该文件里个性化自己的网站。

其实这样就算建好了一个很简陋的站，如何查看自己的站到底长什么样子呢？可通过运行以下命令：

	#注意：都要在根目录下进行
	hexo cl #清理缓存
	hexo g #产生静态档案
	hexo s #启动服务器

运行完之后，就可以通过 http://localhost:4000 来查看自己的站点啦。不过这时候只是在本地查看，还没有布置在网络上哦。因此接下来就是 ——

# 4. 将 Hexo 博客部署到 Github Pages 上

在这一步中，你首先需要拥有一个 GitHub 账号，然后建一个 repo。这一步十分简单，就不多赘述了。建好 repo 之后，建议设置一个 SSH密钥 ，以便通过 SSH 连接 GitHub，而不必总是输入你的用户名和密码。

那么，接下来就试着运行以下代码吧：

	#首先，让你的笔记本电脑知道你将使用哪个 GitHub 账户
	git config --global user.name "GitHub账户名"
	git config --global user.email "GitHub注册邮箱"
	#产生一个 SSH 密钥对
	ssh-keygen -t rsa -C "GitHub注册邮箱"

运行过程中，电脑会问你要将 SSH 密钥保存在哪个文件夹里，紧接着，你就可以在那个文件夹里看到 id_rsa.pub 这个文件啦。打开它，将内容复制到你的 GitHub 中。

具体方法：在 GitHub 的 settings 中找到 SSH and GPG keys ，打开它，然后新建一个 SSH Key，将剪切板的内容粘贴进去，就大功告成啦！

在让你的笔记本知道你将使用哪个 GitHub 账户之后，还需要让你的 Hexo 站点知道你使用的是哪一个 repo 。操作方法就是打开网站的配置文件 _config.yml ，找到 deploy 行（一般是在最末），将其修改成以下内容：

	deploy:
	type: git
	repo: 你的仓库链接，通常的格式为 https://github.com/ 账户名 / 仓库名.github.io.git
	branch: master
	message: "{{ now \('YYYY-MM-DD HH:mm:ss' \) } }"

不过，如果要使用 GitHub Pages，仓库名必须与账户名一致，详情见官方文档。

接下来，就是通过 hexo d 命令来将 Hexo 站点部署到 GitHub Pages 上啦，不过在此之前，需要下载一个 deploy tool 。请在你的 Git Bash 输入 npm install hexo-deployer-git --save 。安装完之后，再键入 hexo d 。恭喜你，你的站点能被大家访问了。

# 5. 博客装修

# 5.1 安装主题文件

如前文所说，目前这个站点还很简陋，因此就到了最~~激动人心~~的时刻 —— 网站装修！请尽情在 Hexo Themes 中寻找一款自己心水的主题吧。

具体的安装方法请详见各自主题文件夹中的 README.md 文件，一般步骤为：先将主题文件夹克隆至本地仓，然后修改网站配置文件 _config.yml 中的 theme 行: theme: your_theme 。

# 5.2 修改具体配置

如果你想个性化你的网站，请在主题文件中的 _config.yml 里修改吧。比如为你的网站增添 social link ，还可以为你的网站添加头像和背景图。

# 5.3 增加标签、目录等页面

如果你希望你的文章能够自动归档在对应的页面之下，大多数情况下是需要进行一些设置的。

一般而言，你的主题配置文件中应当是包含以下行的：

	menu:
	Home:
	name: house
	theme: solid
	link: /
	About:
	name: id-card
	theme: solid
	link: /about
	Archives:
	name: box-archive
	theme: solid
	link: /archives
	Categories:
	name: bookmark
	theme: solid
	link: /categories
	Tags:
	name: tags
	theme: solid
	link: /tags

如果有的话，那就没有关系，没有的话，还需要自己添加。

接下来，就是替你的网站创建对应的页面，具体操作是在 Git Bash 中敲下：

	hexo new page tags
	hexo new page categories
	hexo new page about

接下来，你就会惊奇地发现，在 source 文件夹之下，不仅有了对应的文件夹，里面还各自都有 index.md 文件！请挨个打开它，然后在文件的最后一行填上 type: '' 。例如，在 tags 的 index.md 中应当填入以下内容：

	---
	title: tags
	date: 2023-03-23 18:50:30
	type: 'tags'
	---

设置好之后，只需要在你的文章中使用 Front-matter 就好啦。例如：

---
title: 零基础小白的博客搭建全记录（GitHub+Hexo）
categories: 今天敲点什么代码呢
tags: [博客,hexo,github]
---

# 5.4 使用！-- more -- 让博客页面更简洁

由于很多主题的网页浏览都是直接全文显示的，这种时候会让你的网站显得笨重。那么 !-- more -- 就会将其变得简洁！可以参照这篇博文：https://www.jianshu.com/p/78c218f9d1e7

# 5.5 为你的博客开启评论功能吧

目前的评论的系统有很多，大概有：

Gitalk
Giscus
Waline
Twikoo

小倖使用的是 Giscus。可以直接在官方文档上面设置，不过有一些前提条件和准备工作：

repo 必须是公开的。
安装 giscus app。
为你的 repo 启用 Discussions 功能。

一步一步跟着官方文档来，最后就会到达 启用giscus 这一步。你将会得到如下字段：

	src="https://giscus.app/client.js"
	data-repo="[ENTER REPO HERE]"
	data-repo-id="[ENTER REPO ID HERE]"
	data-category="[ENTER CATEGORY NAME HERE]"
	data-category-id="[ENTER CATEGORY ID HERE]"
	data-mapping="pathname"
	data-strict="0"
	data-reactions-enabled="1"
	data-emit-metadata="0"
	data-input-position="bottom"
	data-theme="light"
	data-lang="en"
	crossorigin="anonymous"
	async>

然后将其写入你的主题配置文件 _config.yml 中即可！小倖是这样写的：

	giscus:
	enable: true
	src: https://giscus.app/client.js
	repo: nanakumo/nanakumo.github.io
	repoID:
	category:
	categoryID:
	mapping: pathname
	strict: 0
	reactionsEnabled: 1
	emitMetadata: 0
	inputPosition: bottom
	theme: cobalt
	lang: zh-CN

# 写在最后的话

至此，你就可以享受你的博客之旅啦。请记住，每次在本地修改完之后，请一定要 hexo g && hexo d 噢！