在Github上面搭建一个本身域名的Hexo博客

前言

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

注:其实搭建一个本身域名的博客，最大的做用就是提高了逼格…

效果图:

1、配置Hexo环境

1.下载并安装git

地址: https://git-scm.com/downloads
至于32位仍是64位则看我的电脑状况选择了。
若是不会使用，能够看下我以前的博文:http://blog.csdn.net/qazwsxpcm/article/details/68946736

2. 下载并安装Node.js

http://nodejs.cn/
位数也依旧看我的电脑状况，安装成功以后，输入 node -v 和npm -v 能够查看是否安装成功。
注意:安装成功后须要重启电脑。

3. 配置hexo

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

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

5，在浏览器输入:http://localhost:4000/ 能够查看本地预览

注:由于我已经配置好了NexT主题，因此显示的是该主题。正常会显示的Hexo默认的主题，借用了网上的一张贴图做为范例。

2、Hexo的相关配置

1.启用NexT主题

在成功配置完环境以后，hexo的目录结构以下。

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 自己的配置；另外一份位于主题目录下，这份配置由主题做者提供，主要用于配置主题相关的选项。
为了描述方便，在如下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

咱们打开站点配置文件， 找到 theme 字段，并将其值更改成 next。

成功配置以后，稍微等一下，而后再次使用 git base 启动hexo，输入hexo g 和 hexo s 即可以看到Next主题以及成功使用。具体能够看我上面的图片，这里仍是使用借用的一张图。

2.NexT相关配置

外观设置

打开 主题配置文件，而后解除Scheme中的 # 注释，选择适合本身的主题。

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

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

语言设置

打开站点配置文件 ，找到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

菜单设置

打开主题配置文件，找到menu，而后选择主菜单显示内容。

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。

其它设置

头像设置

在主题配置文件 中编辑 avatar 输入头像路径就好了。
images 在hexo/public/images中。
如: avatar: /images/xuwujing.png

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

百度统计

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

社交连接

编辑主题配置文件 中的 social 而后增长连接以及说明就行。
例如：csdn: http://blog.csdn.net/qazwsxpcm?viewmode=list 。

标签分类

在站点目录下，打开git bash，输入 hexo new page “categories” 建立分类。
输入:hexo new page “tags” hexo new page “about” 建立标签和关于。
建立玩在站点目录下的source文件夹下，会新增一个categories、tags、about的文件夹，里面有一个index.md文件，打开以后更改说明为中文，那么显示的也为中文。
comments能够设置为false，含义是打开分类页面，评论插件不显示。

个人配置，能够从该地址查看：https://github.com/xuwujing/xuwujing.github.io

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

1. 在github上面建立仓库

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

2，建立成功以后，点击该仓库，选择setting，而后拖到GitHub Pages界面来, 而后选择Choose a theme，随便选择一个主题以后。再次点击setting来到GitHub Pages来，能够发现出现了一个路径，访问该路径，即可以访问所设置的仓库的界面了。
注: 由于我已经成功设置了。因此使用一个test测试仓库，用于截图和说明。实际仓库名称不要使用这种！！！

2.Hexo关联Github

这个就和以前关联仓库的步骤差很少。

设置git身份信息

在hexo目录右键git base 输入:

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

在站点配置文件 中加上仓库地址，注意要加上.git
例如: git@github.com:xuwujing/xuwujing.github.io.git

3.发布博客

首先新建一篇博文。
如:hexo new post “Hello GitHub”
就会在\source\ _posts 将会看到 Hello GitHub.md 文件。
要发布的博客放在在\source_posts路径下。博客推荐使用markdown编辑，后缀名为.md。

在发布以前，先编辑该博客，写点描述。

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

而后输入:

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

成功以后以下图:

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

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

首先登陆阿里云，搜索域名或者在控制台找到域名。进入以后，首先查询你要申请的域名，若是查不到就表示能够注册。域名注册有不少后缀名，若是能够，推荐.com的。

成功申请域名以后，将域名和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博客了。

5、错误问题解决方案

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 中的域名地址。
若是有更好的解决办法，请私信我。谢谢！

6、参考网址:

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