Github+Hexo搭建个人博客

作者: 日居_月诸 | 来源:发表于2018-06-08 00:02 被阅读1247次

1、准备工作

1.1、git

1.1.1、github

首先注册、登录
uername 最好都用小写，因为最后建立的博客地址是：http://username.github.io；邮箱十分重要，GitHub 上很多通知都是通过邮箱的。

1.1.2、创建Repository

然后右上角选择 Create a new repository
Repository 名字应该是http://username.github.io。 (username与你的注册用户名一致,这个就是你博客的域名了)
其他的可以选择添加一些描述也可以选择默认什么也不添加，点击creat repository

1.1.3、安装git

Windows：下载并安装 git 。
Mac：使用 Homebrew, MacPorts ：brew install git;或下载安装程序安装。
Linux (Ubuntu, Debian)：sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core
检验是否安装成功：

$ git version

安装 Git waylau/git-for-win: Git for Windows. 国内直接从官网下载比较困难，需要翻墙。这里提供一个国内的下载站，方便网友下载
https://github.com/waylau/git-for-win
Git教程这里有廖雪峰老师的教程，非常好。
安装完成后，在开始菜单里找到“Git”->“Git Bash”，名称和邮箱是Github上的

1.2、安装node.js

安装 Node.js
去 nodejs 官网 https://nodejs.org/en/ 下载所需系统的安装包，并根据提示安装即可。检验是否安装成功：

$ node -v

1.3、安装hexo

上述两个必备程序安装成功之后，只需要通过npm便可以完成Hexo的安装了。
$ npm install -g hexo-cli或$ npm install -g hexo
至此，环境配置就完成了，可以开始搭建博客啦！

2、搭建博客

2.1、创建独立博客项目文件夹

$ hexo init blog

稍微等待下，速度有点慢。成功提示
INFO Start blogging with Hexo!

2.2、安装依赖包

$ npm install

2.3、本地查看

因为你初始化hexo 之后source目录下自带一篇hello world文章, 所以直接执行下方命令
$ hexo generate 或 $ hexo g //每次进行相应改动都要hexo g 生成一下

$ hexo server //启动本地服务器或 $ hexo s //启动服务预览
现在已经搭建好本地的 Hexo 博客了，执行完下面的命令就可以到浏览器输入 localhost:4000 查看到啦
在浏览器输入 http://localhost:4000/ 就可以看见网页和模板了
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

3、配置SSH keys

ssh keys就是用来使本地git 项目与github联系

重新打开CMD

3.1、检查SSH keys的设置

首先要检查自己电脑上现有的 SSH key：

$ cd ~/. ssh

如果显示“No such file or directory”，说明这是你第一次使用 git

3.2、生成新的 SSH Key：

$ ssh-keygen -t rsa -C "邮件地址@youremail.com" //ssh-keygen -t rsa -C "Github的注册邮箱地址"
【提示1】这里的邮箱地址，输入注册 Github 的邮箱地址；
【提示2】「-C」的是大写的「C」
窗口会显示:
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
然后系统会要你输入密码：
Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>
(在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。)

注意：输入密码的时候没有输入痕迹的，不要以为什么也没有输入。

一路Enter过来，得到信息：
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
看到这样的界面，就成功设置ssh key了.

3.3、添加SSH Key到GitHub

在本地文件夹找到id_rsa.pub文件，看上面已经告诉你存在哪里了
没找到的勾选一下文件扩展名隐藏的项目
在.ssh文件夹里找到该文件，用记事本或文本编辑器打开这个文件
Ctrl + a复制里面的所有内容，
然后进入Sign in to GitHub：你的github主页
点击头像后边的箭头,选Settings
进入设置界面后在左侧选SSH and GPG keys
New SSH key //新建一个SSH key
Title：blog //Title最好写，随便写。网上有说不写title也有可能后期出现乱七八糟的错误
Key：输入刚才复制的(Key部分就是放刚才复制的内容啦)
点击添加Add SSH key

3.4、测试

git bash 里输入以下代码不要改任何一个字我就是自作聪明以为代表的是自己注册时候的邮箱然后...

$ 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回车
Enter passphrase for key '/c/Users/lenovo/.ssh/id_rsa':
输入刚才设置的密码回车

3.5、设置用户信息

现在已经可以通过 SSH 链接到 GitHub 啦!当然还需要完善一些个人信息:

$ git config --global user.name "username"//输入注册时的username
$ git config --global user.email  "yourname@yourmail.com"//填写注册邮箱

GitHub 也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的，名字必须是你的真名，而不是GitHub的昵称。

4、配置博客

_config.yml是配置文件，这个文件我们会经常用到，后面也会介绍具体可以配置哪些信息。
source是资源文件夹，用来存放我们的markdown文件。
themes文件夹是用来放置主题的
博客名字及作者信息：_config.yml
个人介绍页面：about.md
代表作页面：milestone.md

4.1、配置_config.yml

title: **My Blog** #博客名
subtitle: to be continued... #副标题
description: My blog #给搜索引擎看的，对网站的描述，可以自定义
author: **Yourname** #作者，在博客底部可以看到
email: yourname@yourmail.com #你的联系邮箱
language: **zh-CN** #中文。如果不填则默认英文
timezone: Asia/Shanghai
# URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
# Writing 文章布局、写作格式的定义，不修改
# Archives 默认值为2，这里都修改为1，相应页面就只会列出标题，而非全文
# Server 不修改
# Date / Time format 日期格式，可以修改成自己喜欢的格式
# Pagination 每页显示文章数，可以自定义，贴主设置的是10
# Disqus Disqus插件，我们会替换成“多说”，不修改

# Extensions 这里配置站点所用主题和插件，暂时默认

4.2、配置 Deploy

接下来配置 GitHub 设置，类型设置为 git ，指定好 repo 地址，branch 必须设置为master，因为 GitHub Page 只会从 mater 分支生成。（注意有坑：这里我们需要单独设置好在 GitHub 上使用 name 和 email ，否则将会使用 global 的user.name 和 user.email ，囧~~）：
# Deployment 站点部署到 github 要配置

deploy:
  type: git //type字段对应的是部署的服务器类型，我们在这边填写git即可
  repository: https://github.com/username/username.github.io.git 
或 repo: username/username.github.io // 创建的github仓库的地址
或 repo: git@github.com:username/username.github.io.git
  name: username
  email: username@gmail.com
  branch: master

4.3、推送到 github

4.3.1、确保 git 部署

完成上述配置后，在终端执行

$ npm install hexo-deployer-git --save # 安装该工具

这个操作主要是为了把我们写好的文章部署到 github 服务器上并可以被别人浏览。

题外话，这里简单说一下 hexo-deployer-git 插件的工作流程：当执行部署操作的时候，首先会自动初始化 git 仓库（位置在 .deploy_git 中），并关联到指定 repo 与 branch ，后续 public 文件夹中自动生成的页面代码将会拷贝至此目录中进行代码管理。若修改了 name 和 email ，需要删掉整个 .deploy_git 再重新部署才会生效。有兴趣的可以看下 hexo-deployer-git 的源码。

4.3.2、发布

最后一步，发布到网上，执行：
$ hexo deploy 或 $ hexo d -g // 生成和部署
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
其中会跳出Github登录，直接登录

4.3.2、访问

完成以上操作后，使用浏览器访问 http://username.github.io , 就可以成功访问我们的博客。

5、发布文章

在CMD中输入
$ hexo new "测试文章"

$ hexo new test_md

通过关键字来指定文章的分类、标签及是否开启评论等功能。

title: Hello World
date: 2018/6/7 19:45:12
categories:   // 分类
- Diary
tags:        // 标签
- PS3
- Games
comments: false  // 评论功能，默认开启

注意：请参阅 Hexo 的分类与标签文档，了解如何为文章添加标签或者分类的详细信息。

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件 post.md 来建立文章，因此我们可以修改它建立自己的文章模板，我的模板如下：

title: {{ title }}
date: {{ date }}
tags:
  - 
categories:
  - 
comments: 
password:

就可以新建文章
INFO Created: G:\Github\blog\source_posts\测试文章.md
此时会在source/_posts目录下生成 test_md.md 文件
找到该文章，打开，
在 test_md.md 中输入内容后，保存一下。
使用 Markdown 语法，该语法介绍可以查看
利用HEXO搭建的博客及Markdown语法介绍
然后执行下列步骤

$ hexo clean

INFO Deleted database.
INFO Deleted public folder.
$ hexo generate 或 $ hexo g
INFO Start processing
INFO Files loaded in 1.48 s

省略

INFO 29 files generated in 4.27 s
$ hexo server 或 $ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
这个时候，打开http://localhost:4000/，发现刚才的文章已经成功了
最后一步，发布到网上，执行：
$ hexo deploy 或 $ hexo d # 将网站进行部署。
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...

省略

其中 hexo clean 是为了清除缓存，和已经生成的静态文件( publish 文件夹)；hexo g 是命令 hexo generate 的简写，生成静态文件；hexo s 是命令 hexo server 的简写。

6、个性化定制

6.1、更换主题

6.1.1、下载主题

首先当然是下载主题了，博主用得是Hexo上比较热门的 iissnan/hexo-theme-next 主题，简洁大方好看嘿嘿，clone 到 themes 目录中即可：

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

hexo 官方的主题 https://hexo.io/themes/
主题介绍:
Anodyne 主题 $ git clone https://github.com/klugjo/hexo-theme-anodyne
litten/hexo-theme-yilia 主题: 一个简洁优雅的hexo主题 A simple and elegant theme for hexo.
https://github.com/litten/hexo-theme-yilia

6.1.2、启用主题

启用新下载的主题,在刚打开的的 _config.yml 文件中(hexo根目录中)，找到“# Extensions”，把默认主题 landscape 修改为刚刚下载下来的主题名：
修改主目录下的 _config.yml，指向我们刚刚 clone 的主题：

theme: next # 启用 NexT 主题

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前，我们最好使用 hexo clean 来清除 Hexo 的缓存。

6.1.3、验证主题

执行以下命令，注意观察命令行输出是否有任何异常信息。

hexo s --debug

输出如下：
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此时即可使用浏览器访问 http://localhost:4000，检查博客主题是否启用成功。
注意：NexT主题的详细配置信息请参考NexT网站。
【提示】http://username.github.io 里有两个 config.yml 文件，一个在根目录，一个在 theme 下，现在修改的是在根目录下的。

6.1.4、更新主题

git bash 里执行

$ cd themes/主题名
$ git pull

6.1.5、本地查看调试

每次修改都要 hexo g 生成一下

$ hexo g # 生成
$ hexo s # 启动本地服务，进行文章预览调试，退出服务用Ctrl+c

浏览器输入
localhost：4000 预览效果

6.2、主题设定(这一部分的修改都在该theme下的config.yml 文件中)

6.2.1、选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：
Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

6.2.2、设置语言

language: zh-Hans

6.2.3、设置菜单

Anodyne 修改导航栏，这次我们要修改的仍然是配置文件 _config.yml，不过不是之前修改的全局的配置文件，而是主题下的配置文件themes/anodyne/_config.yml，在主题中找到menu字段，因为这边我们主要有两个页面，一个是首页还有是一个是归档页面，About和Contact没有对应页面，所以将About和Contact的路由都改为了首页，即/。

NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

1.第一是菜单项（名称和链接）
设定菜单内容，对应的字段是 menu 。
若你的站点运行在子目录中，请将链接前缀的 / 去掉

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

2.第二是菜单项的显示文本
设置菜单项的显示文本, 在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。
以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml，在 menu 字段下添加一项：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料

3.第三是菜单项对应的图标。设定菜单项的图标，对应的字段是 menu_icons 。
此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的名字。
而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。

 menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 ==Font Awesome== 图标名字）的情况下，NexT 将会使用作为图标。

请注意键值（如 home）的大小写要严格匹配

6.2.4、设置侧栏

可以通过修改主题配置文件中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置，其二是侧栏显示的时机。

1.设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：

left - 靠左放置
right - 靠右放置

目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。

sidebar:
  position: left

2.设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：

post - 默认行为，在文章页面（拥有目录列表）时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏（可以手动展开）
remove - 完全移除

sidebar:
  display: post

已知侧栏在 use motion: false 的情况下不会展示。影响版本5.0.0及更低版本。

6.2.5、设置头像

编辑主题配置文件，修改字段 ==avatar==，值设置成头像的链接地址。其中，头像的链接地址可以是：

地址	值
完整的互联网 URI	http://example.com/avatar.png
站点内的地	将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在）配置为：avatar: /uploads/avatar.png 或者放置在 source/images/ 目录下配置为：avatar: /images/avatar.png

avatar: http://example.com/avatar.png

6.2.6、设置作者昵称

编辑站点配置文件，设置 author 为你的昵称。

6.2.7、站点描述

编辑站点配置文件，设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

7、添加功能

7.1、更改配置

7.1.1、给文章贴标签

首先需要确认全局的配置文件_config.yml中有tag_dir: tags，确认过之后就可以新建tags页面啦。命令为：

$ hexo new page tags

此时会在全局的source文件下新建文件夹tags文件夹，修改tags/index.md文件

title: tags
date: 2018-06-06 12:15:14
type: "tags"

全局设置好标签之后就可以给文章贴标签了，在文章的.md文件中添加：

tags:
      - tag1
      - tag2

添加过之后，头部如下：

title: test_md
date: 2018-06-06 12:18:25
tags: tag1

7.1.2、设置文章分类

给文章设置分类与上面介绍的设置标签类似，也需要首先确认一下全局的配置文件_config.yml中有category_dir: categories，接着新建categories文件

$ hexo new page categories

此时会在全局的source文件下新建文件夹categories文件夹，修改 categories/index.md 文件

title: 文章分类
date: 2018-06-06 12:19:16
type: "categories"

设置好全局的分类之后，就可以设置文章的分类了，在文章的.md文件中添加：

categories:
      - category1
      - category2

添加过之后，头部如下：

title: test_md
date: 2018-06-06 12:20:35
categories: cate1

7.1.3、博客内代码高亮

hexo 默认已经实现了代码高亮，但是它存在一些局限性，某些情况下无法高亮，而且界面也比较丑，所以最后还是选择了 highlight.js 这个库。这个库的使用也很简单，具体步骤如下：

我们上面介绍了hexo自带高亮，所以需要先关闭自带高亮，在全局配置文件_config.yml 中将 highlight 的 enable 字段设置为 false 。
接着要引入 highlight.js 的 css 和 js ，具体的引入位置在主题模版中的<head></head>之间，我使用的 Anodyne 风格写在了主题的 layout 文件夹中的 layout.ejs 文件内，具体代码如下：

<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.2.0/styles/github.min.css">
<script src="//cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>

在 highlight.js 官方文档可以看到，它有很多代码风格，我们可以根据自己的喜好来选择，因为平时经常看 github 的代码，所以我这边选择的是 github 风格。

最后，还要对 highlight 进行初始化，位置在</body>之前的<script></script>中引入

hljs.initHighlightingOnLoad();

7.1.4、添加代码行号

处理完代码高亮之后，很自然的想让插入的代码带有行号，所以我们接下来就介绍一下怎样添加代码行号。这边我们使用库 highlightjs-line-numbers.js ，具体步骤如下：

首先是引入库，这里有两种方式：
第一种是，执行命令

$ npm install highlightjs-line-numbers.js

第二种是，通过script的方式引入

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>

其实比较规范的操作应该是通过 npm install 的方式来引入，这样作者有更新，我们可以拉到最新代码，但是这里我为了跟 highlight 保持一致，使用了第二种方式。
在 highlight 之后对行号插件进行初始化，代码为：

hljs.initLineNumbersOnLoad();

如果行号的样式我们不喜欢，可以通过更改CSS的方式来改变，这边仍然以Anodyne风格为例，我在 anodyne/source/css/partial/_highlight 文件中加入了如下代码：

td.hljs-ln-numbers
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  text-align: center
  color: #ccc
  border-right: 1px solid #CCC
  vertical-align: top
  padding-right: 5px
  width: 20px
td.hljs-ln-code
  padding-left: 10px
.content table tr:not(:last-child) td
  border-bottom: 0px solid #eee

注意这边要是 styl 的格式来编写代码，可是 .styl 貌似不支持高亮
另外，还有一个小功能，就是如何将文字缩进，这边我常用的方法就是输入两个 &emsp; 或者 &ensp;

7.2、集成常用的第三方服务

7.2.1、百度统计

注意： baidu_analytics 不是你的百度 id 或者百度统计 id

登录百度统计，定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id
编辑主题配置文件，修改字段 baidu_analytics 字段，值设置成你的百度统计脚本 id。

7.2.2、阅读次数统计

为NexT主题添加文章阅读量统计功能

7.2.3、Algolia 搜索

第三方服务 - Algolia

7.3、插件

7.3.1、安装插件

安装插件：npm install 插件名 –save
卸载插件：npm uninstall 插件名
更新插件和博客框架：npm update
执行以下命令安装 RSS 插件

npm install hexo-generator-feed --save

生成站点地图

npm install hexo-generator-sitemap --save

生成百度站点地图

npm install hexo-generator-baidu-sitemap --save

SEO优化

npm install hexo-generator-seo-friendly-sitemap --save

HTML压缩

npm install hexo-html-minifier --save

CSS压缩

npm install hexo-clean-css --save

JS压缩

npm install hexo-uglify --save

imagages压缩

npm install hexo-imagemin --save

7.3.2、插件开启配置

根目录下的 _config.yml ，添加以下代码:

# RSS
feed:
type: atom
path: atom.xml
limit: 20
# sitemap
# 提交给谷歌搜素引擎,SEO优化开启配置是一样的
sitemap:
    path: sitemap.xml
# 提交百度搜索引擎   
baidusitemap:
    path: baidusitemap.xml 
# HTML压缩
html_minifier:
  exclude:     
# css压缩
clean_css:
  exclude: 
   - '*.min.css'
# js压缩   
uglify:
  mangle: true
  output:
  compress:
  exclude: 
    - '*.min.js'
# image压缩    
imagemin:
  enable     : true
  interlaced : false
  multipass  : false
  optimizationLevel: 2
  pngquant   : false
  progressive: false

package.json 可以看安装了哪些插件。
Hexo Seo 优化让你的博客在google搜索排名第一

8、可能出现的错误

安装 heox 时报错： YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key at line 5, column 1: # Site
YAMLException: cannot read a block mapping entry; a multi line key may
not be an implicit key at line 13, column 1: # URL 启动 hexo
时包上面的错误时，你们都是配置文件：_config.yml 中 # Site #URL 属性设置后面的：需要有空格再填写内容！！！

如果按照流程步骤执行 hexo server 没有反应，说明你少了 npm install 这部，没有安装 hexo server 模块

本地浏览没问题，Deploy 报错

Git 环境配置错误问题描述：
Windows系统出现报错信息如下 [info] Start deploying: git [info] Setting up Git deployment... [error] Error: spawn ENOENT Error: spawn ENOENT
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34) events.js:72
throw er; // Unhandled 'error' event
^Error: spawn ENOENT
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34) 解决方案：检查 Git 的相关配置，将 git 所在目录添加到系统 path 中去。

Deploy 设置错误问题描述：输入 hexo deploy 后，出现错误信息： 'github' does not appear to be a git repository 解决方案：
检查 _config.yml 中 deploy 设置。参见http://hexo.io/docs/deployment.html。
删除 .deploy_git 文件夹并且执行 hexo clean 后，重新 hexo deploy 。

Deploy之后，页面长时间404 解决方案：检查 Github Pages 类型个人主页也就是库的名称为 yourname.github.io 的主页，页面文件应当在 master 分支下，文件结构可以参考我的主页，也就是应当以 HTML 文件为主，是没有 Markdown 文件的。
项目主页
也就是库名不是 yourname.github.io 的主页，页面文件应当在 gh-pages 分支下，文件结构与个人主页基本一致，同样没有 Markdown 文件。
检查 Github 验证邮件曾经出现过所有操作都没有问题但就是404的状况，新创建的用户最好都去看看是不是验证邮件没有通过。注意库的名字
现在大多改成 .io 结尾域名了，但是不确定是不是真的跟这个有关，最好改成 .io。

自有域名二级目录无法访问 问题描述参见 issue820 问题分析
问题出在 CNAME 跳转，下面附上我的分析，如果不感兴趣可以直接翻到解决方案。
如果没有 CNAME 跳转，访问 yourname.github.io/repo 会自动地去访问 gh-pages 分支下的静态文件。
但是一旦进行了 CNAME 跳转，访问 yourname.github.io/repo 就会自动跳转为 yoursite.com/repo，
显然在你的博客目录下是没有这个文件夹的，所以自然而然的会出现访问404错误。解决方案增加一个新的 DNS 记录
修改自己域名的DNS记录，增加一条记录（A 记录或者 CNAME 都可以，指向 github），内容是 repo.yoursite.com，访问时通过 repo.yoursite.com 来访问。
将这个库移动到博客目录下
按照上述的分析，把这个库的 repo 移动至博客目录下即可。注意修改 html 以免被 hexo 再次渲染，还有如果是直接复制或者 clone ，注意删除隐藏的 .git 文件夹。

Hexo命令失效 解决方案：检查 _config.yml 中的内容，特别注意:后面需要有一个空格。检查 `package.json’ 中的内容，注意添加 hexo 信息用来标识这是一个 hexo 目录：{ "hexo": {
"version": "" } } 如果还是有问题，可以更新 hexo 之后，在新的文件夹中重新进行 hexo init。

Hexo所有命令报错 问题描述：参见 Issues832 解决方案：
仔细检查 _config.yml 文件中所有冒号后面的空格，格式很严格，必须是只有一个，半角。不管是多了还是少了都会报错，这是 yml 解释器所定义的语法。如果不确定的话，将输入法调整到英文模式，删除所有冒号后面的空格重新输入，不要使用 Tab 。

修改主题文件之后，网页不更新 问题描述：在修改主题文件之后，页面的文件依然没有更新。解决方案： hexo clean 并且删除 .deploy_git 文件夹之后，hexo d -g 。为了强制浏览器更新资源文件，可以采用 ’Ctrl+F5’ 来刷新。

9、命令总结

9.1、Hexo 命令

Hexo 有很多命令，在这里总结一下一些常用命令：

hexo generate      // 简写：hexo g，生成静态文件，会在当前目录下生成一个public文件夹
hexo server       // 简写：hexo s，启动本地服务，用于博客的预览
hexo deploy       // 简写：hexo d，部署到远程（如GitHub，可以在_config.yml中配置）
hexo new post-name  // 简写：hexo n post-name， 新建文章
hexo new page page-name   //简写：hexo n page page-name，新建页面

常用的组合命令：

hexo d -g                 // 生成和部署
hexo s -g                 // 生成和预览

注意：Hexo 的详细信息请参考 Hexo网站。

9.2、hexo 使用

9.2.1、目录结构

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里
| ├── \_drafts #草稿
| └── \_posts #文章
├── themes #主题
├── \_config.yml #全局配置文件
└── package.json

9.2.2、全局配置

_config.yml

# Hexo Configuration
# Docs: Configuration
# Source: GitHub - hexojs/hexo: A fast, simple & powerful blog framework, powered by Node.js.
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述，给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板，包括 post、page、photo、draft（文章、页面、照片、草稿）
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考Moment.js | Docs
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数，设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论，替换为多说
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署，将 lmintlcx 改成用户名
deploy:
  type: git
  repo: 刚刚github创库地址.git
  branch: master

注意
• 配置文件的冒号“:”后面有一个空格
• repo: 刚刚 github 创库地址 .git

hexo 命令行使用
常用命令：

hexo help # 查看帮助
hexo init # 初始化一个目录
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成网页，可以在 public 目录查看整个网站的文件
hexo server # 本地预览，'Ctrl+C'关闭
hexo deploy # 部署.deploy目录
hexo clean # 清除缓存，强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹

简写：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

编辑文章,新建文章

hexo new "标题"

在 _posts 目录下会生成文件标题.md

title: Hello World
date: 2015-07-30 07:56:29 #发表日期，一般不改动
categories: hexo #文章文类
tags: [hexo,github] #文章标签，多于一项时用这种格式

正文，使用 Markdown 语法书写
编辑完后保存，hexo server 预览
hexo部署
执行下列指令即可完成部署。

hexo generate
hexo deploy

hexo deploy问题：Deployer not found: git
执行

npm install hexo-deployer-git --save

重新deploy即可
以下提示说明部署成功
[info] Deploy done: git
点击 Github 上项目的 Settings，GitHub Pages，提示 Your site is published at (域名)

9.3、图床

1.墙裂推荐七牛云储存,注册地址。
2.七牛云储存提供10G 的免费空间,以及每月10G 的流量.存放个人博客图片最好不过了
3.七牛云储存还有各种图形处理功能、缩略图、视频存放速度也给力。
具体使用见使用七牛作为github博客的图床

9.4、域名

将独立域名与 GitHub Pages 的空间绑定
方法一：在站点 source 目录下面，新建一个名为 CNAME 的文本文件，里面写入你要绑定的域名，比如 http://wuxiaolong.me
方法二：在 Repository 的根目录下面，新建一个名为 CNAME 的文本文件，里面写入你要绑定的域名，比如 http://wuxiaolong.me

9.5、DNS设置

用 DNSpod
，快，免费，稳定。
注册 DNSpod ，添加域名，如下图设置。
其中 A 的两条记录指向的ip地址是 github Pages 的提供的ip
去 Godaddy 修改 DNS 地址
更改 godaddy 的 Nameservers 为 DNSpod 的 NameServers。

10、参考文章

技术小白搭建个人博客 github+hexo
教你免费搭建个人博客，Hexo&Github
基于Hexo搭建博客
 开始使用 - NexT 使用文档
 Hexo + yilia 搭建博客可能会遇到的所有疑问
 Hexo常见问题解决方案
 用hexo+github搭建属于自己的博客
 Hexo搭建的GitHub博客之优化大全
 教你免费搭建个人博客，Hexo&Github
使用Hexo+GitHub搭建及配置个人博客
 Hexo与Github搭建个人博客
 手把手教你建github技术博客by hexo
用hexo+github搭建属于自己的博客
 如何搭建一个独立博客——简明Github Pages与Hexo教程

网友评论

simon96:【持续更新】最全Hexo个人博客搭建+主题优化+插件配置：
https://www.simon96.online/2018/10/12/hexo-tutorial/
tf2jaguar:我也是用的nodejs+hexo+github建站的，已将做好了，感觉还行，欢迎大佬指教，

https://jelly54.github.io/
Hello丶Alili:写博客，很多是自我提升与自我整理。
hexo特别好用，我的博客也是用的这个。
https://alili.tech
靴子猫是我:谢谢作者，文章对我帮助很大
咻咻ing:用Gitee搭建博客，速度稳定不怕被墙，好像还不错
https://www.jianshu.com/p/5014133ba61a