搭建个人博客

本文旨在记录本博客的搭建过程，同时希望能对别人有所帮助。

本来暑假留校准备比赛，谁知突发疫情，有家不能回，学校封校，比赛延期，节奏从紧张转为舒缓，不由得有些无聊，便生出搭建个人博客的想法。 由于更新较为频繁，即便按照教程一步步来也难免出现问题，在搭建过程中我也因此走了不少弯路。在遇到问题时多上网找答案，多看不同的解答，多尝试，最后基本都会解决的。

关于搭建个人博客

一开始搭建个人博客其实想法比较简单，主要是因为想搭所以搭了。但是在搭建过程中渐渐地对于这件事也有了不同的体会。

搭建个人博客意义何在？

经验知识总结

将遇到的问题、解决方法、技术经验、相关知识进行总结，便于日后查阅。

碎片化学习

通过网络确实能够学习到很多东西，但从网上学到的东西大都是零零散散的，不够系统，这时便能通过博客把学习的知识一点一点按自己的结构整理记录下来，从而实现碎片化学习。

分享交流

通过博客分享，产生沟通与交流，从而互相学习，共同进步。

记录生活

博客除了总结技术，还可以记录生活的诗和远方。

成就感

在博客的搭建过程中，总是伴随着成就感，而这成就感则会内化成为继续前进的动力。

最后以看到的一句话作结：
“对任何渴望进步的人来说，写博客/文章/回答对自己的成长帮助都是巨大的。频率和数量不必过分强求，有话要说就写写，没事就歇歇，随意点。因为坚持写作的那一刻起，你就已经开始受益。”

接下来就来看看怎么搭建个人博客吧：

注册 GitHub

打开 GitHub ：GitHub
点击右上角 sign up 进行注册（由于我注册时没有记录，为了展示注册过程我就随便填了） 填写邮箱 创建密码 设置用户名 这里会问你是否接收产品更新和公告，填“n”（no）就行 接着会有一个简单的真人验证 验证过后点击 creat account
GitHub 会向你的邮箱发送一个验证码，将验证码填入即可 自此便完成了 GitHub 的注册

新建GitHub仓库

进入个人主页，点击 Repositories ,再点击 New 新建仓库 按下图设置后点击 Creat repositoty 现在你便拥有了一个名为 hello 的仓库

安装Git

进入Git官网，点击 download 下载 选择对应的系统，我的是 windows 选择适合自己系统的版本，我的是64位系统，所以选了 64-bit 下载完成后打开 注：第二个新选项是说很多团队已经将他们的默认分支名改为 main . 这是因为2020 年非裔男子乔治·弗洛伊德因白人警察暴力执法惨死而掀起的 Black Lives Matter (黑人的命也是命)运动，很多人认为 master 不尊重黑人，呼吁改为 main. 点击 install 安装
安装完成后进行检验：桌面右键出现如下选项即表示成功 如果想看更加详细的安装教程或了解各选项含义，可以参考Git 详细安装教程（详解 Git 安装过程的每一个步骤）

绑定Git并提交文件（push）

我们利用 SSH 来完成 GitHub 与 Git 的绑定，实现方便快捷地提交文件。
SSH 其实是一种网络安全协议，简单介绍如下：
SSH（安全外壳协议，Secure Shell 的缩写）是建立在应用层基础上的安全协议。 SSH 是目前较可靠，专为远程登录会话和其他网络服务提供安全性的协议，利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。简单来说， SSH 就是保障你的账户安全，将你的信息全部加密，防止其他人截获你的数据，还能加快传输速度。
若想详细了解，可以参考详述 SSH 的原理及其应用
接下来便介绍如何绑定 GitHub 和提交文件。

绑定GitHub

要用 git 上传文件到 GitHub 首先得利用 SSH 登录远程主机，而登录方式有两种：一种是口令登录；另一种是公钥登录。口令登录每次都要输入密码十分麻烦，而公钥登录省去了输入密码的步骤，因而我们选择公钥授权。首先我们得在 GitHub 上添加 SSH key 配置。
首先我们在新建的文件夹中右键打开 Git Bash，输入 ssh 命令，查看本机是否安装 SSH（一般安装 Git 的时候默认安装了）：
如图便是已安装 SSH
输入ssh-keygen -t rsa命令，表示我们指定 RSA 算法生成密钥，然后敲四次回车，之后就会生成两个文件，分别为秘钥 id_rsa 和公钥 id_rsa.pub 。文件的位置在 Git Bash 上面都有显示，默认生成在以下目录：

Linux 系统：~/.ssh

Mac 系统：~/.ssh

Windows 10 ：C:/Users/ASUS/.ssh

接下来要把公钥 id_rsa.pub 的内容添加到 GitHub。可以通过目录找到 id_rsa.pub 文件的位置，用记事本打开文件复制。如果找不到文件可以直接在输入以下命令 Git Bash 上打开：

$ cd ~/.ssh 
$ ls
$ cat id_rsa.pub

连带着ssh-rsa的一大串内容就是公钥，注意：git 中的复制粘贴不是 Ctrl + C 和 Ctrl + V，而是 Ctrl + insert 和 Shift + insert.复制完公钥后，进入我们的 GitHub 主页，先点击右上角，再点击 settings 之后点击 SSH and GPG keys，再点击 New SSH key. 将复制的公钥 id_rsa.pub 的内容粘贴到 key 内，标题填不填无所谓，再点击 Add SSH key 可以在 Git Bash 中输入ssh -T git@github.com验证是否成功， 第一次会出现下图这种情况，填 yes 就行 绑定成功

提交文件

提交文件有两种方法：
第一种：本地没有 git 仓库
- 直接将远程仓库 clone 到本地；
- 将文件添加并 commit 到本地仓库；
- 将本地仓库的内容 push 到远程仓库。

第二种：本地有 Git 仓库，并且我们已经进行了多次 commit 操作
- 建立一个本地仓库进入，init 初始化；
- 关联远程仓库；
- 同步远程仓库和本地仓库；
- 将文件添加提交到本地仓库；
- 将本地仓库的内容 push 到远程仓库。

本地没有 git 仓库

首先，进入 GitHub 个人主页，点击进入新建的 text 仓库 点击 Code，复制仓库地址 然后进入我们准备存储 Git 仓库的目录右键 Git Bash 接下来，输入git clone 仓库地址，将远程仓库 clone 到本地 如图没有 clone 成功，而是报错 OpenSSL SSL_read: Connection was reset, errno 10054（以后可能还会多次遇到），原因是由于国内墙的存在，GitHu b网络不稳定，导致 clone 失败，解决方法很简单，多试几次总会成功的，或者通过 GitHub 国内代理加速，详见GitHub Proxy代理加速。如果还是不行则输入git config --global http.sslVerify "false"解除 SSL 认证，再进行 clone 。可参考Git报错解决：OpenSSL SSL_read: Connection was reset, errno 10054。
再 clone 一遍，还是没有成功，仍然是网络网络问题，连接超时，多试几次就好了 如下图就是 clone 成功： 看看 clone 到本地的仓库内容与远程仓库的内容，是否完全一致 接下来创建一个 text.txt 测试文件 从此目录进入 Git Bash，输入git status命令查看仓库状态 text 已经是一个 Git 仓库了，由图可见刚刚创建的文件 text.txt 没有被追踪，也就是没有提交到本地仓库。现在我们使用git add命令将文件添加到了「临时缓冲区」，再用git commit -m "提交信息"将其提交到本地仓库 如果你是第一次提交的话，会让你输入用户名和邮箱 这时只要再执行如下两行命令即可：

$ git config --global user.name "你的用户名"
$ git config --global user.email "你的邮箱"

完成后输入git log命令查看仓库提交日志 再输入git status查看一下仓库状态 现在输入git push origin main命令，将本地仓库提交到远程仓库，origin是远程主机的名字 第一次上传需要输入密码，验证成功后，如下图： 刷新 GitHub 的 text 仓库，可见测试文件已经上传到了 text 仓库中

本地有 Git 仓库

首先，建立一个本地仓库 text2，使用git init命令初始化仓库 输入git remote add origin 仓库地址命令，关联远程仓库，接着输入git pull origin main命令，同步远程仓库和本地仓库 回到本地仓库，可以发现远程仓库的内容已经同步到了本地仓库 接下来的步骤与第一种方法一样，可以自行尝试，先输入git add和git commit命令，将要提交的文件添加并提交到 text2 仓库；然后再输入git push origin main命令，将本地仓库修改（或者添加）的内容提交到远程仓库。

安装nodejs和Hexo

安装nodejs

打开node.js官网 点击下载，注：由于 nodejs14 可能在之后出现一些警告（warning），虽然无伤大雅，但是介意的可以找找旧的版本比如 nodejs12 。下载完成后双击安装，安装直接默认 next ，需要改的只有安装路径，我的路径是D:/node js。详细安装步骤可参考node.js 安装详细步骤教程。
安装完成后可以打开 cmd（Win + R 后输入 cmd）检验是否安装成功，用node -v和npm -v命令检查版本

设置npm在安装全局模块时的路径和环境变量

如果不设置的话，安装模块的时候就会把模块装到 C 盘，占用 C 盘的空间，并且有可能安装好 Hexo 后却无法使用。
步骤如下：
在 node js 文件夹中新建两个空文件夹 node_cache 、 node_global： 打开 cmd ，输入如下两个命令：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

设置环境变量：win10 系统 --> 打开控制面板 --> 系统 -->高级系统设置 --> 环境变量 ，然后在系统变量中新建一个变量名为NODE_PATH ，值为D:\node js\node_global\node_modules 然后编辑用户变量里的 Path ，将相应 npm 的路径改为：D:js_global 完成后点击确定即可

测试模块安装

在 cmd 下执行npm install webpack -g 可见 webpack 这个模块已经在设置默认的文件夹中了

安装Hexo

Hexo 就是我们的个人博客网站的框架，安装之前要先在 GitHub 上创建一个仓库，仓库名称（Repository name）为“用户名.github.io”，创建好后点击 settings 下拉到 GitHub Pages，点击 check it out here 出现如下内容就说明成功了 接下来安装 Hexo，首先在 D 盘创建文件夹 Blog ，点开 Blog ，鼠标右键打开 Git Bush Here，输入 npm 命令npm install -g hexo-cli安装Hexo 安装完成后，输入hexo init命令初始化博客 然后输入hexo g静态部署，nodejs14 版本会出现如下警告（warning），可以不用理会 这时网页已经部署完成，输入hexo s命令可以查看 浏览器输入 http://localhost:4000 就可以打开新部署的网页 看完之后 Ctrl + C 停止运行服务器。

将Hexo部署到GitHub

回到 Blog 文件夹，用记事本打开 _config.yml 文件 在底部填写以下内容：

deploy:
  type: git
  repository: https://github.com/reman2021/reman2021.github.io.git  #你的仓库地址
  branch: master

特别要注意冒号后面要有空格 仓库地址之前也讲过，其实就在这里 回到 Blog 文件夹，打开 Git Bash，输入命令npm install hexo-deployer-git --save安装 Git 部署插件 然后分别输入以下三条命令：

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

完成以后，打开浏览器，输入 https://用户名.github.io 就可以打开你的网页了。
现在虽然可以访问我们的网站，但是网址是 GitHub 提供的：http://xxxx.github.io 而如果想使用自己的个性化域名，则需绑定自己的域名，这就需要进行域名购买和解析。

购买域名与解析域名（非必须）

购买域名

接下来的操作不需要购买域名也能进行，我在一开始本着勤俭节约的优良风尚（穷），并没有购买域名，是在之后无意间看到腾讯 DNSPod 有 5 元无门槛优惠券，最后还是花重金（2 元）购买了域名，终究还是腾讯高。
购买域名有几个网站，主要有Godaddy，腾讯云，万网。
由于我是在腾讯云购买的域名，便详细讲一下腾讯云购买域名步骤。
首先打开DNSPod 域名狂欢季页面，可以看到 2 张 5 元无门槛优惠券，DNSPOD 全产品代金券和域名注册代金券，都是可以用来注册域名的。由于我已经领了，所以没有显示域名注册代金券。
然后找到域名注册 查询想要注册的域名 点击加入购物车后，点击立即购买后进入订单详情页 点击添加免费 SSL 证书 注意根据需要取消勾选自动续费 提交订单付费（优惠券自动抵扣5元）
之后还要创建实名模板，需要上传身份证信息，按流程走就行，审核也挺快的，可以在域名注册-我的域名查看

解析域名

在域名注册找到解析并添加如下两条解析记录： IPV4 地址可以通过 ping 得到，打开 cmd 输入： ping reman2021.github.io #ping + 你的GitHub的网址 接着打开 Blog/source，添加 CNAME 文件，可以先用记事本创建一个 txt 文件，打开后写上你的域名，(注：不要加 www. 否则每次访问都必须加 www. ，但如果不带有 www. ，以后访问的时候带不带 www. 都可以访问)，另存后记得要重命名为 CNAME，并且将 .txt 删除，如下图： 回到 Blog 文件夹，右键打开 Git Bash，依次走完 hexo 三部曲：

hexo clean
hexo g
hexo d

打开 GitHub，看看 CNAME 文件是否已经在仓库中，点击 settings 在 GitHub Pages 查看你的域名是否保存 如果域名是空白的话看看能不能自行添加
如果仓库中没有 CNAME 文件，也可以自己添加，方法如下：

创作文章

现在博客已经搭建好了，虽然比较简陋，但是已经可以进行文章创作啦。 文章创作具体可看：在Hexo博客上进行创作

设置NexT主题

目前 Hexo 博客有许多主题可供选择，常见的有 NexT、Yilia、Hacker 等等，可以根据喜好自行选择，上网查找的话相关资料也非常多。这里提供两篇参考文章： Hexo主题推荐 Hexo 好看的主题推荐 我用的是 NexT 主题，也是目前使用人数最多的主题（大概），主要当时只知道这一个，现在虽然眼馋其他主题但是懒得换，不过 NexT 主题的简洁大气也深得我心。
NexT 主题下载地址：theme-next/hexo-theme-next
打开 Blog 文件夹，右键 Git Bash，输入git clone https://github.com/theme-next/hexo-theme-next themes/next将 NexT 主题下载到目录 Blog/themes
打开 Blog 下的 _config.yml (称为站点配置文件)，找到并修改以下内容（注意冒号后都要有空格）：

# Site
title: ZCW_Blog			#标题
subtitle: ' '
description: ' '		#简介或者格言
keywords:
author: reman			#作者
language: zh-HK			#主题语言
timezone: Asia/Shanghai	#中国的时区

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主题改为next

主题语言可以在 themes/next/language 中查看，我选的是 zh-CN（简体中文），同时我在博客中加入了一键切换繁/简体的功能，具体可参考
next主题有四种： Muse 、 Mist 、 Pisces 、 Gemini ，预览可参考2019-03-06 NexT四种主题，跟现在的差别不是很大
我选的是 Gemini（默认主题是Muse），打开 Blog/themes/next/ 下的 _config.yml（称为主题配置文件），将你选的主题前的注释（#）删除就行了，注意只能选一个，不选的主题要注释掉，不然会报错

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

回到根目录 Blog 打开 Git Bash，分别输入如下三条命令：

hexo clean
hexo g
hexo d

完成后打开你的博客查看即可。
注：由于网络问题 hexo d 的时候可能会报错，hexo 三部曲多试几次就行了

NexT主题优化

Hexo+NexT配置优化指南