记录一下博客搭建历程

前言

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

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

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

ssh -T [email protected]

如上图所示，输出了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。

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

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

然后在刚刚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。

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

1. 不够个性化
2. 不能做cdn加速(国内访问gituhb.io很慢)
3. 上一条说访问慢，现在貌似已经被墙了(202008xx)，不改域名想访问只能修改自己本机的DNS。

购买域名

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

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

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

Cloudflare

我这里以阿里云为例

注册cloudflare

注册过程就不详细展示了

添加站点

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

修改DNS服务器

打开阿里云域名控制台，点击准备好的域名。

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

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

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

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

解析加速

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