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

r囧r小猫 2022-08-29 00:18 106阅读 0赞

## 前言 ##

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

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

### 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 1]  （具体对hexo有什么问题可以查看文档）
2.  [Git][]  （点进去可直接下载最新版本，具体的[安装流程][Link 2]）
3.  [Node.js][]  （选个最新的下载就好，具体[安装流程][Link 3]）
4.  [Next主题官网][Next]  （一些配置讲解的还是比较详细）
5.  [其他的一些主题可供参考][Link 4]  （根据自己的喜好风格，选择自己的主题）
6.  [Notepad++][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][http_localhost_4000]（默认端口为4000）。就会看到博客的原始状态，也就证明安装成功了如下图所示：  
![“hexo搭建成功的第一个页面”][hexo]

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

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

--------------------

## 部署到GitHub ##

首先你需要创建一个Github：[https://github.com/][https_github.com]账号。在你注册时，一定要记住你使用的注册的邮箱，GitHub大多数都是通过邮箱发送消息的。  
![“hexo搭建成功的第一个页面”][hexo 1]  
申请成功后，会有邮箱通知，验证下就可以了。

### 创建代码仓库 ###

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

![“hexo搭建成功的第一个页面”][hexo 2]  
进入后，在Repositoty name输入框里填写自己的**用户名.github.io**。例如我的用户名为xiayunhu，则填写**xiayunhu.github.io**

![“hexo搭建成功的第一个页面”][hexo 3]  
随后选择Setting进入设置，找到Github Pages如下：

![“hexo搭建成功的第一个页面”][hexo 4]  
然后我们需要任意选择一个主题，点击Choose a theme，然后选择好后，页面会跳转到仓库里如图所示：

![“hexo搭建成功的第一个页面”][hexo 5]  
此时你再打开Setting，我们会看到你开启了GitHub Pages之后得到的域名如下：

![“hexo搭建成功的第一个页面”][hexo 6]  
现在你可以使用`https://UserName.github.io`，访问自己的博客网站了。关于更多Github的使用和介绍，大家可以去[菜鸟教程][Link 5]上或者百度自行了解。

### 配置SSH ###

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

ssh -T git@github.com

如图所示：  
![“hexo搭建成功的第一个页面”][hexo 7]  
输入命令回车，然后你会看到这样的反馈

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再回车，看到下面的图的结果，就证明配置成功了。  
![“hexo搭建成功的第一个页面”][hexo 8]

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

![“hexo搭建成功的第一个页面”][hexo 9]  
因为大多数的情况是github账号没有添加ssh公钥信息，这是打开GitHub网站，在确保登录的情况下，找到网站的右上角找到Settings  
![“hexo搭建成功的第一个页面”][hexo 10]  
点进去，在左边找到`SSH and GPG keys`后，点进去右上角找到`New SSH key`点进去后如下图所示：  
![“hexo搭建成功的第一个页面”][hexo 11]

如图片中的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文件（也就是站点配置文件）如下图所示:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70]  
找到文件里面的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

出现以下提示  
![“hexo搭建成功的第一个页面”][hexo 12]  
那么恭喜你，个人博客已经部署到GitHub上了。你可以去你的GitHub仓库查看是否有信息，稍微等待一下就可以访问`http://your_user_name.github.io`（your\_user\_name也就是你的仓库名字），此时你就可以看到你的个人博客了。

--------------------

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

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

### 申请域名 ###

**此时要注意的是：不需要购买服务器**  
进入到[腾讯云的官网][Link 6],在产品一栏，找到域名注册，这样就可以注册了，不同的域名价格不一，自行找个好记得就好。  
![“hexo搭建成功的第一个页面”][hexo 13]  
具体备案，根据里面的流程自行备案。等备案好，然后对域名进行解析：  
![“hexo搭建成功的第一个页面”][hexo 14]  
点击添加解析，记录类型选A或CNAME，A记录的记录值就是ip地址，github(官方文档)提供了两个IP地址，192.30.252.153和192.30.252.154，这两个IP地址为github的服务器地址，两个都要填上，解析记录设置两个www和@，线路就默认就行了，CNAME记录值填你的github博客网址。如我的是xiayunhu.github.io。  
![“hexo搭建成功的第一个页面”][hexo 15]  
这些全部设置完成后，此时你并不能要申请的域名访问你的博客。接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件，不带任何后缀，里面添加你的域名信息，如：www.xyhwh.com。  
注意搭建完成访问出现404 ：`你认为配置没有问题，那么可能只是你的浏览器在捣鬼，可尝试清除浏览器缓存再访问或者换个浏览器访问。`应该就解决了。

### GitHub Pages里配置域名 ###

进入GitHub，然后找到Settings如下图所示：  
![“hexo搭建成功的第一个页面”][hexo 16]  
然后往下找，找到GitHub Pages一栏如图所示：  
![“hexo搭建成功的第一个页面”][hexo 17]  
这样整个用Hexo+GitHub搭建的博客到现在就搭建完成了。

--------------------

## 后记 ##

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

--------------------

参考的资料：

> [Hexo中文文档][Hexo]  
> [Next主题使用文档][Next]

想要获取更多的学习资料和学习交流，请关注微信公众号：码上言，谢谢大家的支持！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 1]

[Link 1]: http://www.xyhwh.cn
[Hexo]: https://hexo.io/zh-cn/docs/
[Markdown]: http://www.markdown.cn/
[GitHub]: http://github.com/
[Hexo 1]: https://hexo.io/zh-cn/docs/index.html
[Git]: https://git-scm.com/download/win
[Link 2]: https://jingyan.baidu.com/article/020278117cbe921bcc9ce51c.html
[Node.js]: https://nodejs.org/en/
[Link 3]: https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html
[Next]: http://theme-next.iissnan.com/
[Link 4]: https://hexo.io/themes/
[Notepad]: https://notepad-plus-plus.org/
[http_localhost_4000]: http://localhost:4000/
[hexo]: /images/20220829/9334c966fc364f0fb9f22f77881f7f0f.png
[https_github.com]: https://github.com/
[hexo 1]: /images/20220829/00ec95a226794dfbbc241bab4f3c38ef.png
[hexo 2]: /images/20220829/547c7cec85e74bc9aaefb1f0bab320e7.png
[hexo 3]: /images/20220829/75c9a08dff764e14b4e323a0a030f317.png
[hexo 4]: /images/20220829/8e7efa2d8e484041a668f86b85bb5a70.png
[hexo 5]: /images/20220829/b2a54ef33133477c875479c66f1430a1.png
[hexo 6]: /images/20220829/5cdbde4af77541af861046a7b0f34fe5.png
[Link 5]: http://www.runoob.com/w3cnote/git-guide.html
[hexo 7]: /images/20220829/ffff823251de4f9daee493a1a45015d3.png
[hexo 8]: /images/20220829/eb4e7bc481ba4660843b2a6c7e653648.png
[hexo 9]: /images/20220829/31f3e30368114d7d96c43b4372d11058.png
[hexo 10]: /images/20220829/9daf0322740840559cb3933423e5a872.png
[hexo 11]: /images/20220829/7af58545fae942d78df9f908ff790460.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70]: /images/20220829/bab4d6aaca7e4fa8b2a079ef15139821.png
[hexo 12]: /images/20220829/bda87578d598494d9be7f855037c8125.png
[Link 6]: https://cloud.tencent.com
[hexo 13]: /images/20220829/7c419c7329a54184a90e763608b88c58.png
[hexo 14]: /images/20220829/ddba31dd19544ef2a158900adb7ad3dc.png
[hexo 15]: /images/20220829/b4f76bce7a3c4237a8a5c91dce3ada90.png
[hexo 16]: /images/20220829/d679463308aa4713aac5c4ad2313ba63.png
[hexo 17]: /images/20220829/1a3e4dd3dccb4dd88ac78f7def6c4592.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 1]: /images/20220829/a6b29c64c617486bbd86308661637c6d.png