通过Hexo在GitHub搭站全记录

  1. 1.Hexo的安装
  2. 2.创建Hexo站点工程
  3. 3.Hexo站点配置
  4. 4.创建文章
  5. 5.生成站点静态资源
  6. 6.一键站点发布
  7. 7.评论系统
  8. 8.为Hexo博客添加目录
  9. 9.为博客首页开启文章摘要显示
  10. 10.写在最后
  11. 11.参考

本人github主站:https://anonymalias.github.io
本人csdn主站:http://blog.csdn.net/anonymalias

GitHub本身支持建站:只需在自己的repos下建立一个名为:username.github.io的repo,然后在该repo下发布静态站点文件可以了。
下面是详细的在linux下建站流程:

1.Hexo的安装

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Hexo的安装依赖:

  • Nodejs
  • Git
    ubuntu下直接:
    1
    2
    $sudo apt-get install nodejs
    $sudo apt-get install git
    这里还需要安装npm(Node Package Manager),是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准, 例如redhat的rpm, vim的vimball, python的pip等等。
    ubuntu下直接:
    1
    $sudo apt-get install npm 
    这个时候就可以通过npm来安装hexo了
    1
    $ npm install -g hexo-cli

2.创建Hexo站点工程

Hexo 安装完之后,就可以通过hexo来创建建站所需要的工程和配置文件。

1
2
3
$ hexo init homepage
$ cd homepage
$ npm install

创建完之后,homepage下面生成的目录结构如下:

1
2
3
4
5
6
7
`_config.yml`     #主站的配置文件
.git .gitignore .gitmodules #npm安装过程需要在线拉取远程库
node_modules
package.json #应用程序的信息
scaffolds #模版文件夹,新建文章时会根据 scaffold里对应md生成文件
source #存放用户资源,除 _posts 文件夹之外, _ 开头的文件/和隐藏的文件将会被忽略
themes #主题文件夹

其实这个时候可以直接在homepage目录下执行hexo g命令生成public目录,该目录是已经生成的可以发布的静态站点,里面有一篇默认的hello world博客。把public目录的所有文件push到自己github的username.github.io repo中就可以通过username.github.io域名进行访问了

3.Hexo站点配置

上面创建的站点homepage目录下的_config.yml是站点的全局配置文件,非常重要的。这里所以下该配置文件需要进行配置的地方

1
2
3
4
5
6
7
8
9
# Site
title: Hello World! #站点标题
subtitle: welcome to my code home! #站点副标题
description: attitude is everything #站点描述
author: anonymalias #作者名字
email: anonym_alias@163.com

#URL
url: https://anonymalias.github.io #站点的地址

这里还要注意的就是站点配置文件中的Directory相关配置,虽然不用修改,但创建文章的时候会用到这几个目录:

1
2
3
4
# Directory
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹

这几个目录在创建文章时基本都需要添加在head中的,以便很方便读者浏览博客。

Hexo默认的主题landscape存放在所创建的homepage的themes/landscape下面,每次要使用新的主体,都是在homepage/themes目录下创建。
这里先不修改主题的配置文件,主体配置文件路径名为:thems/landscape/_config.yml,因为这里不影响使用。

4.创建文章

站点创建和配置好之后,就可以开始写文章了。首先是通过hexo new命令创建文章对应的md文件。

1
$ hexo new title

执行上述命令后,会在source/_posts/下面生成对应的title.md,例如:

1
2
3
$hexo new github-cowork-process 
$ls source/_posts
github-cowork-process.md hello-world.md

到这里就可以将自己的文章内容写入生成的title.md文件中,然后通过md的语法对文章内容进行排版修饰。这里要注意生成的md文件开头的结构:

1
2
3
4
5
---
title: github-cowork-process
date: 2016-01-16 15:15:00
tags:
---

这里要修改—之间的内容:

1
2
3
4
5
6
---
title: 此处填写博客的标题
date: 2016-01-16 15:15:00
tags: github
categories: technology_common
---

这里的配置会将创建的文章加入到blog的对应的分类索引中,以便查看和检索。这个标题的模版可以在scaffolds/post.md文件中进行修改,这样创建文章时只需要修改对应的值就可以了,而不需要手动添加对应的标签。

  • tags:文章的标签,多个标签可以通过中括号括起来,然后逗号进行分隔,例如:[tag1, tag2]

一般文章都会有很多图片资源,最简单的方法是把所有的图片资源存放在source/images文件夹下面,然后然后通过类似于 ![](/images/image.jpg) 的方法访问它们。我觉得这个方法是够用了,因为这种最简单的方法也方便进行图片管理。当然hexo还提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的下面选项打开:

1
2
#`_config.yml`
post_asset_folder: true

当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] title 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。具体可参考官方链接:资源文件夹

很多人搭建论坛会用到qiniu的存储,这里我没有采用是因为觉得第三方的服务不太可靠,毕竟写一个博客,没有必要接入。

5.生成站点静态资源

完成了title.md文件的编写之后,就可以在站点目录通过hexo g命令生成要发布博客的所有静态资源。hexo g命令会在站点跟目录下创建pulibc目录,public下生成的是本站点所需要的所有的静态资源html,js,css。

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
26
27
28
29
30
31
32
33
34
35
36
37
38
$ hexo g
INFO Files loaded in 696 ms
INFO Generated: scroll2top/scrollup.png
INFO Generated: scroll2top/scroll2top.js
INFO Generated: js/script.js
INFO Generated: fancybox/jquery.fancybox.pack.js
INFO Generated: fancybox/jquery.fancybox.js
INFO Generated: fancybox/jquery.fancybox.css
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO Generated: fancybox/helpers/jquery.fancybox-media.js
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO Generated: fancybox/helpers/fancybox_buttons.png
INFO Generated: fancybox/fancybox_sprite@2x.png
INFO Generated: fancybox/fancybox_sprite.png
INFO Generated: fancybox/fancybox_overlay.png
INFO Generated: fancybox/fancybox_loading@2x.gif
INFO Generated: fancybox/fancybox_loading.gif
INFO Generated: fancybox/blank.gif
INFO Generated: css/style.css
INFO Generated: css/images/jr0cket-banner-dual-clojure.png
INFO Generated: css/images/banner.jpg
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: images/github_co_work_1.png
INFO Generated: 2016/01/14/hexo-construct-homepage/index.html
INFO Generated: 2016/01/13/hello-world/index.html
INFO Generated: 2016/01/12/github-cowork-process/index.html
INFO Generated: archives/index.html
INFO Generated: archives/2016/index.html
INFO Generated: archives/2016/01/index.html
INFO Generated: categories/technology-common/index.html
INFO Generated: index.html
INFO 35 files generated in 1.7 s

这个时候就可以算完成了所有的工作,只需要将public目录下所有文件,上传到username.github.io的repo库中,通过username.github.io就可以访问个人主页了。我一开始做法是:

1
2
3
4
5
$git clone git@github.com:anonymalias/anonymalias.github.io.git
$ cp -R ~/homepage/public/* ./
$ git add -A
$ git commit -m ‘xxx’ .
$ git push

6.一键站点发布

每次编写文章,更改站点配置,都要把hexo g生成的public的全部内容手动上传到username.github.io的repo库中。这个操作是很繁琐的,但hexo牛逼的是它自带发布功能。
此功能需要对全局站点配置文件_config.yml进行修改:

1
2
3
4
5
deploy:
type: git
repo: git@github.com:anonymalias/anonymalias.github.io.git
branch: master
message: update_homepage

Repo的地址需要用支持ssh协议的url,这里配置好后,还要配置github的无密登录,这个是老生长谈的事了,首先是生成rsa公私钥,然后将公钥上传到github的repo上面就可以了。

所有都ok后,发布只需要执行hexo d命令就ok了!!!

7.评论系统

我们借助hexo搭建的网站是一个静态的站点,如果我们希望加入一些动态的功能,就需要借助外部服务,这里我们最最需要的就是搭建一个评论系统,强大的是hexo提供评论服务的接入,强大吧!!!,这里我们使用hexo默认建议使用的disqus评论服务,虽然国内duoshuo使用的人较多,但是其服务有时候很不稳定,容易出bug(国产总是这么不可靠)。
接入disqus,首先到官网https://disqus.com创建个人账户,然后为个人站点添加disqus功能,站点注册界面如下:

图中1表示要接入的站点的域名,2标识和1中站点名一一对应的disqus url, 2中输入的名字是一个shortname,这个shortname在主站的配置文件中要使用。注册完成后。进行下面配置:依次点击disqus主站上头像设置里的admin->setup->Basic:

进入管理页面后,在Basic页签中下滑找到guest commenting选项进行勾选,允许guest进行评论。

这个时候就可以对hexo的主站点文件_config.yml进行修改,添加自己disqus的shortname:

1
disqus_shortname: anonymalias

配置好之后,就可以发布了,这时候评论系统就ok了。

8.为Hexo博客添加目录

参考:
http://kuangqi.me/tricks/enable-table-of-contents-on-hexo/
http://blog.csdn.net/peihaozhu/article/details/50755098

9.为博客首页开启文章摘要显示

hexo框架支持文章的摘要显示,只需要在每篇文章的md中,需要摘要显示的内容后加上html注释标签:,就可以达到摘要效果,那么如果实现自动生成摘要,而不是每次都在文章的md中加入more标签的。参考如下文章:
https://twiceyuan.com/2014/05/25/hexo%E8%87%AA%E5%8A%A8%E6%B7%BB%E5%8A%A0readmore%E6%A0%87%E8%AE%B0/
在/themes/[主题名]/layout/_partial/article.ejs文件中,将:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index) { %>
<%- post.excerpt %>
<% if (theme.excerpt_link) { %>
<p class="article-more-link">
<a href="<%- config.root %><%- post.path %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
</div>

改成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index) { %>
<%- post.excerpt %>
<% if (theme.excerpt_link) { %>
<p class="article-more-link">
<a href="<%- config.root %><%- post.path %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<% var br = post.content.indexOf('\n') %>
<% if(br < 0 || !index) { %>
<%- post.content %>
<% } else { %>
<%- post.content.substring(0, br) %>
<% if (theme.excerpt_link) { %>
<p class="article-more-link">
<a href="<%- config.root %><%- post.path %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } %>
<% } %>
</div>

10.写在最后

这里博客就算搭完了,博客的基本功能都有了,也加上了最重要的评论系统.

至于站点的页面优化呀,可以在后面有时间进行优化。至于站点的流量统计可以使用google或者baidu的,站内搜索可以使用swiftype,这些有时间在后面加上。至于其他的例如qiniu云存储没有必要接入,本来第三方就不可靠,免费的就更不可靠,博客也没必要接入,以后再看吧。

11.参考

  1. Hexo主站:https://hexo.io/zh-cn/docs/
  2. Hexo主题:https://github.com/hexojs/hexo/wiki/themes
  3. Markdown语法:http://www.markdown.cn/
  4. 百度流量统计:http://blog.justforfun.top/2015/02/06/hexo-%E6%B7%BB%E5%8A%A0%E7%99%BE%E5%BA%A6%E7%BB%9F%E8%AE%A1/