还没有自己的个人博客? 来手把手教你用GitHub+Hexo搭建只属于你的世界（二）~ ❤️

前言

所以本文讲的都是在本系统中是如何搭建的。即将毕业的我，突然感觉该需要一个东西来记录下我的所学所想。大概拖拖拉拉的用了好多天才最后搭建好,主要是提高下自己的功力。

下面我将分步详细介绍如何用Hexo和GitHubPages来搭建Blog。个人能力有限，以下流程有什么不懂的或者有好的知识与我分享欢迎联系我，大家共同进步。

What is Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题
生成静态网页。出自台湾大学生 tommy351 之手。是一个基于Node.js的静态博客程序。另外还有一个好处：使用 Hexo + GitHub 搭建博客
不需要购买域名和服务器，由 Github 提供域名和网站页面空间。支持多种框架主题，我选择的是Next主题，简约。

What is GitHub

GitHub 是一个面向开源及私有 软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管。有足够的免费空间（1G），
自己管理资料，保存可靠。2018年10月19日，欧盟正式无条件批准了微软以75亿美元收购GitHub。

---

搭建前准备工作

1. Hexo官方文档  （具体对hexo有什么问题可以查看文档）
2. Git  （点进去可直接下载最新版本，具体的安装流程）
3. Node.js  （选个最新的下载就好，具体安装流程）
4. Next主题官网  （一些配置讲解的还是比较详细）
5. 其他的一些主题可供参考  （根据自己的喜好风格，选择自己的主题）
6. Notepad++（我用的是这个来编写Markdown文章的，如果文章出现乱码，可以用记事本打开另存为，然后选择UTF-8编码就好了）

---

开始搭建

说了那么多，准备工作也可以了，现在撸起袖子干吧！

安装环境依赖（Git and Node.js）

首先把前面说的Git和Node.js安装到电脑上（Windows系统），教程也有，对于聪明的你来说，不会难倒你。这是我们搭建博客基层的软件。以下所有的命令输入都是在Git软件里面进行的。

---

安装Hexo

在你安装好Git软件后，你可以在电脑空白地方或者桌面上右击鼠标，就会看到Git GUI Here和Git Bash Here，然后在你想把博客源文件
放的电脑哪个位置，在里面创建个文件夹用于保存Hexo生成的博客内容（文件夹名可为myblog）。
然后进入该文件夹，空白位置右击，然后点击Git Bash Here，在里面输入

npm install -g hexo-cli

接着输入hexo -v然后输出以下内容就表示安装成功了（结果有可能不一样因为版本问题，但不影响使用）

$ hexo -v
hexo: 3.7.1
hexo-cli: 1.1.0
os: Windows_NT 10.0.10240 win32 x64
http_parser: 2.7.0
node: 7.0.0
v8: 5.4.500.36
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 51
openssl: 1.0.2j

如果没有报错，就表示安装成功了。接下来继续输入：

hexo init  # 初始化组件

回车后npm就会自动安装博客所需的组件了，你要做的就是等待，等全部安装完就可以了。这时你就看到文件夹里会出现以下目录结构：

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

验证以下hexo是否安装成功，还是在这个文件夹里右击找到Git Bash Here在里面输入命令

hexo g

等待加载完然后在输入命令

hexo s

出现这种样式，就启动成功了

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

然后打开你的浏览器，在网址栏里输入http://localhost:4000（默认端口为4000）。就会看到博客的原始状态，也就证明安装成功了如下图所示：

注意：有可能会发生这种情况，hexo安装没错，也能成功运行，启动也可以，就是不能访问。原因是：那是你的电脑端口被占用了，hexo默认的端口是4000，你应该换个端口运行，可换成hexo s -p 5000就可以访问了。

运行成功后，就在刚刚的Git Bash Here对话框中按键盘上的Ctrl+c停止服务，浏览器就不能浏览了。到此整个hexo搭建的博客结束了。此时感觉自己小有成就感。

---

部署到GitHub

首先你需要创建一个Github：https://github.com/账号。在你注册时，一定要记住你使用的注册的邮箱，GitHub大多数都是通过邮箱发送消息的。

申请成功后，会有邮箱通知，验证下就可以了。

创建代码仓库

这时用我们自己的GitHub用户名建立仓库，http://username.github.io这样的用户或访问站点，每个用户名只能建立一个。
首先，在保证登录的情况下，我们点击右上角的+号，点击New repository,新建一个仓库

进入后，在Repositoty name输入框里填写自己的用户名.github.io。例如我的用户名为xiayunhu，则填写xiayunhu.github.io

随后选择Setting进入设置，找到Github Pages如下：

然后我们需要任意选择一个主题，点击Choose a theme，然后选择好后，页面会跳转到仓库里如图所示：

此时你再打开Setting，我们会看到你开启了GitHub Pages之后得到的域名如下：

现在你可以使用https://UserName.github.io，访问自己的博客网站了。关于更多Github的使用和介绍，大家可以去菜鸟教程上或者百度自行了解。

配置SSH

本地博客和Github都做好了，接下来我们如何将本地Git项目和Github连接起来？就是用SSH。还是在博客文件夹里右击打开Git Bash Here输入以下命令

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再回车，看到下面的图的结果，就证明配置成功了。

注意，问题来了哦，当你输入yes后，有可能会提示如下信

因为大多数的情况是github账号没有添加ssh公钥信息，这是打开GitHub网站，在确保登录的情况下，找到网站的右上角找到Settings

点进去，在左边找到SSH and GPG keys后，点进去右上角找到New SSH key点进去后如下图所示：

如图片中的key提示，我们要原样复制~/.ssh/id_rsa.pub文件的内容。如果没有该文件在Git Bash Here里输入以下命令

ssh-keygen -t rsa

然后一直回车结束，然后在C盘的C:\Users\Administrator.ssh里找到id_rsa.pub文件，用记事本打开，Ctrl+A -> Ctrl+C在New SSH key里面Ctrl+V粘贴，点击Add SSh key保存就可以了。最后再输入

ssh -T git@github.com

回车就OK了。

将本地文件部署到GitHub

在把本地仓库传到github上去之前，还需要设置username和email，因为github每次commit都会记录他们。

$ git config --global user.name "your name"     #仓库的名字
$ git config --global user.email "your_email@youremail.com"     #你的邮箱

设置完后，我们每次使用hexo d命令时就不用每次都输入密码了。
接下来我们就要修改hexo中的_config.yml文件（也就是站点配置文件）如下图所示:

找到文件里面的deploy标签，改成如下列所示，Ctrl+S保存，此时要注意，冒号后边都要加上一个空格，否则会报错的。

  deploy:
		  type: git
		  repo: git@github.com:xiayunhu/xiayunhu.github.io.git
		  branch: master

然后在文件夹里运行Git Bash Here输入以下命令

 npm install hexo-deployer-git --save

再依次输入

hexo clean
hexo generate  #可简写hexo g
hexo deploy    #可简写hexo d

出现以下提示

那么恭喜你，个人博客已经部署到GitHub上了。你可以去你的GitHub仓库查看是否有信息，稍微等待一下就可以访问http://your_user_name.github.io（your_user_name也就是你的仓库名字），此时你就可以看到你的个人博客了。

---

将自己的域名和GitHub Pages的空间绑定

我们现在可以通过本地浏览或者GitHub Pages提供的域名访问了，但总感觉不是自己的东西，于是我就自己申请了一个域名，来浏览自己的博客，这样在介绍自己的博客的时候，明显的高大尚许多。我是在腾讯云的网站上申请的，需要备案（比较麻烦，需要半个多月），你也可以在阿里云上申请或者其他的地方购买，应该不腾讯云快，我介绍的是腾讯云上申请的域名。

申请域名

此时要注意的是：不需要购买服务器
进入到腾讯云的官网,在产品一栏，找到域名注册，这样就可以注册了，不同的域名价格不一，自行找个好记得就好。

具体备案，根据里面的流程自行备案。等备案好，然后对域名进行解析：

点击添加解析，记录类型选A或CNAME，A记录的记录值就是ip地址，github(官方文档)提供了两个IP地址，192.30.252.153和192.30.252.154，这两个IP地址为github的服务器地址，两个都要填上，解析记录设置两个www和@，线路就默认就行了，CNAME记录值填你的github博客网址。如我的是xiayunhu.github.io。

这些全部设置完成后，此时你并不能要申请的域名访问你的博客。接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件，不带任何后缀，里面添加你的域名信息，如：www.xyhwh.com。
注意搭建完成访问出现404 ：你认为配置没有问题，那么可能只是你的浏览器在捣鬼，可尝试清除浏览器缓存再访问或者换个浏览器访问。应该就解决了。

GitHub Pages里配置域名

进入GitHub，然后找到Settings如下图所示：

然后往下找，找到GitHub Pages一栏如图所示：

这样整个用Hexo+GitHub搭建的博客到现在就搭建完成了。

---

后记

以上所述，就是搭上建博客的全部流程，如果你有什么问题或者文章有错的地方，欢迎在下面留言。具体的主题配置，将会在下节详细介绍。

---

参考的资料：

Hexo中文文档
Next主题使用文档

想要获取更多的学习资料和学习交流，请关注微信公众号：码上言，谢谢大家的支持！

​

​

​