Hexo+Github pages折腾记

如果时间可以静止，我希望就停在此刻。

前言

博主之前也有折腾wordpress和jekyll可对于一个前端er来说，wordpress让人没法尽兴，因为不知道该如何添加自己的代码。而jekyll就太麻烦了每一次都需要重新提交，而且样式也不是很丰富，简直就和鸡肋一般。食之无味，弃之可惜。

之前有听说过Hexo这个博客框架，但一直没时间给自己搭一个，其实平时也有注意到很多大牛的博客是很绚丽的，却不知道那就是Hexo。说干就干，历时一整天，踩坑无数，终于变成了博主想要的样子。放个链接Damonare的个人博客如果你也想要一个和博主一样的博客，那就继续看下去吧。

• 博主系统Window7,搭建博客主题Yilia。下面记录博主搭建的整个过程。

git和github

• 想搭建一个博客的应该大多数都是程序员吧，那么github账号应该是一定有的了。你要是实在清新脱俗到连个github账号也没有，不用担心，给你个外链Github,账号设置然后添加SSH,这样你之后输入hexo命令的时候就不用一次次输入密码了，关于如何注册github和添加SSH，这里需要提醒一点，github账号最好都是小写字母，不然容易解析错误，还有邮箱，尽量别用国内的邮箱，很容易出问题了，比如你git提交的贡献不被记录。
• Git身为程序员给他应该是会用的吧。好吧假设你不会使用git和github给你个外链看这里

Hexo

• 好的，现在你有了github和git了，也配置好了，那么就需要在github新建一个仓库了,

  

  注意：这里的仓库名称要和你的username对应

• Node安装

Node可以去官网下载，或是在国内下载，由于众所周知的原因，这里放一个nodejs.cn的链接
Node内置npm包，我们之后就可以打开node命令行使用npm进行安装一些依赖，如果觉得太慢，可以使用淘宝镜像cnpm

• Hexo安装

好的，现在我们Node,git,github都弄好了，现在可以本地化一个hexo了,新建hexo文件夹，任意盘下都可以，然后命令行执行命令：

npm install hexo -g  #-g表示全局安装, npm默认为当前项目安装

如果遇到错误：

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

改用下面的命令安装：

npm install hexo --no-optional

好的，现在hexo也就绪了,hexo命令：

cd ~/githexo init hexo  #执行init命令初始化到你指定的hexo目录cd hexonpm install    #install before start blogginghexo generate       #自动根据当前目录下文件,生成静态网页hexo server         #运行本地服务

浏览器输入http://localhost:4000就可以看到效果。
浏览目录

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

添加博文

hexo new "postName"  #新建博文,其中postName是博文题目

如果不想博文在首页全部显示, 并能出现阅读全文按钮效果, 需要在你想在首页显示的部分下添加

<!--more-->

这点和wordpress是一样的

Hexo Yilia主题配置

cd ~/git/hexogit clone [e-mail]:litten/hexo-theme-yilia.git themes/yilia

在./_config.yml，修改主题为yilia
theme: yilia

Hexo 主题

查看本地效果

hexo ghexo s

完整配置信息如下：

# Site #站点信息title: blog Name #标题subtitle: Subtitle #副标题description: my blog desc #描述author: me #作者language: zh-CN #语言timezone: Asia/Shanghai #时区# URLurl: http://yoururl.com   #用于绑定域名, 其他的不需要配置root: /#permalink: :year/:month/:day/:title/permalink: posts/title.htmlpermalink_defaults:# Directory #目录source_dir: source #源文件public_dir: public #生成的网页文件tag_dir: tags #标签archive_dir: archives #归档category_dir: categories #分类code_dir: downloads/codei18n_dir: :lang #国际化skip_render:# Writing #写作new_post_name: :title.md #新文章标题default_layout: post #默认模板(post page photo draft)titlecase: false #标题转换成大写external_link: true #新标签页里打开连接filename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight: #语法高亮  enable: true  line_number: true #显示行号  auto_detect: true  tab_replace:# Category & Tag #分类和标签default_category: uncategorized #默认分类category_map:tag_map:# Date / Time format #日期时间格式## http://momentjs.com/docs/#/displaying/format/date_format: YYYY-MM-DDtime_format: HH:mm:ss# Pagination #分页per_page: 10 #每页文章数, 设置成 0 禁用分页pagination_dir: page# Extensions #插件和主题## 插件: http://hexo.io/plugins/## 主题: http://hexo.io/themes/theme: next# Deployment #部署, 同时发布在 GitHub 和 GitCafe 上面deploy:- type: git  repo: [e-mail]:username/username.git,gitcafe-pages- type: git  repo: [e-mail]:username/username.github.io.git,master# Disqus #Disqus评论系统disqus_shortname: plugins: #插件，例如生成 RSS 和站点地图的- hexo-generator-feed- hexo-generator-sitemap

其它设置，可参考：这篇博文

Hexo Yilia Bug修改

修改参考这里基本所有的问题都能在这里解决了,所以啊，一个项目的issue真的很具有参考价值，少走不少弯路，通过这里的代码博主添加了 Hexo文章统计 功能，没有动画，头像设置有null的问题以及点击小房子没反应的bug。

>

Hexo添加文章目录

我们首先要编辑文章显示页面的模板，也就是

themes/landscape/layout/_partial/article.ejs

文件。为了将目录生成在正文之前，我们首先在这个文件中找到

<%- post.content %>

并在这一行之前加入如下代码：

<!-- Table of Contents --><% if (!index && post.toc){ %><div id="toc" class="toc-article"><strong class="toc-title">文章目录</strong><%- toc(post.content) %></div><% } %>

这段代码的含义清晰明了，if语句中有两个条件，!index是为了不在首页的文章摘要中生成目录，post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足，则创建一个目录的div。

修改完这个文件之后，找一篇包含了多个子标题的文章，并在文章开头的front-matter中添加一句toc: true，在浏览器中访问这篇文章，应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看，我们还需要添加相应的CSS来将其指定为我们想要的样式。

要指定目录的样式，我们要修改的文件是

themes/landscape/source/css/_partial/article.styl

在文件的最后，添加如下代码：

/*toc*/.toc-article    background #eee    border 1px solid #bbb    border-radius 10px    margin 1.5em 0 0.3em 1.5em    padding 1.2em 1em 0 1em    max-width 28%.toc-title    font-size 120%#toc    line-height 1em    font-size 0.9em    float right.toc    padding 0    margin 1em    line-height 1.8em    li    list-style-type none.toc-child     margin-left 1em

由于Hexo使用的是stylus预处理器，所以CSS代码要注意缩进，不然就报错了，这种目录要是不满意完全可以按照自己意愿写一个。

Hexo 多说评论框

链接：多说社会化评论框核心脚本embed.js本地化方法
链接：多说社会化评论框添加 站长回复 标记
链接： 多说回复后显示浏览器及操作系统信息（Useragent）

后记

有任何问题请在评论中回复，博主会在评论中解答。