Hexo｜快速搭建自己（Github）博客

2016-01-10 本文已影响940人 BeckJiang

此方案的教程网上一搜一大把，这篇仅简单记录一下我的博客搭建过程、主题设置，以及遇到的一些问题，供参考与对比。
demo在这里

一、准备工作

安装nodejs
安装Git
注册Github账号,申请Github博客

二、安装Hexo

$ npm install hexo-cli -g

1. 初始化

$ hexo  init blog
$ cd blog
$ npm install

2. 开启服务

$ hexo server

会看到提示INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. 代表博客已经正常运行，在浏览器打开http://0.0.0.0:4000/ 即可预览博客的初始状态

3. 新建文章

$ hexo new "Hello-Hexo"

会在根目录下source/_posts/ 生成Hello-Hexo.md文件，使用markdown编辑器非常方便

4. 生成静态文件

$ hexo generate

静态文件的目录在public/ 下

三、更换主题

在知乎上有个话题：有哪些好看的Hexo主题？在里面有很多不错的主题。
我挑选了风格简洁的NexT主题，里面配置教程已经非常详细了，以下仅记录一下过程用到的点。

下载主题

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

启动主题

克隆完成以后打开站点配置 _config.yml，找到theme字段，值改为next。
运行hexo server --debug，访问http://0.0.0.0:4000/ 查看主题是否生效。

主题设置

选择scheme
NexT 通过 Scheme 提供主题中的主题。Mist 是 NexT 的第一款 Scheme。启用 Mist 仅需在主题配置文件中将#scheme: Mist前面的#注释去掉即可。
设置语言
编辑站点配置文件，将language设置成你所需要的语言。例如选用简体中文，则配置为：

language: zh-Hans

可用的语言如下列出：

语言	代码	设定值
English	en	`language: en`
简体中文	zh-Hans	`language: zh-Hans`
正体中文	zh-hk/zh-tw	`language: zh-hk`

更多的设置可在这里查看。

菜单设置
菜单配置示例：

menu: 
    home: / 
    archives: /archives 
    #about: /about 
    #categories: /categories 
    tags: /tags 
    #commonweal: /404.html

侧栏设置
默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示。可以通过修改主题配置文件中的sidebar字段来控制侧栏的行为。
支持的选项有：
post默认行为，在文章页面（拥有目录列表）时显示
always在所有页面中都显示
hide在所有页面中都隐藏（可以手动展开）
头像设置
编辑站点配置文件，新增字段avatar，值设置成头像的链接地址。
链接的地址可以是完整的路径，也可以是相对路径，如：
avatar: https://avatars1.githubusercontent.com/u/32269?v=3&s=460
或者avatar: /images/avatar.jpg
作者名称
编辑站点配置文件，设置author为你的昵称。
站点描述设置
编辑站点配置文件，设置description字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

第三方服务

多说评论系统
** 注意 **：duoshuo_shortname不是你的多说登录的 id
使用多说前需要先在多说创建一个站点。具体步骤如下：
1. 登录后在首页选择 “我要安装”。
2. 创建站点，填写站点相关信息。多说域名 这一栏填写的即是你的duoshuo_shortname，如图：
  
  多说设置示例：

duoshuo_shortname: iissnan-notes

标签云页面

Step1:
新建一个页面，命名为tags。命令如下：

hexo new page "tags"

Step2:
编辑刚新建的页面，将页面的类型设置为tags，主题将自动为这个页面显示标签云。页面内容如下：

title: Tagcloud
date: 2014-12-22 12:39:04
type: "tags"
---

注意：如果有启用多说或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

title: Tagcloud
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

Step3:
在菜单中添加链接。编辑 主题配置文件 ，添加tags到 menu中，如下:

menu: 
  home: / 
  archives: /archives 
  tags: /tags

分类页面

添加一个分类页面，并在菜单中显示页面链接。
Step1:
新建一个页面，命名为categories。命令如下：

hexo new page categories

Step2:
编辑刚新建的页面，将页面的类型设置为categories，主题将自动为这个页面显示所有分类。

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

注意：如果有启用多说或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段comments并将值设置为false，如：

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

Step3:
在菜单中添加链接。编辑 主题配置文件 ，将menu中的categories: /categories注释去掉，如下:

menu: 
  home: / 
  categories: /categories 
  archives: /archives 
  tags: /tags

代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。
默认使用的是白色的 normal。

站点建立时间

这个时间将在站点的底部显示，例如© 2013 - 2015编辑 站点配置文件，新增字段since。
since: 2013

数学公式显示

NexT 借助于 MathJax 来显示数学公式，此选项默认关闭。
编辑 主题配置文件，将mathjax设定为true即可。

# MathJax Support
mathjax: true

ProTip: 使用七牛 CDN 来加速 MathJax 脚本的加载

侧边栏社交链接

编辑 站点配置文件，新增字段social，然后添加社交站点名称与地址即可。例如：

#Social linkssocial: 
  github: https://github.com/your-user-name 
  twitter: https://twitter.com/your-user-name 
  weibo: http://weibo.com/your-user-name 
  douban: http://douban.com/people/your-user-name 
  zhihu: http://www.zhihu.com/people/your-user-name 
  # 等等

About页面

新建一个 about页面：

hexo new page "about"

菜单显示about链接，在 主题配置文件 设置中将menu中about
前面的注释去掉即可。

menu: 
  home: / 
  archives: /archives 
  tags: /tags 
  about: /about

友情链接编辑 站点配置文件 添加：

# title, chinese available
links_title: Links
# links
links: 
  MacTalk: http://macshuo.com/

腾讯公益404页面

简体中文增加腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下http://www.ixirong.com/404.html
使用方法，新建 404.html 页面，放到主题的source目录下，内容如下：

<!DOCTYPE HTML><html><head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="robots" content="all" />
 <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your site url " homePageName="回到我的主页"></script>
</body>
</html>

四、常见问题

首页显示文章摘录

NexT 支持三种方式来控制首页文章的显示方式。若需要在首页显示摘录，可以通过以下方法：

在文章中使用``手动进行截断
在文章的 front-matter 中添加description，并提供文章摘录
自动形成摘要，在主题配置文件中添加：

auto_excerpt: 
  enable: true 
  length: 150

默认截取的长度为150字符，可以根据需要自行设定

设置 favicon

将favicon放置到站点的 source目录下即可

标签和分类页面的统计数据不正确

按照以下步骤更新数据：

删除站点目录下的db.json文件
执行hexo clean
重新生成hexo g

更详细的安装配置说明：
hexojs/hexo
NexT主题

常用命令：

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

常用复合命令：

hexo deploy -g
hexo server -g

简写：

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

部署到git
编辑 站点配置 你在部署时，要把下面的zippera都换成你的账号名。

deploy: 
  type: git
  repository: http://github.com/Beckjiang/beckjiang.github.com.git
  branch: master

此处需要注意hexo在3.0版本以后，做如下改动：

安装 npm install hexo-deployer-git --save
将deploy 的 type由github改为git