使用 Hexo + Github 搭建自己的博客（图文教程）

水深无声 2022-04-05 02:57 305阅读 0赞

### 使用 Hexo + Github 搭建自己的博客（图文教程） ###

【提示】：博客地址是：`自己的短域名.github.io`

我的博客地址：[xpwi.github.io][]

如果之前有过创建仓库经历就会知道，自己的仓库是在：【短域名,github,io/仓库名】来访问的。而这个博客就是唯一一个没有路径的地址，就是前面的那个：自己的短域名.github.io

因面向初次使用者，故本篇博客较长，请根据目录一步一步来

### 一、环境准备 ###

1.在搭建博客之前需要先安装 Node.js 和配置好 Node.js 环境，如果已经安装，打开 cmd 命令行，使用下面命令检查：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70][]

2、安装 Git 和配置好 Git 环境，安装成功的象征就是在电脑上任何位置鼠标右键能够出现如下两个选择  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1][]

如果有环境变量，在 CMD 中使用下面命令检查：  
![20181210181744192.png][]

### 二、准备 GitHub 仓库 ###

*  1.先注册自己的 GitHub 账号： [https://github.com/][https_github.com]
 *  2.注册之后会有自己设置的小域名，当然短小、好记为好
 *  3.创建一个仓库  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2][]
 *  4.仓库的名称是【自己的短域名+`.github.io`】，且勾选上 Initialize this repository with a RENAME 。  
    【提示】：这个库这能有一个。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3][]
 *  5.博客的地址在可以看到  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4][]  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5][]
 *  6.创建仓库以后，立即可能看不到效果，需要 3 分钟左右吧，访问地址就会有：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 6]

### 二、Hexo 的安装和使用 ###

1.安装 Hexo，在自己认为合适的地方创个文件夹，我是在 D:/space/blog 目录。然后通过命令行进入到该文件夹里面。  
2.使用下面命令安装 hexo：

npm install hexo -g

3.检查是否安装成功：

hexo -v

操作截图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 7][]  
4.然后通过命令行进入到想要存放博客文件的目录  
5.输入 hexo init，初始化该文件夹：  
（如果自己停了卡住了，就敲回车，比较慢，耐心等待）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 8]  
最后会有一个：  
![在这里插入图片描述][20181210184401553.png]

6.安装做依赖的模块，执行命令：npm install  
![在这里插入图片描述][20181210184511237.png]  
7.下载欢迎 demo 体验 Hexo，执行命令：hexo g  
![在这里插入图片描述][20181210185529946.png]  
8.开启服务器，执行命令：hexo s，访问提示的网址：

http://localhost:4000/

![在这里插入图片描述][20181210185749431.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 9]

假如页面一直无法跳转，那么可能端口被占用了。此时我们 ctrl+c 停止服务器，接着输入“hexo server -p 新端口号”来改变端口号，再访问新地址就可以了。

9.然后安装一个 git 扩展，先按（Ctrl+C）终止服务器，使用命令：

npm install hexo-deployer-git --save

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 10]

### 三、修改 \_config.yml 文件 ###

1.打开自己的 GitHub 库，点击【Clone or download】>【切换为SSH】>拷贝地址待用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 11]

2.打开博客的本地存放目录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 12]

3.修改 \_config.yml 文件，在最后面做如下配置：  
【注意】yml 语法：必须在冒号后有空格

![在这里插入图片描述][20181210192245649.png]

### 四、配置 GitHub 的 SSH key ###

1.由于你的本地 Git 仓库和 GitHub 仓库之间的传输是通过 SSH 加密的，所以，需要一点设置

2.创建 SSH Key。在用户主目录下【C盘---->用户/user---->Administrator（自己的用户名）】，看看有没有 .ssh 目录，如果有，再看看这个目录下有没有 id\_rsa 和 id\_rsa.pub 这两个文件，如果已经有了，可直接跳到下一步。如果没有，打开 Shell（Windows下打开Git Bash），创建 SSH Key：

ssh-keygen -t rsa -C "xpwi@qq.com"

一直回车就可以，也不必要设置密码  
如果一切顺利的话，可以在用户主目录里找到 .ssh 目录，  
里面有 id\_rsa 和 id\_rsa.pub 两个文件，这两个就是 SSH Key 的秘钥对，  
id\_rsa 是私钥，不能泄露出去，id\_rsa.pub 是公钥，可以放心地告诉任何人。

3.登陆 GitHub，打开 “Settings”，“SSH Keys” 页面，“New SSH key”，“粘贴公钥”：

![20181126223902698.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 13][]

> **为什么 GitHub 需要SSH Key呢？因为GitHub需要识别出你推送的提交确实是你推送的，而不是别人冒充的，而Git支持SSH协议，所以，GitHub只要知道了你的公钥，就可以确认只有你自己才能推送。  
> 当然，GitHub允许你添加多个Key。假定你有若干电脑，你一会儿在公司提交，一会儿在家里提交，只要把每台电脑的Key都添加到GitHub，就可以在每台电脑上往GitHub推送了。  
> 【友情提示】：在GitHub上免费托管的Git仓库，任何人都可以看到喔（但只有你自己才能改）**

### 五、新建博客并上传到 GitHub 服务器 ###

1.新建一篇博客，在 cmd 执行命令：hexo new post “博客名”  
![在这里插入图片描述][20181210193744112.png]  
会在 blog\\source\_posts 目录下生成一个文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 14]

2.编辑 [firstblog.md][] 文件（markdown 文件）：

---
    title: firstblog
    date: 2018-12-10 19:37:18
    tags:
    ---
    ### 肖朋伟的第一篇博客
    
     - 博客地址：xpwi.github.io

3.部署到 GitHub，使用命令：hexo d -g  
![在这里插入图片描述][20181210194709434.png]

4.然后你会发现，在博客库中多了很多东西：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 15]

5.访问博客地址，查看：

**【注意】（需要一点时间部署，博主大概 3 分钟后才看到，不要着急）**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 16]

6.当然我们现在只是使用了默认的主题，更换主题请跳转 ！

### 更多文章 ###

*  [Hexo 安装和替换主题、自定义博客主题][Hexo]

转载请注明出处

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

[xpwi.github.io]: http://xpwi.github.io
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70]: /images/20220405/33016946dd0441409fa4cdfa4cdaa24c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1]: /images/20220405/cf64c3587bbd472db858d1c311d75fb3.png
[20181210181744192.png]: /images/20220405/4c756515f64b4b3497fed8f167c69c8a.png
[https_github.com]: https://github.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]: /images/20220405/392cff1875d0488fae3694aec750675f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3]: /images/20220405/df3422db505f42f799fa1ae1788c6233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4]: /images/20220405/553b8ab7e2df490ba907f4f4139fc596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5]: /images/20220405/f338836bc9314ec0b681a44dff3f5d82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 6]: /images/20220405/583e7eb7d057497db544618665e4473b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 7]: /images/20220405/e5bbede07e924e5da568286b57dc0189.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 8]: /images/20220405/01387e2693354197bc9a57531ece2735.png
[20181210184401553.png]: /images/20220405/976bc87dc4e14a0ba96b6deff36d3b06.png
[20181210184511237.png]: /images/20220405/3ac9a9a9a4de49e9b68045a921194a83.png
[20181210185529946.png]: /images/20220405/5ca31e9c1c44437f824a44ec2ef64c8e.png
[20181210185749431.png]: /images/20220405/ecbb1115d8fb449c9aa9557e2ccf158f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 9]: /images/20220405/06a6b2ad18244ffd85c70b0b085a1875.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 10]: /images/20220405/c08ac52ba90e4a5d9aa1263f69978563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 11]: /images/20220405/e3a07440de934b1eb75a5c6a47073bc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 12]: /images/20220405/a14b419c26194e42823a7aab6d7d53bb.png
[20181210192245649.png]: /images/20220405/083f8397e3ac48fbab2b4fe4ec216e03.png
[20181126223902698.png]: https://img-blog.csdnimg.cn/20181126223902698.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 13]: /images/20220405/f6127aa19bc84c59be70cbfa87c52e0d.png
[20181210193744112.png]: /images/20220405/2ce2feb828a34311ac9c5b2cb85f920c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 14]: /images/20220405/c98aa60a87fd446f8473d39d296dac8f.png
[firstblog.md]: http://firstblog.md
[20181210194709434.png]: /images/20220405/d506b31db87f464b89ef87069ee61b47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 15]: /images/20220405/5c7407ae2bdb4455a0b3a792654ff420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 16]: /images/20220405/cd5d2c52613a4e7ab3595b7c9bf7b929.png
[Hexo]: https://blog.csdn.net/qq_40147863/article/details/84946894