本文写作时间：20210810 - 20210820

写在前面

• 本文是一篇关于 “如何零成本搭建个人博客” 的零基础性教程。

• 这篇文章本来只打算简略写写，做个备忘。但是为了让更多的朋友学习这项技能，就写的详细了亿点。

• 由于我自己在建立这个博客之前，对此方面知识几乎是白纸一张，所以这篇文章一定会写的很通俗易懂，其中也加上了我自己建立过程中的一些经验，和我一样的小白完全可以放心食用。

• 本文图文密度很高，请仔细阅读 以免漏掉重要信息。

• 如果你对本文有任何建议或者认为有可改进之处，请各位斧正（请在github内发issue）。

• 本文参考连接和部分文字、图片出处：使用 Github Pages 和 Hexo 搭建自己的独立博客——作者：TRHX

已经有两位朋友根据本教程成功搭建了博客！

基础知识

1. 博客

   个人博客就是一个网站，我们可以在自己的博客上发布文章。我做这个主要是为了好玩（什）。

2. Github

   GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。——百度百科

   Github 是一个代码托管平台，有很多优秀的开源项目。比如前一阵很多人都知道的“美团骑手开发阿里云盘”的作者，他的阿里云盘小白羊版就在 github 上开源，很多人参与其中，提建议（issue），促使这个第三方客户端做的越来越好，此软件也深受好评。

3. Github Pages

   GitHub Pages 是一个静态站点托管服务。Github 页面旨在直接从 GitHub 仓库中直接托管您的个人、组织或项目页面。

4. Hexo

   Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

   Hexo was originally created and maintained by Tommy Chen in 2012. Since then, it has helped thousands of people to build their dream website/blog. ——hexo官网

   Hexo 最初由 Tommy Chen 于 2012 年创建和维护。从那时起，它已经帮助成千上万的人建立了他们梦想中的网站/博客。（谷歌机翻）

环境配置

安装 node.js、Git。

安装 node.js

点击此处访问 node.js 的官网，下载你的系统的长期维护版本（稳定版 LTS）。并进行安装。（若无特殊需求，一直下一步即可。）

安装 Git

点击此处访问 Git 的官网，下载你系统所需要的版本，或者直接点击Click here to download manually。并进行安装（若无特殊需求，一直下一步即可。）

关于 Git Bash 中使用的 bash 基本语法，我的博客中有一份简略的基础指南。

检查环境配置

同时按下键盘左下角的 windows键 + R，输入cmd，回车。逐条输入以下命令，有相应版本信息（数字）显示则安装成功，若不正确可以卸载软件重新安装。

git --version  
node -v  
npm -v

检验 Git 是否成功安装的另一个简单方法是：在任意地方右键，如果看到菜单里多了Git GUI Here和Git Bash Here两个选项（第一个是图形界面的 Git 操作，第二个是常用的命令行），即安装成功。

安装 Hexo

首先，我们要选择一个文件夹来存放你的博客网站文件。

注意：由于最后你的博客文件夹内将会有许许多多小文件，数万个文件数千个文件夹。如果你对其整体压缩打包作为备份的话，对于硬盘的读取速度就会有要求（主要是4k随机），所以我们可以把这个文件夹放在 SSD 里（如果你并不是非常介意你的 SSD 写入量）。

比如，我在我的C盘（C:\）新建了一个文件夹，重命名为 KHLFYY_Blog 。打开这个空文件夹，右键Git Bash Here，

换源

由于某些原因，npm 的下载速度可能会和某盘速度一样感人，

所以，建议把 npm 的下载源换成淘宝源,在刚刚打开的命令行中依次输入下列两条命令。如果你自己有一些神奇的手段，也可以不更换下载源。

npm config set registry http://registry.npm.taobao.org/

安装

换源之后，在命令行中输入命令进行安装，大致如图所示即为安装成功。

npm install hexo-cli -g  
npm install hexo-deployer-git --save  
# 第一个命令表示安装 hexo 
# 第二个命令表示安装 hexo 部署到 git page 的 deployer

Hexo 初始化

在刚才新建的文件夹里面再次新建一个 Hexo 文件夹（如C:\KHLFYY_Blog\Hexo），进入该 Hexo 文件夹右键鼠标，点击Git Bash Here，输入以下命令，如图所示则安装成功。

hexo init

注意：下文所有关于博客的 Bash 命令 操作，都需要在 Hexo 文件夹下进行。

Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下：

本地查看效果

按照上述配置完成之后，我们可以查看一下 hexo 是否正确配置完成，依次输入下列命令：

hexo generate  
hexo server
# 或者简写为
hexo g
hexo s

这时候会返回消息：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时你的博客已经在本地IP的4000端口运行。如果你不知道什么是IP，可以看看这个科普视频：【硬件科普】IP地址是什么东西？

此外，我们也可以指定端口运行，使用命令：

hexo s -p 23333
# 在23333端口运行

然后我们就可以打开浏览器，进入 http://localhost:4000/ 查看博客效果，如图。
这时候就说明我们以上的操作全部成功完成了。

部署 Github Pages

现在我们只能通过本地连接查看博客，我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到 Github Pages 上。

注册 Github

访问Github 官网，注册一个账号。

新建项目仓库

点击New repository新建一个项目仓库，步骤及注意事项见下图：

看清下图中哪个是用户名！仓库（repo）名称必须要写成 用户名.github.io ！！

配置SSH密钥

SSH 是一种网络协议，用于计算机之间的加密登录。以公钥进行的数据加密，只能与之对应的私钥才可以解密，反之亦然。——摘自知乎文章

我们的公钥（后缀 .pub )是下文需要提交到 github 的，私钥需要保存好。

要想通过 git 操作实现本地代码库与 Github 代码库同步，我们需要一个 SSH 密钥来确保远程操作人是可以写入该仓库。在我们第一次新建的博客文件夹里面（如：C:/KHLFYY_Blog）右键Git Bash Here输入以下命令：

ssh-keygen -t rsa -C "your email@example.com" 
# 注意把邮箱换成你自己的邮箱 如khlfyy@outlook.com

返回信息如下：

Generating public/private rsa key pair.  
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):  
# 回车按默认目录保存SSH密钥即可

返回信息如下：

Enter passphrase (empty for no passphrase):  
Enter same passphrase again:  
# 无需设置密码，直接按两次回车即可

最后得到返回信息：

Your identification has been saved in /c/Users/you/.ssh/id_rsa.  
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.  
The key fingerprint is:  
# 这里是各种字母数字组成的字符串，结尾是你的邮箱  
The key s randomart image is
# 这里也是各种字母数字符号组成的字符串  

这时候你的公钥就保存在了 C:/Users/you/.ssh/id_rsa.pub

输入以下命令将公钥复制到剪切板：

clip < ~/.ssh/id_rsa.pub
# 当然你也可以打开保存目录，右键记事本打开公钥文件 全选 复制

将SSH公钥添加到Github账户

① 登陆 GitHub，右上角点击头像-Settings；

② 点击左侧列表SSH and GPG Keys；

③ 点击New SSH key；

④ 粘贴刚刚复制的 SSH 公钥。

步骤四这里的名称，为了方便记忆，你可以写“我的笔记本”“我的手机”之类的设备识别名

测试 SSH配置

Git Bash Here，输入以下命令

ssh -T git@github.com
# 无需改动git@github.com

返回信息如图：

输入

yes

返回信息：

Hi yourname! You’ve successfully authenticated, but GitHub does not provide shell access.

看到此信息则配置成功；
如果报错，请重新配置 ssh 或上网查找解决办法。

配置 Git

Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置：

git config --global user.name KHLFYY  
git config --global user.email  khlfyy@outlook.com
#替换成你自己的名字和邮箱，为方便记忆，建议与 GitHub 信息一致。

将 Hexo 文件更新到 Github 的 repo 中

repo=repository 即 github 项目仓库

登录 github ，进入到你的博客项目仓库中（如https://github.com/KHLFYY/KHLFYY.github.io）。

右侧找到 code ，复制一下 git 仓库的 SSH 地址：

打开我们的 Hexo 文件夹（如：C:\KHLFYY_Blog\Hexo），右键用记事本（推荐VS Code）打开该文件夹下的_config.yml 文件，找到 deploy（可以使用ctrl+F进行搜索）

大致如图，将 repository 后的链接改为你刚刚复制的链接，注意空格。

为了方便，我把代码打在这里：

deploy:
  - type: git
    repository: 
     github: git@github.com:KHLFYY/KHLFYY.github.io.git,main
# 记得把"github:"后面替换自己的git仓库地址（SSH） 注意空格

注意：Github 中 branch（分支）的默认值，现在已经由 master 改为 main 。

一些教程中（如下图）可能写的仍为 master，你需要将 master 改为 main ；你也可以像我的那样，不写 branch 那一行，直接在 github 后加个 ,main 就可以。

ctrl+s 保存

在 Bash 中 分别 执行：

hexo g  
hexo d
# 即：hexo generate 和 hexo deploy

当然 你也可以简略成：

hexo g -d

执行完之后会让你输入你的 Github 的账号和密码。

这时候 如果出现报错：

ERROR Deployer not found: git
# 原因是 deployer 没有安装成功

重新安装 deployer ：

npm install hexo-deployer-git --save

之后再执行：

hexo g -d

这时候就你的本地博客文件就上传到 github 的 repo 中了

访问你的博客网址：https://你的用户名.github.io（如：https://khlfyy.github.io）就可以看到你的博客已经基本部署成功了。

发表文章

新建文章

在 bash 中，输入命令新建文章：

hexo new post 你的文章标题

或者简写为：

hexo n 你的文章标题

然后在 \Hexo\source_posts 中找到 你的文章标题.md

当然，你也可以在这个目录下直接新建一个 txt，然后改为“文章标题.md”，不过这样有点不太方便，下文会提到。

写博客-编辑markdown文本

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。——百度百科

有很多编辑器都可以方便我们编辑 markdown ，但是我个人还是推荐使用VS Code，这样你的很多工作都可以在 VS code 里一起完成。详细可以看看这篇博客进阶——充分利用VScode。

关于 markdown 的语法，我的博客里有一份简略的基础指南

打开你新建的 你的文章标题.md 文件，大概是这样的：

---
title:
date:
tags:

---

因为这个很简略，你可以根据自己主题的需要，修改 hexo 文件夹下 scaffolds 的 post.md ，这个是使用hexo n命令之后，生成的md文件中 已经写好的默认值，你可以根据主题和需要，将其修改成这样：

---
title: {{ title }}
date: {{ date }}
tags:
- 
categories: 
description: 

---

使用hexo n命令生成的 文章标题.md ，会自动写好我们在 scaffolds 的 post.md 中预设的内容；而手动新建 txt 改成 md 就需要自己写入。这就是为什么上文建议使用指令来生成新文章。

而我们刚刚新生成的 你的文章标题.md 里，每一项的用法如下

---
layout: 页面布局（配合主题文档使用，一般没有这一行）
title: 文章名称，一般自动写好了
date: 文章日期，一般自动写好了
tags: 
  - 文章标签一
  - 文章标签二
categories: 文章分类
photos: 文章封面图（仅部分主题支持）
description: 文章描述，即要在首页显示的摘要（仅部分主题支持）

---


这里是正文
使用 markdown 语法编辑
（同时也可以使用html语法）

......正文内容......

(正文结束)

注意：description、photos 等设置，具体还是要看你的主题是否支持。很多设置还需要根据主题具体分析。具体可以查阅所使用的主题的官方文档。

写完文章之后保存，最好在本地预览一下，看看有没有什么问题。使用命令：

hexo clean
# 清除缓存
hexo g
# 生成网页文件
hexo s
# 开启本地服务器

然后你就可以在 http://localhost:4000/ 本地查看博客效果。

如果有改动，修改后再次执行以上步骤；

当改动完成，我们要把改动提交到 github 的仓库里，使用命令：

hexo clean 
hexo g
hexo d

当然，你也可以简写为

hexo cl
hexo g -d

如果你正确提交到 github 仓库了，过几分钟就可以在你的博客网站看见更新了！

更改主题

默认的主题毕竟没有特色，又或者你更喜欢其他样式的主题。下面讲解如何为自己的博客更改想要的主题。

途径一：你可以在Hexo 官网的主题专栏寻找心仪的主题，点进去之后，找找作者的 github 中这个主题的repo（仓库）。一般都会在文章的最下面（或者在 关于 页），大致如图：

途径二:在 github 中搜索 hexo theme ，就可以找到许多 hexo 主题：

然后将该主题（theme）下载(克隆 clone)下来：

再打开 Hexo 文件夹下的 themes 目录（如：C:\KHLFYY_Blog\Hexo\themes），右键Git Bash Here，输入以下命令：

git clone https://github.com/levblanc/hexo-theme-aero-dual
# 将地址换成你刚刚复制的主题的项目地址

也可以直接在 repo 页面点击 Code 然后点击Download ZIP下载，解压。

等待 clone 完成之后，你的 themes 文件夹下就会有一个 hexo-theme-aero-dual 文件夹了，为了方便期间，你可以将其重命名为 aero-dual。

然后需要更改博客配置文件，让它来应用这个主题。打开 hexo 文件夹下的的配置文件_config.yml （比如C:\KHLFYY_Blog\Hexo_config.yml），ctrl+F搜索theme，然后改为刚刚的主题文件夹名称（图中名称是未修改的）：

更改之后，提交到 github 仓库，在 hexo 文件夹下右键，Git Bash Here，输入以下命令：

hexo cl
hexo g
hexo s
# 同上文提到的那样，本地预览没有问题后：
hexo d

此时访问自己的博客即可看见更换后的主题，但我们仍然需要对主题的相关配置进行修改，比如网站标题，图标等等。

Hexo 中有两份主要的配置文件，名称都是 _config.yml ，它们均是用于站点配置使用的。其中，一份位于站点根目录下（比如我的：C:\KHLFYY_Blog\Hexo_config.yml），主要包含 Hexo 本身整站的配置；另一份位于主题目录下（比如我的：C:\KHLFYY_Blog\Hexo\themes\fluid_config.yml），这份配置由主题作者提供，主要用于配置主题相关的选项，一般_config.yml 文件里都有相关注释，或者也可以查看该主题 repo 里的 readme.md 说明，然后按需修改即可。

结语

经过了这一番折腾，属于你自己的网站——你的个人博客，就搭建完成了！当然，个人博客还可以玩出很多花样。关于美化和进阶，将会另写一篇文章来讲解。在这次搭建过程中，你一定也学到了很多东西，快去写一篇博客和朋友们分享吧！

站内相关链接

• Markdown语法指南
• Bash使用指南
• 博客进阶——充分使用VScode
• 博客进阶——在网页插入B站视频
• 博客进阶——自定义valine评论表情
• 博客进阶——优化博客的永久链接

互加友链

• 详细请查看本站友链页：友情链接