本文最后更新于：2020年10月17日下午

前言

19年8月份开始部署自己的独立博客到现在已经过去了10个月了，这期间断断续续做了很多修改，也踩了很多坑。这几天换了个域名，换了个主题，完全重新部署了博客，现在用起来感觉还不错，应该会持续用一段时间，所以现在写这篇文章总结一下博客部署的细节过程，避免我这个记性不好的人过段时间就不记得自己是怎么操作的了😂，网上有很多大佬写的Github Pages + hexo部署博客的教程，我这里主要是记录我自己的操作步骤和一些我自己的理解。我不是一个专业的前端程序员，所以如果在看这篇文章的大佬发现了错误，请指出。

最早部署博客的时候，我还是一个大一的学生，很多东西都不太懂，在网上看了很多关于部署博客文章，明白了部署博客的方法之一就是用现有的框架，然后自己做个性化的调整，找了一圈发现目前比较流行、搭建简单适合我这个蒟蒻的框架是hexo，看了官方文档和其他大佬的搭建教程，就开始找好看的主题了，去年部署使用了闪烁之狐大佬的matery主题，作为一个喜新厌旧的渣男这么几个月过去了有一些视觉疲劳了😂，现在改成了zkqing大佬的Fluid，这个简洁又有设计感的风格，很是喜欢。

hexo是一个基于nodejs的静态站点生成框架，不仅搭建简单，还可以将生成的博客直接上传到github、gitlab、gitee这些提供Pages服务的平台(下面会对Pages服务做介绍)服务建立静态站点，而且社区生态活跃，有大量有趣实用的插件可供下载。通过hexo，即使我们不怎么会HTML也可以用markdown写出工整的文章，markdown是一种轻量级的标记语言，文件扩展名是“md”，就是在项目文件里常见的README.md文件使用的格式。markdown的语法超级超级超级简单，没有哪个正常人20分钟还学不会基础语法的吧，不会吧，不会吧。话说回来markdown只是一个语法规范，所以我们还需要一个工具来辅助我们编写markdown文件，强烈推荐Typora，不用像vscode那样分屏预览，所见即所得的书写体验是真的awesome。

“You can create a website directly from a GitHub repository.”，这是Github Pages官方文档里面的介绍，我们可以直接从Github仓库创建静态网站，通过Github Pages，我们就可以不用自己维护一台服务器来托管博客，省钱又省心。

全程使用的是window10环境。

准备工作

安装nodejs

在这里下载适合自己的nodejs。

安装过程一路next就可以了，但是如果你觉得不放心那就自己选择。

安装完成后打开终端，输入：

node -v
npm -v

看到输出版本号就可以了。(-v改成--version也是一样的)

npm是nodejs默认的包管理工具，我们需要用npm来安装hexo以及一些插件。

添加国内镜像

如果没有梯子的话，可以使用阿里的国内镜像下载，这样速度会好很多。

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

这条命令会写入https://registry.npm.taobao.org到C:\%USERPROFILE%\目录下的.npmrc文件，也可以直接用文本编辑器编辑.npmrc文件。

安装Git

Git是当今最流行也是最好用的版本控制工具之一，我们在这里使用Git是为了把本地生成的静态页面推送到github(也可以使用其他平台，或者同时使用)。

在这里下载适合自己的Git。

安装过程还是一路next就可以了，但是如果你觉得不放心那就自己看着办。

安装完成后打开终端，输入：

git --verison

添加代理

git没有国内镜像(这个要是有国内镜像那是真的强/狗头)，如果没有梯子的话，那git clone可能会很慢，有梯子可以设置一下代理，如下：

全局代理

# socks5协议，1080端口修改成自己的本地代理端口
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080

仅代理github

# socks5协议，1080端口修改成自己的本地代理端口
git config --global http.https://github.com.proxy socks5://127.0.0.1:1080
git config --global https.https://github.com.proxy socks5://127.0.0.1:1080

上面的命令会在C:\%USERPROFILE%\目录下的.gitconfig文件写入

[http "https://github.com"]
	proxy = socks5://127.0.0.1:1080
[https "https://github.com"]
	proxy = socks5://127.0.0.1:1080

用编辑器写入也是可以的。

连接Github

配置个人信息

打开git bash，输入如下命令，注意替换用户名和邮箱。

git config --global user.name "username"
git config --global user.email "email"

写入的和前面添加代理的是同一个配置文件，同样也可以用编辑器写入。

[user]
	name = username
	email = email

生成SSH

执行如下命令

ssh-keygen -t rsa -C "email"

这个命令会在你的用户文件夹下的.ssh文件夹下生成id_rsa和id_rsa.pub文件，前者是你的私钥，后者是公钥，接下来就是把公钥提交到Github上，这样就可以安全的传输了。

使用命令cat ~/.ssh/id_rsa.pub，或者用编辑器打开id_rsa.pub文件都可以，复制里面的全部内容。

回到github，点击如下图所示的setting，然后点击SSH and GPG keys

ssh

然后点击New SSH Key，名字自己决定，内容就粘贴刚刚复制的公钥。

最后执行下面的命令查看是否成功

ssh -T [email protected]

check

如上图所示，输出了Hi username!，那么就成功了。

创建博客仓库

不会还有人需要注册github的详细步骤吧，不会吧，不会吧。

在github首页点击右上角的+号，选择New repository

新建仓库

然后在如下页面中填写仓库名(Repository name)

**一般这里的格式都是且必须是username.github.io (username就是前面Owner里面显示的名字)**，原因如下。

仓库名命名为username.github.io那么访问通过该仓库创建的博客的默认域名就是username.github.io。

仓库名命名为xxx.github.io，访问地址就是username.github.io/xxx.github.io。

我的username是oopstls，但是这里我用sameple.github.io作为样例。

Description是对这个仓库的描述。

后面的README一定要勾选，不然后面不能初始化Github Pages。

Imgbot是我用来给我的github图床里面的图片压缩的，没有使用过就没有这个选项，不影响后序操作。

然后点击下面的绿色按钮Create repository。

创建博客

然后点击仓库的setting。

setting

向下翻找到Github Pages，点击choose a theme。

choose a theme

然后直接点击select，不用去选主题了，这里只是通过选主题激活Github Pages

select

然后在刚刚Github Pages设置的位置就会显示你的默认链接。

点击进去就是Github Pages为你生成的个人页面。

安装初始化Hexo

安装Hexo

打开一个已经配置好可以执行npm命令行终端，可以直接用前面安装的git自带的Git Bash。

输入如下命令安装hexo命令行工具。

npm i hexo-cli -g

输入命令后如上图所示就安装成功了，也可以再输入命令hexo -v看看。

初始化Hexo
在你想用来存放博客文件的存储路径上新建一个文件夹，这个文件夹用来存储博客文件，比如D:\Blog\。

然后再这个目录下打开终端，或者cd /d/blog(注意这里是我的目录路径，以当前自己的为准，不能随意复制)

然后执行下面这条命令初始化你的博客文件。

hexo init sample

sample是生成后存储文件的文件夹

命令执行完成显示上图所示内容就可以了。

接着就执行npm install安装必要的组件。

npm install

安装完成没有报错的话，那基本环境就配置好了。

介绍几个后面会常用的命令，也可以在官方文档查看更多。

hexo clean #清除已经生成的静态站点文件，最好每次生成之前都clean一下 hexo generate #生成静态站点文件 hexo g #上一个命令的简写 hexo server #启动服务器。默认情况下，访问网址为： http://localhost:4000/ hexo s #上一个命令的简写 hexo deploy #部署网站，需要先generate生成静态文件才能部署 hexo clean && hexo g && hexo s #本地测试的时候可以这么写

现在执行hexo g && hexo s

然后打开浏览器，在地址栏输入localhost:4000，就可以看到初始博客页面了。

目录结构
根目录
├── _config.yml #博客配置文件 ├── node_modules ├── package-lock.json ├── package.json ├── scaffolds #草稿、文章模板、页面模板 ├── source #资源文件夹 └── themes #主题文件夹

source目录下
没有的文件夹不是自动生成的，而是推荐使用方式（后面介绍）

├── source │ ├── CNAME #自定义域名 │ ├── _data #覆盖主题配置 │ │ ├── fluid_config.yml #fluid主题覆盖配置 │ │ └── fluid_static_prefix.yml │ ├── _posts #文章存储文件夹 │ │ └── helloworld.md │ ├── about #自定义关于页 │ │ └── index.md │ └── img #作为主题的图片资源文件夹 │ ├── avatar.png │ ├── banner │ ├── favicon.png

个性化
更换主题
前面hexo初始化完成之后，默认使用的是landspace主题。除了自带的主题外，hexo官网还罗列了很多好看的主题可供查看和使用。

选择自己喜欢的主题，下载至/theme文件夹，然后再/_config.yml文件中修改theme: landspace，将landspace改为主题存储的文件夹名。

在hexo5之后，可以直接使用npm命令下载主题，但是下载的主题是存放在/node_modules文件夹下的，需要自定义修改一些东西的时候不是很方便(只改配置文件可以在/source/_data/下覆盖主题配置文件)。

不同的主题配置方式各不相同，hexo官网列出的主题大多都有较详细的配置说明，可以在主题的github仓库查看README.md文件。

我现在(至文章最后一次更新)使用的是Fluid，主题安装过程以及配置过程就不具体演示了，官方说明非常详细。

生成以及上传
前面已经介绍过博客的生成命令。

这里再贴一下。

hexo clean #清除已经生成的静态站点文件，最好每次生成之前都clean一下 hexo generate #生成静态站点文件,生成内容在根目录下的public文件夹内 hexo g #上一个命令的简写 hexo server #启动服务器。默认情况下，访问网址为： http://localhost:4000/ hexo s #上一个命令的简写 hexo deploy #部署网站，需要先generate生成静态文件才能部署 hexo clean && hexo g && hexo s #本地测试的时候可以这么写

hexo deploy需要先安装对应平台的deploy插件

如github pages，需要执行下命令安装插件。

npm install hexo-deployer-git --save

当本地测试完成之后，执行hexo d即可上传至仓库。

绑定域名
github pages默认的域名是username.github.io。

建议改为自己的域名的几个原因：

不够个性化

不能做cdn加速(国内访问gituhb.io很慢)

上一条说访问慢，现在貌似已经被墙了(202008xx)，不改域名想访问只能修改自己本机的DNS。

购买域名
在国内几个大厂都可以购买，如阿里云、腾讯云、百度云…

购买域名的详细过程大概就是实名、选域名、买域名。

无脑操作，具体过程就不赘述了。

Cloudflare
我这里以阿里云为例

注册cloudflare
注册过程就不详细展示了

添加站点

填写购买的域名，然后点击添加站点，然后无脑下一步，直到提示修改DNS服务器。

修改DNS服务器
打开阿里云域名控制台，点击准备好的域名。

然后点击DNS修改、修改DNS服务器

将刚才Cloudflare给出的两个域名解析服务器粘贴至这里。

点击确定之后返回Cloudflare点击检查。

等cloudflare检查完成之后执行下面的操作，这个过程会等几分钟到几个小时不等。

解析加速
上面点击DNS，然后添加记录，两个记录都是CNAME，分别填入域名和www。确定后面的代理状态为开就可以了。