在Github上面搭建一个自己域名的Hexo博客

素颜马尾好姑娘i 2022-06-07 01:59 212阅读 0赞

## 前言 ##

在一次看到别人的博客主页，觉得设计很漂亮。但是由于自己对于前台这块没什么办法，煞是羡慕。偶然中发现这种样式是在Github上面搭建的，使用的是Next主题。于是便想自己也搭建一个，于是便去就去查询相关资料，在经历不少错误之后，终于搭建成功。  
由于当时搭建的时候，没怎么记载，而且当初用的也不太熟。在使用了3个多月之后，趁着国庆这个时间将本博文写出来。如有不妥，欢迎指教！

注:其实搭建一个自己域名的博客，最大的作用就是提升了逼格…

## 效果图: ##

![这里写图片描述][SouthEast]

## 一、配置Hexo环境 ##

### 1.下载并安装git ###

地址: [https://git-scm.com/downloads][https_git-scm.com_downloads]  
至于32位还是64位则看个人电脑情况选择了。  
如果不会使用，可以看下我之前的博文:[http://blog.csdn.net/qazwsxpcm/article/details/68946736][http_blog.csdn.net_qazwsxpcm_article_details_68946736]

### 2. 下载并安装Node.js ###

[http://nodejs.cn/][http_nodejs.cn]  
位数也依旧看个人电脑情况，安装成功之后，输入 node -v 和npm -v 可以查看是否安装成功。  
注意:安装成功后需要重启电脑。  
![这里写图片描述][SouthEast 1]

### 3. 配置hexo ###

#### 1，新建文件夹，然后右键电脑盘符，点击git base。如:E:\\Github\\hexo ####

![这里写图片描述][SouthEast 2]

#### 2， 输入: npm install hexo-cli -g 安装hexo ####

**hexo命令简单介绍**

$ hexo g #完整命令为hexo generate，用于生成静态文件
    $ hexo s #完整命令为hexo server，用于启动服务器，主要用来本地预览
    $ hexo d #完整命令为hexo deploy，用于将本地文件发布到github上
    $ hexo n #完整命令为hexo new，用于新建一篇文章

#### 3，进入Git Bash，输入hexo init 初始化仓库 ####

#### 4，安装依赖包 输入: npm install ，成功之后输入: hexo g 和 hexo s ####

![这里写图片描述][SouthEast 3]

#### 5，在浏览器输入:[http://localhost:4000/][http_localhost_4000] 可以查看本地预览 ####

![这里写图片描述][SouthEast 4]  
![这里写图片描述][SouthEast 5]  
注:因为我已经配置好了NexT主题，所以显示的是该主题。正常会显示的Hexo默认的主题，借用了网上的一张贴图作为范例。

## 二、Hexo的相关配置 ##

### 1.启用NexT主题 ###

在成功配置完环境之后，hexo的目录结构如下。  
![这里写图片描述][SouthEast 6]  
在 Hexo 中有两份主要的配置文件，其名称都是 \_config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。  
为了描述方便，在以下说明中，将前者称为 **站点配置文件**， 后者称为 **主题配置文件**。

我们打开**站点配置文件**， 找到 **theme** 字段，并将其值更改为 **next**。  
![这里写图片描述][SouthEast 7]  
成功配置之后，稍微等一下，然后再次使用 git base 启动hexo，输入hexo g 和 hexo s 便可以看到Next主题以及成功使用。具体可以看我上面的图片，这里还是使用借用的一张图。  
![这里写图片描述][SouthEast 8]

### 2.NexT相关配置 ###

#### 外观设置 ####

打开 **主题配置文件**，然后解除Scheme中的 \# 注释，选择适合自己的主题。

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
    Mist - Muse 的紧凑版本，整洁有序的单栏外观
    Pisces - 双栏 Scheme，小家碧玉似的清新

注意: 设置样式后面需要有一个空格！！！

![这里写图片描述][SouthEast 9]

#### 语言设置 ####

打开**站点配置文件** ，找到**language**，然后设置语音种类。  
目前 NexT 支持的语言如以下表格所示：  
语言 代码 设定示例

English en  language: en
    简体中文    zh-Hans language: zh-Hans
    Français    fr-FR   language: fr-FR
    Português   pt  language: pt or language: pt-BR
    繁體中文    zh-hk 或者 zh-tw  language: zh-hk
    Русский язык    ru  language: ru
    Deutsch de  language: de
    日本語 ja  language: ja
    Indonesian  id  language: id
    Korean  ko  language: ko

![这里写图片描述][SouthEast 10]

#### 菜单设置 ####

打开**主题配置文件**，找到**menu**，然后选择主菜单显示内容。  
![这里写图片描述][SouthEast 11]

NexT 默认的菜单项有（标注 的项表示需要手动创建这个页面）：  
键值 设定值 显示文本（简体中文）

home    home: / 主页
    archives    archives: /archives 归档页
    categories  categories: /categories 分类页 
    tags    tags: /tags 标签页 
    about   about: /about   关于页面 
    commonweal  commonweal: /404.html   公益 404

设置完之后，还需要设置对应菜单的相应的文本，也就是菜单的翻译。  
找到**languages/\{language\}.yml** ，然后编辑进行相应的说明就行了。  
如：设置的是语言是**language: zh-Hans** ,就打开**zh-Hans.yml**。  
![这里写图片描述][SouthEast 12]

![这里写图片描述][SouthEast 13]

#### 其它设置 ####

##### 头像设置 #####

在**主题配置文件** 中编辑 **avatar** 输入头像路径就行了。  
images 在hexo/public/images中。  
如: avatar: /images/xuwujing.png  
![这里写图片描述][SouthEast 14]  
![这里写图片描述][SouthEast 15]

至于**作者呢称**和**作者描述**在我之前的截图上以及说明了，这里就不再多说了。

##### 百度统计 #####

地址:[https://tongji.baidu.com/web/welcome/login][https_tongji.baidu.com_web_welcome_login]  
登录之后（没有则注册）,然后新增网站，输入域名就行，然后会出现一串js代码，复制hm.js? 后面那串统计脚本 id , 然后粘贴到 **主题配置文件** 中的**baidu\_analytics** 就行。

![这里写图片描述][SouthEast 16]

![这里写图片描述][SouthEast 17]

![这里写图片描述][SouthEast 18]

##### 社交链接 #####

编辑**主题配置文件** 中的 **social** 然后增加链接以及说明就行。  
例如：csdn: [http://blog.csdn.net/qazwsxpcm?viewmode=list][http_blog.csdn.net_qazwsxpcm_viewmode_list] 。  
![这里写图片描述][SouthEast 19]

##### 标签分类 #####

在站点目录下，打开git bash，输入 **hexo new page “categories”** 创建分类。  
输入:hexo new page “tags” hexo new page “about” 创建标签和关于。  
创建玩在站点目录下的source文件夹下，会新增一个categories、tags、about的文件夹，里面有一个index.md文件，打开之后更改说明为中文，那么显示的也为中文。  
comments可以设置为false，含义是打开分类页面，评论插件不显示。  
![这里写图片描述][SouthEast 20]  
![这里写图片描述][SouthEast 21]  
![这里写图片描述][SouthEast 22]

我的配置，可以从该地址查看：[https://github.com/xuwujing/xuwujing.github.io][https_github.com_xuwujing_xuwujing.github.io]

## 三、Hexo关联github以及将本地博客上传 ##

### 1. 在github上面创建仓库 ###

1，成功登录github后(未创建先行创建)，创建一个仓库，仓库名称格式为 youname.github.io youname 为用户名 。例如:xuwujing.github.io

2，创建成功之后，点击该仓库，选择setting，然后拖到GitHub Pages界面来, 然后选择Choose a theme，随便选择一个主题之后。再次点击setting来到GitHub Pages来，可以发现出现了一个路径，访问该路径，便可以访问所设置的仓库的界面了。  
注: 因为我已经成功设置了。所以使用一个test测试仓库，用于截图和说明。实际仓库名称不要使用这种！！！  
![这里写图片描述][SouthEast 23]  
![这里写图片描述][SouthEast 24]

### 2.Hexo关联Github ###

这个就和之前关联仓库的步骤差不多。

#### 设置git身份信息 ####

在hexo目录右键git base 输入:

git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"

![这里写图片描述][SouthEast 25]  
在站点配置文件 中加上仓库地址，注意要加上.git  
例如: git@github.com:xuwujing/xuwujing.github.io.git

### 3.发布博客 ###

首先新建一篇博文。  
如:hexo new post “Hello GitHub”  
就会在\\source\\ \_posts 将会看到 Hello GitHub.md 文件。  
要发布的博客放在在\\source\_posts路径下。博客推荐使用markdown编辑，后缀名为.md。  
![这里写图片描述][SouthEast 26]  
在发布之前，先编辑该博客，写点描述。

---
    title: Hello GitHub
    date: 2017-10-05 14:50:33
    categories: hello
    tags: [hello,haha]
    ---

![这里写图片描述][SouthEast 27]

然后输入:

hexo g 生成静态文件  
    hexo s  本地预览

成功之后如下图:  
![这里写图片描述][SouthEast 28]

然后输入:**hexo d** 发布到github上。  
成功之后输入youname.github.io路径便可以看到该博文了。

## 四、注册域名以及绑定到Github上 ##

首先登录阿里云，搜索域名或者在控制台找到域名。进入之后，首先查询你要申请的域名，如果查不到就表示可以注册。域名注册有很多后缀名，如果可以，推荐.com的。  
![这里写图片描述][SouthEast 29]  
![这里写图片描述][SouthEast 30]

成功申请域名之后，将域名和Github绑定，Github的IP地址是192.30.252.153或192.30.252.154。所以我们在填写解析的时候，就解析这个地址。至于Github是怎么找到我们的仓库的，这个在CNAME设置。  
以下来自百度经验  
进入域名解析之后  
点击【新增解析】；依次填写相应内容。  
“记录类型”选择A；”主机记录”填写www；”解析线路”选择默认；  
“记录值”填写github提供的IP地址，192.30.252.153或192.30.252.154；  
“TTL”默认10分钟，自己可以另行设置也可；  
最后点击【保存】。

域名成功解析之后，在你Github上面的仓库中创建CNAME，然后输入你申请域名的地址。然后你再输入你的域名就可以访问Github博客了。  
![这里写图片描述][SouthEast 31]  
![这里写图片描述][SouthEast 32]

## 五、错误问题解决方案 ##

### 1. FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 10, column 1: ###

检查\_config.yml内容，特别注意:后面需要有一个空格。

### 2.若出现这个错误:ERROR Deployer not found : github ###

则安装hexo git插件  
输入:npm install hexo-deployer-git –save

### 3.如果使用CNAME绑定域名之后，上传博客的时候，会将CNAME中的地址替换为日志，导致无法通过域名访问。 ###

解决办法:重新设置CNAME 中的域名地址。  
如果有更好的解决办法，请私信我。谢谢！

## 六、参考网址: ##

Hexo网站搭建: [http://opiece.me/2015/04/09/hexo-guide/][http_opiece.me_2015_04_09_hexo-guide]  
[https://xuanwo.org/2015/03/26/hexo-intor/][https_xuanwo.org_2015_03_26_hexo-intor]  
NextT主题使用: [http://theme-next.iissnan.com/getting-started.html][http_theme-next.iissnan.com_getting-started.html]  
NextT后续配置: [http://www.jeyzhang.com/next-theme-personal-settings.html][http_www.jeyzhang.com_next-theme-personal-settings.html]  
域名绑定博客: [https://jingyan.baidu.com/article/dca1fa6fa1e403f1a5405262.html][https_jingyan.baidu.com_article_dca1fa6fa1e403f1a5405262.html]  
Hexo问题解决: [http://xuanwo.org/2014/08/14/hexo-usual-problem/][http_xuanwo.org_2014_08_14_hexo-usual-problem]

[SouthEast]: /images/20220607/225e5beea7fd48cf8480207c542f38cc.png
[https_git-scm.com_downloads]: https://git-scm.com/downloads
[http_blog.csdn.net_qazwsxpcm_article_details_68946736]: http://blog.csdn.net/qazwsxpcm/article/details/68946736
[http_nodejs.cn]: http://nodejs.cn/
[SouthEast 1]: /images/20220607/fdf8f9724b7a47c6afc77a2efd47a843.png
[SouthEast 2]: /images/20220607/fe7421827a22490780aca4b5f4626627.png
[SouthEast 3]: /images/20220607/1796e5c4a7b945708274c880b4c220c3.png
[http_localhost_4000]: http://localhost:4000/
[SouthEast 4]: /images/20220607/6de59e0c23aa48a8a22e9fa0fced45f4.png
[SouthEast 5]: /images/20220607/286b703754854ba5bdc9ef6a7b1c7eac.png
[SouthEast 6]: /images/20220607/d4fbb368c7b4467484c035a1b4f14a5d.png
[SouthEast 7]: /images/20220607/aeeaf200bcc3424f9d0f060c053fef54.png
[SouthEast 8]: /images/20220607/4a9b19c2c9c64df588b4f3d8d4982316.png
[SouthEast 9]: /images/20220607/c9c05e92fd6349419bc7123347247c93.png
[SouthEast 10]: /images/20220607/48d868d5036d4eeabeebece41d4222e2.png
[SouthEast 11]: /images/20220607/fecdf26b7b9c4c9089c7f985603e381c.png
[SouthEast 12]: /images/20220607/db25d6ed07784d868db85fafb88a14ff.png
[SouthEast 13]: /images/20220607/5422d477ce614bc4b54b8c2fcc0904b8.png
[SouthEast 14]: /images/20220607/add575c3acce4e3e9521a9544b31e605.png
[SouthEast 15]: /images/20220607/ae1a5cba6a494ecc88a4e5bda34afff2.png
[https_tongji.baidu.com_web_welcome_login]: https://tongji.baidu.com/web/welcome/login
[SouthEast 16]: /images/20220607/5ad0c513c13f46128fd67bcf49a31aeb.png
[SouthEast 17]: /images/20220607/0409e4c8f62a41869576ed508a8fbd19.png
[SouthEast 18]: /images/20220607/cb45edb3fbb34d4f8b962c59c030ed1f.png
[http_blog.csdn.net_qazwsxpcm_viewmode_list]: http://blog.csdn.net/qazwsxpcm?viewmode=list
[SouthEast 19]: /images/20220607/08e9211d8b354db189bfb1e4135468f4.png
[SouthEast 20]: /images/20220607/51600217891e4dbcac6e5f8428e1d52f.png
[SouthEast 21]: /images/20220607/423e2738cb2c42fd98075cb36763c4cc.png
[SouthEast 22]: /images/20220607/a7481467841544b8a63081066dd8d813.png
[https_github.com_xuwujing_xuwujing.github.io]: https://github.com/xuwujing/xuwujing.github.io
[SouthEast 23]: /images/20220607/f2a92cee7db340f1941d4a6805fc23d7.png
[SouthEast 24]: /images/20220607/3ec7d93e93aa4d87a747831195d7b701.png
[SouthEast 25]: /images/20220607/6b3bfab18f5e438488538906436b140b.png
[SouthEast 26]: /images/20220607/a7149afed0c848a7a9c432a8c82a991e.png
[SouthEast 27]: /images/20220607/1a8bdb9e6a80458592b0c68b0c075aec.png
[SouthEast 28]: /images/20220607/b2d8d42d1cde443a99a97213541624ff.png
[SouthEast 29]: /images/20220607/1f376926a7b34461987b888b7234233d.png
[SouthEast 30]: /images/20220607/a9be112f501846689450515e26f4bc98.png
[SouthEast 31]: /images/20220607/7735820405a842aa8bc12382cd0f2b97.png
[SouthEast 32]: /images/20220607/dea5a5fb71af43e283a3ec86d38fa32b.png
[http_opiece.me_2015_04_09_hexo-guide]: http://opiece.me/2015/04/09/hexo-guide/
[https_xuanwo.org_2015_03_26_hexo-intor]: https://xuanwo.org/2015/03/26/hexo-intor/
[http_theme-next.iissnan.com_getting-started.html]: http://theme-next.iissnan.com/getting-started.html
[http_www.jeyzhang.com_next-theme-personal-settings.html]: http://www.jeyzhang.com/next-theme-personal-settings.html
[https_jingyan.baidu.com_article_dca1fa6fa1e403f1a5405262.html]: https://jingyan.baidu.com/article/dca1fa6fa1e403f1a5405262.html
[http_xuanwo.org_2014_08_14_hexo-usual-problem]: http://xuanwo.org/2014/08/14/hexo-usual-problem/