Hexo搭建Github Pages博客填坑教程

目录：

  • 1.安装Hexo
  • 2.部署Hexo
  • 3.Hexo命令
  • 4.一些报错处理
  • 5.博客管理
  • 6.插件（RSS、Sitemap）
  • 7.评论设置
  • 8.404页面
  • 9.统计
  • 10.更新
  • 11.总结
  • 12.参考引用
  • 13.搭建博客相关网站
  • 14.个人域名添加SSL
  • 15.文章更新

简述

本文主要讲解Hexo安装时遇到的坑，Hexo安装之后的使用教程，Hexo安装需要的环境和教程，请自行百度、谷歌。

1.安装Hexo

1
$ npm install -g hexo
坑1

这里可能安装失败，可以权限不够，在命令前加sudo

1
$ sudo npm install -g hexo

2.部署Hexo

1
$ hexo init
注：这个命令会初始化博客的目录，所以，执行这个命令时，在你想创建的目录下执行，就自动生成到对应目录下。

执行命令生，会在当前命令的路径下，生成以下文件：

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json
  • .deploy：执行hexo deploy命令部署到GitHub上的内容目录
  • public：执行hexo generate命令，输出的静态网页内容目录
  • scaffolds：layout模板文件目录，其中的md文件可以添加编辑
  • scripts：扩展脚本目录，这里可以自定义一些javascript脚本
  • source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
  • _drafts：草稿文章
  • _posts：发布文章
  • themes：主题文件目录
  • _config.yml：全局配置文件，大多数的设置都在这里
  • package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

3.Hexo命令

Hexo下，通过 _config.yml 设置博客，可以想象成我们用的软件里的设置一样，只是它通过一个文件列出这些参数，然后让我们填写和修改。

  • 全局设置

在你博客目录下有一个文件名_config.yml，打开可以配置信息。

  • 局部页面

在你博客目录下 \themes\你使用的主题\_config.yml

  • 写博客相关命令
1
2
3
4
5
6
7
8
Hexo常用命令：

hexo new "postName"       #新建文章
hexo new page "pageName"  #新建页面
hexo generate             #生成静态页面至public目录
hexo server               #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy               #将.deploy目录部署到GitHub

当然，如果每次输入那么长命令，那么一定想到用简写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

其它的，还可以复合命令：

1
2
hexo deploy -g
hexo server -g

有时候生成的网页出错了，而生成的rss其实没有清除，那么用下面的命令，在重新生成吧

1
$ hexo clean

当本地调试出现诡异现象时候，请先使用 hexo clean 清理已经生成的静态文件后重试。

注：Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中，在执行hexo deploy时将其复制到.deploy文件夹中。Github的版本库通常建议同时附上README.md说明文件，但是hexo默认情况下会把所有md文件解析成html文件，所以即使你在线生成了README.md，它也会在你下一次部署时被删去。怎么解决呢？
在执行hexo deploy前把在本地写好的README.md文件复制到.deploy文件夹中，再去执行hexo deploy。

4.一些报错处理

坑2

  • 一

    ERROR Plugin load failed: hexo-server
    原因：
    Besides, utilities are separated into a standalone module. hexo.util is not reachable anymore.
    解决方法，执行命令：
    sudo npm install hexo-server

  • 二

    执行命令hexo server，有如下提示：
    Usage: hexo
    ….
    原因：
    我认为是没有生成本地服务
    解决方法，执行命令：
    npm install hexo-server –save
    提示：hexo-server@0.1.2 node_modules/hexo-server

  • 三

    白板和Cannot GET / 几个字
    原因:
    由于2.6以后就更新了，我们需要手动配置些东西，我们需要输入下面三行命令：

1
2
3
4
5
6
7
npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save
这个时候再重新生成静态文件，命令：
hexo generate （或hexo g）
启动本地服务器：
hexo server （或hexo s）

5.博客管理

上面命令中，其实生成文章，可以直接把写好的文章插入到目录/_posts 下面，后缀为.MD就行，在文章头部固定格式：

1
2
3
4
5
title: Mac提高使用效率的一些方法   #文章的标题，这个才是显示的文章标题，其实文件名不影响
date: 2015-09-01 20:33:26      #用命令会自动生成，也可以自己写，所以文章时间可以改
categories: technology         #文章的分类，这个可以自己定义
tags: [Mac,效率,快捷方式]        #tag，为文章添加标签，方便搜索
---

当然，里面有很多东西的，如果你专注于写作，那么可以不用太关心了，比如tags标签可以写成下面那样，因为hexo文章的头部文件是用AML来写的。

1
2
3
tags:
- tag1
- tag2

如果在博客文章列表中，不想全文显示，可以增加 , 后面的内容就不会显示在列表。

1
<!--more-->

6.插件

  • 安装插件
1
$ npm install <plugin-name> --save
  • 添加RSS
    1
    npm install hexo-generator-feed
    然后，到博客目录 /public 下，如果没有发现atom.xml，说明命令没有生效！！！(楼主就是在这里被坑了次)
    解决方法：
    1
    $ npm install hexo-generator-feed --save
    这个命令来自hexo-generator-feed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Install
   $ npm install hexo-generator-feed --save
 Hexo 3: 1.x
 Hexo 2: 0.x
Options
   You can configure this plugin in _config.yml.

  feed:
     type: atom
     path: atom.xml
     limit: 20

	type - Feed type. (atom/rss2)
	path - Feed path. (Default: atom.xml/rss2.xml)
	limit - Maximum number of posts in the feed (Use 0 or false to show all posts)

其中可以选择：
然后在 Hexo 根目录下的 _config.yml 里配置一下

1
2
3
4
5
6
7
feed:
    type: atom
    path: atom.xml
    limit: 20
#type 表示类型, 是 atom 还是 rss2.
#path 表示 Feed 路径
#limit 最多多少篇最近文章

最后，在 hexo generate之后，会发现public文件夹下多了atom.xml！

例如要订阅我的blog只要输入ihtc.cc/atom就可以搜寻到啦！

  • 添加Sitemap

    Sitemap 的提交主要的目的，是要避免搜索引擎的爬虫没有完整的收录整个网页的内容，所以提交 Sitemap 是能够补足搜索引擎的不足，进而加速网页的收录速度，达到搜寻引擎友好的目的。

1
$ npm install hexo-generator-sitemap --save

这个命令来自hexo-generator-sitemap

1
2
3
4
5
6
7
8
9
10
11
   Install
	$ npm install hexo-generator-sitemap --save
	
	Hexo 3: 1.x
	Hexo 2: 0.x
Options
	You can configure this plugin in _config.yml.

	sitemap:
	    path: sitemap.xml
	path - Sitemap path. (Default: sitemap.xml)

同样可以选择：
在 Hexo 根目录下的 _config.yml 里配置一下

1
2
3
sitemap:
   path: sitemap.xml
   #path 表示 Sitemap 的路径. 默认为 sitemap.xml.

对于国内用户还需要安装插件 hexo-generator-baidu-sitemap, 顾名思义是为百度量身打造的. 安装

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

然后在 Hexo 根目录下的 _config.yml 里配置一下

1
2
baidusitemap:
     path: baidusitemap.xml

为了博客有更好的展示率, 最好的方式是通过搜索引擎, 提交 Sitemap文件是一个方式，具体可参考：

7.评论设置

在Hexo中，默认使用的评论是国外的Disqus,不过因为国内的”网络环境”问题，我们改为国内的多说评论系统。

需要说明的是 short_name:字段，这个字段为你多说填写的站点名字，比如我的域名：ihtcboy.duoshuo.com，那么我的short_name:”ihtcboy”

8.404页面

GitHub Pages 自定义404页面非常容易，直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。
其实，404页面可以做更多有意义的事，来做个404公益项目吧。

腾讯公益 404.html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>   
	<meta charset="UTF-8">
	<title>404</title>
</head>
<body>
<br><!--
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>公益404 | 不如</title>
</head>
<body>
#404 Not found By Bruce
<h1>404 Page Not Found</h1>
--><br><script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script><br><!--
公益404介接入地址
益云公益404 http://yibo.iyiyun.com/Index/web404
腾讯公益404 http://www.qq.com/404
失蹤兒童少年資料管理中心404 http://404page.missingkids.org.tw
-->
<br>
</body>
</html>

复制上面代码，贴粘到目录下新建的404.html即可！

9.统计

因Google Analytics偶尔被墙，故国内用百度统计

最新的统计服务已经开放，两行代码轻松搞定，你可以直接使用：不蒜子
本人墙裂推荐，只需要两行代码哦。各种用法实例和显示效果参考不蒜子文档中的实例链接。不蒜子，极客的算子，极简的算子，任你发挥的算子。

10.更新

  • 更新hexo：
    1
    npm update -g hexo
  • 更新主题：
    1
    2
    cd themes/你的主题
    git pull
  • 更新插件：
    1
    npm update

11.总结

本文主要是解释了自己搭建过程中遇到的问题，还有综合了其它Hexo教程的总结，还有图床、搜索、CDN加速等内容没有说到，大家用到可以自行百度谷歌！

12.参考引用

如何搭建一个独立博客——简明Github Pages与Hexo教程
hexo系列教程：（一）hexo介绍 | Zippera’s blog
hexo系列教程：（二）搭建hexo博客 | Zippera’s blog
hexo你的博客 | 不如
使用hexo搭建博客 | Alimon’s Blog
hexo边搭边记 | sunnyxx的技术博客
hexo搭建静态博客以及优化 | Joanna’s coding blog
HEXO+Github,搭建属于自己的博客 - 简书
在hexo自訂rss | kpman | code
RSS/Atom、Sitemap for SEO | Michael Hsu.tw
Hexo 优化与定制(二) | Kang Lu’s Blog
Hexo | { GoonX }
不蒜子 | 不如

13.搭建博客相关网站

Hexo官网
hexojs/hexo
GitHub Pages

14.个人域名添加SSL

阿里云版本：Github pages个人域名添加SSL | 温柔小猪

其它版本：为自定义域名的GitHub Pages添加SSL 完整方案

15.文章更新

  • 2018.02.25
    增加 Gitment 接入说明 Gitment评论功能接入踩坑教程 | iHTCboy’s blog

  • 2018.10.07
    不蒜子 统计
    因七牛强制过期『dn-lbstatics.qbox.me』域名，与客服沟通无果，只能更换域名到『busuanzi.ibruce.info』！
    只需把原有的：
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    域名改一下即可：
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    只需要修改该js域名，其他均未改变。


注：本文首发于 iHTCboy’s blog，如若转载，请注来源

赏

如果喜欢，欢迎分享点赞，扫一扫鼓励，用心创作创新！

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

iHTCboy <br> 破得迷，了得知，方能学海无边；<br> 热爱移动开发，自动化<br><br> 一花一世界，一木一浮生，<br> 一草一天堂，一叶一如来，<br> 一砂一极乐，一方一净土，<br> 一笑一尘缘，一念一清静