基于Hexo的Github-Pages个人博客搭建教程

基于Hexo的Github Pages个人博客搭建教程

1. Hexo安装及配置

1.1. Hexo简介

Hexo是一个基于Node.js的快速、简洁且高效的博客框架，它具有如下特点：

超快速度

Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
一键部署

只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
支持Markdown

Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
丰富的插件

Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

1.2. Node.js及Hexo安装

Hexo是基于Node.js的，而且blog管理是通过git管理的，所以Hexo需要安装Node.js和git，git的安装在此不再赘述。

1.2.1. Node.js

Windows
1. 下载安装包
  
  首先从官网下载页面https://nodejs.org/zh-cn/download下载安装包，此处以便携式包为例，假如选用安装包方式，则直接双击安装后，跳到第4步校验Node.js是否有效安装即可
  
  便携式包名字为Windows 二进制文件 (.zip)，可以根据自己的系统版本，选择32位或者64位的。
2. 解压安装包到想放置的目录
3. 将目录加入到Path全局变量中
  
  将Node.exe文件所在的目录加入到Path全局变量(控制面板->系统与安全->系统->高级系统设置->环境变量->系统变量->Path->编辑)中
4. 校验Node.js是否有效安装
  
  在任意位置打开PowerShell或者CMD，输入node -v，假如正确显示版本号，则表示安装成功
Ubuntu

Ubuntu可以直接通过命令行的方式安装Node.js和npm
```
sudo apt-get install nodejs npm
```

1.2.2. Hexo安装

对于初级用户，可安装hexo-cli
```
npm install -g hexo-cli
```
对于高级用户，则可以安装hexo
```
npm install -g hexo
```

1.3. Hexo配置

1.3.1. 创建Hexo博客工程

初始化Hexo，后面的目录是非必须的，假如没有，则以当前目录(./)初始化Hexo工程

hexo init <dir>

生成Hexo工程之后，可以用如下命令将其编译成静态页面，然后启动服务，进行本地预览

hexo generate # 生成静态网页，可简写为hexo g
hexo server # 启动服务

1.3.2. Hexo的配置

工程目录结构

.
├── _config.yml     # 网站的配置信息
├── db.json
├── package.json    # 应用程序的信息。EJS,Stylus和Markdown renderer已默认安装
├── scaffolds       # 模版文件夹。新建文章时，Hexo会根据scaffold来建立文件。
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source          # 资源文件夹是存放用户资源的地方。除_posts文件夹之外，开头命名为_(下划线)的文件/文件夹和隐藏的文件将会被忽略。Markdown和HTML文件会被解析并放到public文件夹，而其他文件会被拷贝过去。
│   └── _posts
│       └── hello-world.md
└── themes          # 主题 文件夹。Hexo 会根据主题来生成静态页面。

配置Hexo主题

在官方主题页面罗列了非常多的主题，可以根据自己的爱好选择一个主题，然后下载到themes文件夹
```
# 下载matery主题
git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery
```
然后修改Hexo工程根目录下_config.yml的theme配置为themes目录下对应主题的文件夹名字matery，主题具体的配置可以参考各个主题的帮助文档。

1.4. 创建分页

hexo new默认创建的是post类型的博客文章，有些主题包含分类、标签、关于等页面，可以按照主题的需求创建新的页面

分类categories页

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
```
hexo new page "categories"
```
编辑你刚刚新建的页面文件source/categories/index.md，至少需要以下内容：
```
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
```
然后根据自己的设计修改source/categories/index.md。

其他几种页面的操作方式跟分类页面的操作方式大同小异，在此不再赘述。
标签tags页
关于about页
留言板contact页
友情连接friends页

1.5. 安装Hexo插件

代码高亮

由于Hexo自带的语法高亮表现一般，而且并不满足每个人的配色爱好，所以可以用其他语法高亮插件进行渲染。

本出采用的是Hexo-Prism-Plugin

安装
```
npm install --save hexo-prism-plugin
```

配置

在Hexo工程的根目录中配置prism-plugin

prism_plugin:
mode: 'preprocess'  # 浏览器中实时渲染或者npm编译时预渲染
theme: 'default'    # 高亮主题，可以参考https://github.com/PrismJS/prism-themes#available-themes
line_number: false  # 显示代码块行号，默认是否
custom_css: 'path/to/your/custom.css'     # optional

然后把默认的高亮渲染器关掉

highlight:
    enable: false

搜索

搜索插件hexo-generator-search可以用来生成内容相关数据，用于站内搜索。

安装

npm install --save hexo-generator-search

配置

在Hexo工程的根目录下的_config.yml添加如下配置

search:
    path: search.xml
    field: post
    content: true

    # 配置说明
    # path: 生成的数据文件路径，假如文件扩展名是.json，生成的数据是json格式的，否则就是xml格式的
    # field: 包含的搜索范围，默认是只包含post类型的
    #   - post 只包含post下的文章
    #   - page 只包含page下的文章
    #   - all  包含所有的post和page下的文章
    # content: 数据包含的内容，true，则包含文章内的所有内容，false，则不包含文章的主体内容部分

假如不希望某一篇文章不被搜索检索，可以在文章的Front-matter中添加indexing: false参数。

中文链接转换

Hexo生成的文章链接是根据路径来生成的，假如路径或者文件名包含特殊字符或者中文的话，对于SEO会有很大的影响，所以为了更好的扩展文章检索，可以将Hexo的生成链接方式转为英文或者数字的。

hexo-abbrlink则可以为每篇文章依据文章标题生成一个永久的英文链接。
- 安装
```
npm install hexo-abbrlink --save
```
- 配置
  
  修改工程的_config.yml文件，修改如下配置
```
permalink: posts/:abbrlink/

# abbrlink config
abbrlink:
alg: crc32  #support crc16(default) and crc32
rep: hex    #support dec(default) and hex
```
文章字数统计

字数统计插件hexo-wordcount可以用于统计字数及显示预计阅读时间
- 安装
```
npm i --save hexo-wordcount
```
- 配置
  
  这个需要将相关的函数添加到主题模板中，所以具体的请参考hexo-wordcount插件的引用说明或者主题说明(假如主题已配置好的话)。
评论支持

评论统计需要主题的支持，可以参考主题的配置说明，比较常用的有：
- 畅言
- 友言
- disqus
- gitment
浏览统计

浏览统计需要主题的支持，可以参考主题的配置说明
SEO流量统计

SEO流量统计需要主题的支持，可以参考主题的配置说明

Markdown增强渲染器

默认的Markdown渲染器是Hexo内置的，可是很多非Markdown标准版的格式会不支持，因而可以引用Markdown增强渲染器hexo-renderer-markdown-it-plus，它可以支持表情、下标、上标、脚注等特性

安装

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

配置

markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix:
    linkify: true
    typographer:
    quotes: “”‘’
    pre_class: highlight

2. 上传Hexo到github.io

安装Hexo git插件
```
npm install hexo-deployer-git --save
```

配置deploy

deploy:
type: git
repo: <repository url> # https://github.com/CyrilTaylor/CyrilTaylor.github.io.git，推荐用ssh链接而不是https链接，不然每次上传时都需要输入账号密码
branch: [branch] # 推送的分支，假如留空，对于GitHub或GitCafe仓库，deploy会自动检测对应的分支
message: [message] # 留空时deploy会自动生成，生成格式是`Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}`

上传到 github.io

# 清除debug时编译的冗余文件修改
hexo clean
# deploy推送
hexo deploy

保留静态网页根目录下的CNAME、README.md等文件
- 非Markdown文件
  
  对于非Markdown文件，直接以source目录为相对根目录对应放置，hexo会将文件直接拷贝到.deploy_git目录并同步到github上，所以CNAME直接放在source/CNAME即可。
- Markdown文件
  
  由于Hexo默认会对source目录下的所有md文件渲染成html文件，因而需要将README.md排除在渲染列表外，在_config.yml文件中有一个skip_render配置，将不需要渲染的文件加入到skip_render中即可
```
skip_render:
  - "README.md"
```

3. 发布个人博客

4. Hexo相关命令详解

Hexo命令详情可参考官网说明

init
new
generate
publish
server
deploy
render
migrate
clean
list
version

参考资料：

[1] 使用hexo+github搭建免费个人博客详细教程

[2] hexo-theme-matery

随机推荐

使用NodeJS搭建你的微信机器人
你可以把该程序运行在任何支持 NodeJS 的云平台，或者你自己的 VPS 上。首先你需要理解几个概念： node.js -使用v8引擎的服务器端 JavaScript npm - nodejs
webpack和browserify用法
这两种技术都是使用按需加载的模块化的思想来开发项目，让我可以按照node的require模块的方法写前端代码。。两者用法、思想相差不大 1.webpack的安装及使用方法安装webpack：
基于webpack的前后端分离开发实践
前后端分离开发分析前后端开发分离，即是前后端除商定 API 接口外，其他的开发工作都不再相互干涉，前端开发进度不再受后端影响。以开发一个 SPA 单页应用为例，日常开发工作流程变为：前后端同设
Node多版本管理
为每个项目指定运行的Node版本 nvm 安装nvm, 用于下载和管理NodeJS的版本$ curl -o- https://raw.githubusercontent.com/creationix
nodejs的客户端deploy墨客子链
前提条件：已经在本地建了一个私有链，已经启动了vnode，已经启动两个scs 在vnode上已经有了主账户，并已经启动miner.start()，并且主账户已经有至少200个moac 假设你的主账

技术文档网