搭建Hexo博客

前端 blog jekyll github

创建时间:2017-07-18 21:50

字数:2.8k 阅读:

为什么选择Hexo
环境搭建
建站
配置
写作
发布
参考

在15年的时候，同样是使用GitHub Page搭建博客，使用一款名为dbll的主题，但不知是主题不好用还是自己太懒的关系，只发布过可怜的几篇文章。

直到最近看了一些关于作为技术人员为什么要写博客的文章和文章等，同时网易那边的面试失败，使我产生了那种对知识掌握不够细致、不够深的挫折感与悔晚感，知识面也没有广阔到什么程度去，而下定了从此之后一定要写技术博客的决心。

好了，不扯太多自己的东西，开始正式介绍使用Hexo+GitHub Page搭建自己个人博客的教程。

为什么选择Hexo

正如它主页说讲的：快速、简洁且高效。执行短短五条指令后就能运行起来看到效果

$npm install hexo-cli -g
$hexo init blog
$cd blog
$npm install
$hexo server

加上后期的一系列方便的操作指令，除了强大，想不到其它形容词，下面会介绍到这些指令。

其次是它支持Markdown解析文章。Markdown写文章有很多好处，例如不再担心排版，标记语法也很易读易记等等。这里有一些Markdown的必用语法介绍。

环境搭建

安装Hexo前，必须确认已安装NodeJS和Git。
查看NodeJS的版本

$node -v

查看Git的版本

$git --version

若都查不到对应版本号则证明还没安装。NodeJS可以通过nvm安装。
nvm的cURL安装方式

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

nvm的Wget安装方式

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

然后使用下面的指令就能安装上NodeJS

$ nvm install stable

另外，也可以使用brew来安装。
brew的安装

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后使用下面的指令安装NodeJS

brew install node

最后就可以安装Hexo了

$ npm install -g hexo-cli

nvm是Node Version Manager，用于管理NodeJS的版本。
npm是Node Package Manager，是随同NodeJS一起安装的包管理工具。上面安装Hexo的指令则代表安装一个全局的模块。

建站

执行下面3条指令，就能将博客站点的搭建起来

$ hexo init [folder]
$ cd [folder]
$ npm install

hexo init [folder]：代表在一个空的文件夹上建站，将Hexo站点模板拷贝到该目录下。
npm install：代表安装当前目录下编写好的所有NodeJS包。

然后目录看起来就是下面这样子

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

_config.yml：是站点的配置信息；
package.json：里面有显示安装了哪些NodeJS包和Hexo这个site的一些信息，可以自由移除；
scaffolds：模版文件夹。当您新建文章时，Hexo 会根据scaffold来建立文件。Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source：存放用户资源的地方，”_”开头和隐藏的文件会被忽略。里面的_drafts用于存放草稿，_posts用于存放正式发布的文章；
themes 里用于存放主题包，这里我使用的是Next主题。

配置

GitHub Pages

因为要利用GitHub Pages来安放站点，所以先要在自己的GitHub上新建一个repository，命名必须遵从yourusername.github.io这样的规则，否则pages页面将无法构建生成。

然后可以选择性地绑定一个域名，如果不绑定域名，则你的站点只能通过yourusername.github.io这样的形式访问了。在刚创建的repository的Settings-GitHub Pages上面，将要绑定的域名配置到Custom Domain上，而且需要选择pages页面构建依赖的分支，如下图

域名可以通过阿里云、GoDaddy那些平台购买。由于网站使用的是GitHub的服务器，部署在外国的，所以我们的域名可以不用申请ICP备案。

我的域名是在阿里云购买的。购买到域名后，还需到阿里云控制台的域名管理处设置一下，为新买的域名添加解析，可参考阿里云官方教程，主要是为域名添加如下图的3个解析，包括两个DNS和一个Github Pages的地址。

这里选用别名CNAME的方式绑定，这样解析能允许多个域名映射到同一台主机。注意，最后一步，记得对域名做实名认证，估计是国情规定，如果到GoDaddy购买的com域名应该不需认证。

然后，回到站点文件夹中，在public文件夹里添加一个CNAME的文件(不能有任何扩展名)，里面填上自己的域名，不带http://这种协议。这个文件是用于告诉GitHub该pages绑定的域名是哪个，而放到public是为了给Hexo部署站点，把该CNAME文件push到GitHub的根目录上。

站点配置

在站点配置信息_config.yml里，有一些参数最好修改一下再开始使用，不然正式上线的博客里面很多内容都是模板所提供的。其它具体的参数定义可到Hexo官网-配置参考。

title: Fung's Blog
subtitle:
description: 格言
author: fung fay
language: zh-Hans
timezone: Asia/Shanghai

theme: next
deploy:
  type: git
  repo: https://github.com/leo9763/leo9763.github.io

主题配置

在主题配置信息themes/next/_config.yml里，也可以按自己的需要修改参数，可参考Next官网-配置。下面是我修改到的部分

#主题风格
# scheme: Muse
scheme: Mist
# scheme: Pisces

#主菜单选项
menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

#个人资料中的链接
social:
  GitHub: https://github.com/leo9763
  Twitter: https://twitter.com/Nero_Milk

#页面icon
favicon: uploads/qgithub.jpg
#个人头像
avatar: uploads/qgithub.jpg
#代码高亮的风格
highlight_theme: night
#第三方评论工具hypercomments的ID，还可以选择disqus等
hypercomments_id: 93415
#站点统计分析工具googleAnalytics的ID，还可以选择Yandex等平台
google_analytics: UA-102751023-1

评论框

要说一下评论模块的设置部分，现在多说已经用不了了，网易云跟贴也在月底下线，本来打算用disqus的，但按足提示步骤设置后评论框死活出不来，然后就改用了一款来自于战斗民族的hypercomments，这个平台的缺点是，后台纯英文（也有俄文- -），好吧，这其实不算什么缺点，然后是其只能使用Google的账号登录评论，不能翻墙的就byebye吧。但是优点也有很多

免费版本支持每月最多100K的加载次数。每小时最多1000次的请求。
界面简洁。
支持填写邮箱进行回复，不需要强制登录第三方账号。
支持emoji和回复添加附件。
评论框不需要访客翻墙也能显示出来。

只要主题的hypercomments_id参数开启并设置上ID，则page模板中的评论框部分的预设代码就会生效，这个好像是针对比较新的Next才有预设好代码，反正我使用的5.1.1是预设好的。

站点统计

这里使用的是GoogleAnalytics，但当我生成好Analytics ID并设置好以后，GoogleAnalytics的后台一直没有检测到数据。

写作

新建文章

可以使用下面的指令完成一份草稿

$ hexo new draft <title> #新建草稿
$ hexo publish post <title> #发布到post里去

当然，还可以自定义模板，在scaffolds中设定好自定义模板xxx.md，然后在新建文件时选择自定义的模板

$ hexo new photo "gallery"

这样文章就会根据模板来layout。

分类和标签

如果想主页菜单和文章中的tags和categories能点击后正常跳转页面的话，则需要先执行下面两个指令来创建出对应的资源文件夹

$ hexo new page tags
$ hexo new page categories

page这个参数代表选择了一个layout模板，而这两条指令的意思是新建一个page，名叫tags和categories，从而使主题配置中的菜单参数tags能访问到/tags。执行指令后站点的source目录下会多出tags和categories这两个文件夹，里面分别存有一个index.md文件（到部署站点的时候，source目录下的文件会被hexo识别选择添加到site的根目录上，即是public文件夹所模拟的目录）。

文章中指定分类和标签的示例如下

categories:
- Papers
- Diary
tags:
- PS3
- Games

Hexo 中标签tag和分类categories两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。上面的示例中，Diary相当于Papers的一个子分类，而PS3和Games这两个标签则是独立存在的。

插图

官方方法。这个方法很实用，基本满足需求，且能在首页上也能正常显示文章的图片。

{% asset_img example.jpg this is title %}

第一个参数是固定值，代表寻找图片资源，还有asset_link、asset_path这些查找其它类型资源的定值。
第二个参数是相对路径，Hexo会在与文章同名的文件夹中找出该参数名字的图片。
第三个参数是图片的备注，会显示在图片的下方。

使用这种方法前，先在站点配置文件中将post_asset_folder设为true，这样就能在每次通过指令hexo new [layout] <title>创建新文章时对应建立一个同名文件，配对存放该文章的图片。

Markdown方法。这个方法会难于管理图片，在首页中还不能正常显示。图片一般放在source的images文件夹里存放。

![](/images/image.jpg)

在线图片。这个方法的好处是节省了博客服务器的空间，但缺点是图片放在别人的地方，不知哪天随时会有什么情况影响显示，甚至找不回来，常用的有七牛、极简图床、Gimhoy图床。上传到云服务器后，将得到的图片链接用下面的方式插入到文章即可。

![](http://ifungfay.com/uploads/qgithub.jpg)

想插入更多其它的内容请参考Next官方的标签插件介绍，例如引用块``代码块``文章等等。

发布

在终端执行下面指令，就能在http://localhost:4000/上查看效果

$ hexo server 
#简写 hexo s

如果想本地站点的更新发布到远端，即是访问自己域名的时候要看到更新信息的话，则需要执行下面指令

$ hexo generate
$ hexo deploy
```	
或者简写为下面这样，使站点生成完毕后自动部署网站
``` bash
$ hexo g -d

直到上面一条指令执行完为止，站点的静态文件就生成完毕，并自动将静态网站push到GitHub Page的仓库(即是以上说的站点配置文件中的deploy参数指定的git地址)上面去，这时自己域名访问到的内容也就更新了。

参考

hexo是怎么工作的
 从零开始制作Hexo主题
 EJS 模板快速入门

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 mingfungliu@gmail.com