使用Hexo在Github上搭建你的博客
Pin Young Lv9

自从投身于互联网学习的怀抱中后,一直想搭建一个属于自己的个人博客。了解过WordPress
,不过因为不懂服务器的知识只得暂时作罢;也看过csdn、博客园等,方便是方便,不过主题样式无法个人定制,这对于美工出身的我简直无法忍受。听朋友说起hexo,并且能够部署在github上,甚是方便,照着教程,一步一步搭建了这个博客。在搭建博客过程中遇到了很多问题,写下这篇教程的原因就是希望能够给需要的人些许帮助。

hexo简介

Hexo 是一个快速、简洁且高效的博客框架。出自台湾大学生tommy351 之手,是一个基于Node.js的静态博客程序。Hexo 使用 Markdown(关于markdown在后面会有更详细的介绍)或其他渲染引擎解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

开发环境

安装Node.js

直接到官网下载安装即可 或 通过 nvm
cURL:

1
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:
1
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js
1
$ nvm install 0.10

安装Git

  • windows: 下载并安装Git
  • Mac: 使用 Homebrew, MacPorts 或下载 安装程序 安装
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

安装Hexo

安装完node.js和git之后,即可以通过npm安装hexo了
打开git bash,键入以下命令

1
$ npm install -g hexo-cli

安装完成后可以通过 $ hexo version查看hexo版本信息

初始化

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

或者通过cd命令进入你想放置的文件夹
然后 $ hexo init

初始化完成后,你会在该文件夹下得到如下的目录结构

1
2
3
4
5
6
7
8
9
10
.

├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
└── themes

本地启动

执行命令

1
$ hexo server

成功启动则会看到反馈信息
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
此时端口4000被打开,打开浏览器,输入上面所示网址
出现了默认的主题界面,心情是不是有点激动~
image

有的电脑通过命令$ hexo server本地启动后,查看到的反馈信息中的网址可能如下所示
http://0.0.0.0:4000/ (如博主自己的电脑…)
经测试发现直接输入该网址是无法访问的,还是需要通过 http://localhost:4000/ 来访问

至此,Hexo的安装工作基本完成,下面介绍hexo的使用方法

博客配置

_config.yml
这是网站的配置信息,可以在些配置网站的基本参数
网站
image
网址
image

若您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

目录
image
文章
image
分类 & 标签
image
日期/时间格式
image
分页
image
扩展
image

hexo指令

init

1
$ hexo init [folder]

新建一个网站,也可以先进入目录,再hexo init

new

1
$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

layout在此意为布局。Hexo 有三种默认布局:postpagedraft,它们分别对应不同的路径,而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。
image

generate

1
$ hexo generate

生成静态文件

server

1
$ hexo server

本地启动服务器

deploy

1
$ hexo deploy

部署网站

list

1
$ hexo list <type>

列出网站资料

以上指令是可以简写的,如
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
heox d == hexo deploy
同时,hexo还支持复合命令,如 hexo d -g 意为 先静态化处理,再部署
平常写博客上面的这些指令就差不多够用了
详细指令说明可参阅https://hexo.io/zh-cn/docs/commands.html

创建新文章

下面我们开始写第一篇博文,进入安装hexo的目录,git bash或本地命令行均可

1
$ hexo new "我的第一篇博文"

你会发现在_posts目录下生成文件 “我的第一篇博文.md”
image
然后我们可以开始以markdown语法编写文章

markdown的语法说明可以参照
http://www.ituring.com.cn/article/504
http://ibruce.info/2013/11/26/markdown/
个人感觉上面的介绍已经比较详细了,博主就不在这多啰嗦了,不过关于图片的引入方法
如果是网络图片,参照上面的教程
如果是本地图片,则需要在source目录下新建images文件夹,将图片放入该目录中
例如![](/images/example.jpg)

image
写完之后保存,本地启动服务器hexo server
在浏览器中打开http://localhost:4000 即可看到我们刚刚写完的文章已经发表了,页面右侧还会自动加入新的目录和标签等,是不是非常简单!!
image

发布到github

静态化处理

执行命令

1
$ hexo generate

在此说明一下静态化处理的目的,由于我们用hexo所搭建的这个博客,是静态网站,即只有html,css和javascript,无法动态更新。静态化处理即生成只有html、css和javascript的网站。

部署到github

  • 注册github帐号
  • 建立一个仓库,名为[your_user_name.github.io]

    已有github帐号的请忽略第一步

编辑配置文件_config.yml,在deploy部分,设置github的项目地址

1
2
3
deploy:
type: git
repository: [email protected]:example/example.github.io.git

然后执行命令

1
$ hexo deploy

若没问题的话会提示你输入帐号密码,之后就部署成功了,可以在github查看,
点击右侧的setting
image
在此页面中你会看到
image
这就是你网站部署的地址了,打开此网址,即可看到你发布的网站

在执行hexo deploy命令时,可能会提示找不到git
解决方法:
在Hexo 3.0版本后deploy git 被分开的,所以需要安装,安装命令如下:
npm install hexo-deployer-git --save ,安装好后再尝试一下就ok

绑定域名

如果对于github默认分配的二级域名example.github.io满意的话,就用这个也是可以的。
如果不太满意,可以购买一个域名,博主是从阿里云购买的.com
域名。从网上大家的评论来看.com和.me的域名评价比较高,而且.com是国际域名,
比.cn的总归要方便一些(你懂的~)
购买域名都是按年付费的,.com和.me的一年50-60人民币,一般第一年都有优惠。

设置域名有两种方式

  • 主域名绑定: 如example.com
  • 子域名绑定:如blog.example.com

主域名绑定

source根目录下新建文件 CNAME,无后缀,纯文本文件,内容为要绑定的域名
example.com,如果要使用www.example.com的形式,文件内容改为www.example.com

DNS设置
主机记录@,类型A,记录值192.30.252.153
主机记录www,类型A,记录值192.30.252.153
参考https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider

子域名绑定

比如使用域名example.com的子域名blog.example.com
CNAME文件内容为blog.example.com

DNS设置
主机记录blog,类型CNAME,记录值example.github.io
参考https://help.github.com/articles/tips-for-configuring-a-cname-record-with-your-dns-provider

更换主题

https://github.com/hexojs/hexo/wiki/Themes,可以从这上面挑选一个自己喜欢的主题
比如我觉得next还不错,
进入github的项目地址后
image
复制如图所示的右侧地址
theme目录下,执行命令

1
$ git clone https://github.com/iissnan/hexo-theme-next.git

完成后会在theme目录下生成hexo-theme-next主题文件夹
打开_config.yml配置文件,找到theme选项
将默认的theme: landscape更换为
theme: hexo-theme-next
此时,启动服务器hexo server可查看效果,之后便可静态化然后部署到github上即可。

http://theme-next.iissnan.com/这是next主题的说明,可参照此修改默认配置。
其他主题也可借鉴说明

配置插件

评论系统

由于 hexo默认集成的是Disqus评论系统,所以你懂的~
国内推荐使用多说
直接用你的qq/微博/豆瓣/人人/百度/开心网帐号登录多说,做一下基本设置。如果使用Next主题,在网站配置_config.yml(非主题的_config.yml配置文件!) 中配置duoshuo_shortname为多说的 基本设置->域名 中的shortname即可。你也可以在多说后台自定义一下多说评论框的格式,比如评论框的位置
这样,评论系统就加好了
image

RSS订阅

这个功能已经有人写好了插件,直接安装即可

1
$ npm install hexo-generator-feed

然后在站点配置文件_config.ymlplugins选项中添加
image
启动服务器,打开http://localhost:4000/atom.xml,就可以看到RSS已经生效了。

Sitemap站长地图

同RSS一样,直接安装

1
$ npm install hexo-generator-sitemap

然后在plugins中添加
- hexo-generator-sitemap
启动服务器,打开http://localhost:4000/sitemap.xml,就可以看到Sitemap已经生效了。

自定义界面

执行new page命令

1
$ hexo new page "about"

source下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的 _config.yml 中将其配置显示出来。页面的其他部分会自动补全,只添加内容即可

如果不想在about页面显示默认的评论框,添加comments: false,就可以了。

统计

由于 Google Analytics 偶尔会被墙,可以用百度统计,以Next主题为例,
百度统计申请一个帐号,添加你的博客地址
在代码获取界面
image
?后面的这串字母加数字即是你的百度分析ID,复制下来,
在站点配置文件中添加如下所示
image
添加完后过一段时间才能在百度统计看到结果

网站图标

将你的favicon.ico放到source目录下即可
图标的制作可以在 比特虫网站制作

后记

因为我的博客http://blog.waydrow.com基本是免费做出来的,所以写下这篇博文,希望可以帮助到其他人,也感谢此开源项目的贡献!
参考资料
http://blog.fens.me/hexo-blog-github/
http://www.tuicool.com/articles/AfQnQjy
http://blog.lmintlcx.com/post/blog-with-hexo.html#绑定顶级域名

如有问题,欢迎留言或者发送邮件到Waydrow@163.com