使用Hexo和Github Pages快速搭建个人博客

Posted 2020-11-10 Mipha

在编程路上，每天都在网上查看别人的博客，大牛的文章写得通俗易懂，同时博客网站也非常华丽。作为出入编程的一枚小白也想拥有这样一个自己的网站。那就立马去买一个域名了，在网上找教程来搭建。
搭建的过程还算比较顺利，没有遇到多大的问题，虽然这篇博客的内容也是从别人的博客东粘西补过来的，为什么要东粘西补呢，因为光照着一篇博客并不能顺利搭建，还需要其他博客来补充。
本博客的最大好处是只要阅读这一篇博客就能解决问题，这里找出了我踩过的雷坑，方便大家畅通无阻的搭建。

原材料

• 域名（自行购买）
• node.js（官网下载）
• git（官网下载）

• hexo。
  方法：git安装完成后，在桌面右键，点击Git Bash Here，输入npm命令

  npm install hexo-cli -g
  npm install hexo-deployer-git --save

  第一句是安装hexo，第二句是安装hexo部署到git page的deployer。

本地搭建Hexo静态博客

• 创建Hexo文件夹
  自己挑选一个目录建立一个文件夹（E:MyBlog），进入MyBlog文件夹下，右键点击Git Bash Here，进入Git命令框，执行以下操作，生成hexo模板

  hexo init

• 本地查看效果
  执行下面语句，执行完即可登录localhost:4000查看效果

  hexo generate
  hexo server

  也可以使用简写

  hexo g -s

  本地博客以及搭建起来，接下来需要把本地的博客发布到服务器上。

将博客部署到Github Page上

一、创建项目代码库

Github Pages是寄存在Github上面的，即需要在Github上创建一个新的项目。
登录自己的Github账户，点击New repository，需要注意的是填写Repository name时，名字的格式必须为xxx.github.io
xxx为自己的github的用户名，比如我的github名为ghq120，所以创建仓库名为ghq120.github.io

二、配置SSH密钥

配置Github的SSH密钥可以让本地git项目与远程的github建立联系，让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步。

生成及配置SSH不多做说明，丢出一个连接
SSH连接GitHub、GitHub配置ssh key
简单来说就是生成一个SSH密钥，然后在GitHub中添加密钥。
配置完成后，可以在git窗口中输入可查看是否设置成功

$ ssh -T [email protected]

显示如下即成功

三、将本地的Hexo文件更新到Github的库中

打开MyBlog文件夹下 _config.yml文件，找到deploy关键字，改如下配置

deploy:
  type: git
  repository: [email protected]:ghq120/ghq120.github.io.git
  branch: master

repository的内容将 ghq120 替换为自己的用户名
在MyBlog文件夹下执行：

$ hexo g -d

执行完输入github的账号密码，完成后可在浏览器输入https://gh120.github.io/ 访问博客。

若出现 ERROR Deployer not found: git错误说明deployer没有安装成功，将如下命令再安装一次即可：

npm install hexo-deployer-git --save

GitHub Page绑定自己的域名

一、CNAME文件

在source文件夹中新建一个CNAME文件（无后缀名），然后用文本编辑器打开，在首行添加你的网站域名，如

mipha.top

注意前面没有http://，也没有www，然后使用hexo g -d上传部署。

二、配置DNS

本人的域名是在阿里云买的，解析配置DNS使用的是DNSPOD 。
在配置页面加入这两条记录
其中记录值处的内容是ping你的ghq120.github.io域名，得到一个IP

因为是在DNSPOD处解析域名，所以需要在阿里云域名管理台处修改DNS如下

f1g1ns1.dnspod.net 
f1g1ns2.dnspod.net

三、等待生效

等10分钟解析生效后就可以通过在浏览器中输入自己的域名来访问GitHub Pages博客。