2020-04-29

我的博客建站之路

【2020.04】搭建博客–Github Pages和Hexo简明教程

摘要：这是一篇有关如何使用Github Pages和Hexo搭建自己独立博客的详尽教程，里面介绍了如何使用和配置Hexo框架，如何将Hexo部署到自己的Github项目中，域名注册，以及域名的绑定，还有我在搭建自己博客过程中所遇到的各种困难。

关于Github

一、Github的优点

GitHub是基于git实现的代码托管。git可能是目前最好用的版本控制系统了，非常受欢迎。
GitHub可以免费使用，并且快速稳定。
Github上面的世界很精彩，用久了你的眼界会开阔很多。

二、什么是Github Pages

Github Pages可以被认为是用户编写的、托管在github上的静态网页。

三、为什么要使用Github Pages

可以绑定你的域名(但暂时貌似只能绑定一个)。
简单快捷，使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。

主要步骤

安装git
安装Node.js
安装Hexo
注册GitHub
将HEXO部署到GitHUb

准备阶段

安装Git

Git下载地址：https://git-scm.com/download
进入Git官网，网站会自动检测你的系统，并推荐最新的发行版本给你下载。
(这里建议把推荐的版本号记好，后面用镜像下载时，可以直接选对应版本直接下载，提高效率）
下载后，开始安装，一路next,完成安装。
这个时候，在桌面点击鼠标右键（也可以在某个目录下，这个不一定的哟），你会发现多了个 git bash here
点击 git bash here
在弹出的窗口里，在命令行模式下，输入：
git --version
git –version
可以看到Git的版本号。
下载慢的话，可以使用淘宝镜像源地址：
https://npm.taobao.org/mirrors/git-for-windows/
第一小步完成。
安装Node.js

安装地址：https://nodejs.org/en/download/
镜像源：https://npm.taobao.org/mirrors/node
下载好之后开始安装，勾选协议，直接一路next,完成安装。
右键点击 Git bash here
输入node -v 按回车，可以看见当前node的版本。
至此，就已经完成了安装hexo的前期准备工作。

安装hexo

两个必备的应用程序安装完成后，我们使用npm安装hexo。

选择你要安装的盘，在目的盘的根目录下新建一个文件夹，把文件夹名字改成“blog”，再进入“blog”，（这个“blog”以后就是你的博客根目录了）在空白处右键点击git bash here,
在命令行输入：npm install -g hexo-cli

npm install -g hexo-cli
完成安装后，输入hexo -v可以看到hexo的版本。
接下来，我们输入hexo init初始化我们的博客站点。记住，这个“blog”目录就是你博客站点的根目录！！！ 这个blog文件夹初始为空目录，里面不能有文件。
然后，我们输入npm install，安装相关的依赖。
以后发布文章的有关操作，都是在这个根目录下操作，记住！可以直接在这里右键点击git bash here。
我们来试试输入hexo s，如果有防火墙提示访问限制，请允许它！
这时，会有一个链接提示:http://localhost:4000
打开浏览器，在地址栏粘贴这个链接，打开！
OK!我们的博客已经在本地搭建成功了！

新建完成后，指定文件夹的目录如下：

├── .deploy #需要部署的文件

├── node_modules #Hexo插件

├── public #生成的静态网页文件

├── scaffolds #模板

├── source #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里

—├── _drafts #草稿

—└── _posts #文章

├── themes #主题

├── _config.yml #全局配置文件

└── package.json #npm 依赖等

常用命令

hexo clean 清除缓存和已经生成的静态文件。
hexo g 生成静态文件。
hexo s 启动本地服务器，可以用本地链接查看效果。
hexo d 部署网站。

一般情况下，依次输入hexo clean、hexo g、hexo s后，用浏览器查看效果正确后，再hexo d就可以发布到服务器了。

现在我们只是在本地部署，别人并不能看到我们的博客，所以，接下来说一下怎样发布出去。

注册github账号

输入网站：https://github.com/
注意事项：这里起的用户名就是你的博客网站的名字，请考虑好你的名字！！！
（当然，后续我们也可以花钱买域名，自定义网址）
注册时，一步步正常走下来，
注册成功后，记得及时验证邮箱。

创建我们的博客仓库

这里我们选择创建仓库。Create a repository
在Repository name 选项里填写和用户名相同的前缀名.github.io
想要把我们电脑上的文件推送到github仓库里，我们还需要安装hexo-deployer-git
在本地博客的根目录下，右键点击git bash here
输入npm install hexo-deployer-git --save

我们如何让本地git项目与远程的github建立联系呢？用 SSH keys

配置SSH密钥

配置Github的SSH密钥可以让本地git项目与远程的github建立联系，让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步。操作如下：
第一步、看看是否存在SSH密钥(keys)

首先，我们需要看看是否看看本机是否存在SSH keys,打开Git Bash,并运行:

$ cd ~/. ssh

检查你本机用户home目录下是否存在.ssh目录

如果，不存在此目录，则进行第二步操作，否则，你本机已经存在ssh公钥和私钥，可以略过第二步，直接进入第三步操作。
第二步、创建一对新的SSH密钥(keys)

$ssh-keygen -t rsa -C “your_email@example.com“

这将按照你提供的邮箱地址，创建一对密钥

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/administator/.ssh/id_rsa): [Press enter]

直接回车，则将密钥按默认文件进行存储。此时也可以输入特定的文件名，比如/c/Users/administator/.ssh/github_rsa

接着，根据提示，你需要输入密码和确认密码（其实可以不用密码，都直接回车，所以每次push就只管回车就行了。）。相关提示如下：

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

输入完成之后，屏幕会显示如下信息：

Your identification has been saved in /c/Users/administator/.ssh/id_rsa.
Your public key has been saved in /c/Users/administator/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com

第三步、在GitHub账户中添加你的公钥

运行如下命令，将公钥的内容复制到系统粘贴板(clipboard)中。

clip < ~/.ssh/id_rsa.pub

接着：

登陆GitHub,进入你的Account Settings.

2.选择SSH Keys

3.粘贴密钥，添加即可

第四步、测试

可以输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

如果是下面的反馈：

The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张，输入yes就好，然后会看到：

第五步、设置用户信息

现在你已经可以通过SSH链接到GitHub了，还有一些个人信息需要完善的。 Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的，名字根据自己的喜好自己取，而不是GitHub的昵称。

$ git config –global user.name “filekey”//用户名
$ git config –global user.email “your_email@example.com“//填写自己的邮箱

第六步、SSH Key配置成功
第七部、修改博客配置文件_config.yml
deploy:
type: git
repo: git@github.com:filekey/filekey.github.io.git
branch: master
注意：上面的每个冒号后面最少要有一个空格，否则会出错！！！

第八步、绑定域名

GitHub Pages 默认提供的是 GitHub用户名.github.io（例如我的：filekey.github.io）作为博客访问地址，可设置绑定自定义域名

在博客项目目录的source文件夹中，创建一个CNAME文件(文件名是大写字母，并且没有后缀），存储预备使用的个人域名，如：
在source目录下
右键点击git bash here
再输入：
echo filekey.cn > CNAME

清理Hexo缓存并重新生成发布
hexo clean
hexo g -d

GitHub项目页面中Setting设置界面，到GitHub Pages部分确认域名无误

在域名提供商（如阿里云官网）中，注册自己的域名后，进入DNS设置界面，追加一条CNAME记录，这里指定以www前缀和没有前缀的的域名跳转到默认的github博客域名yourname.github.io。
再把域名的实名认证做完，等待半个小时左右，你的手机就会收到一个认证成功的短信。

分客