个人博客widiot’s blog

一、Hexo

1.1 介绍

Hexo是基于NodeJS的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github和Heroku上

超快速度
支持MarkDown
一键部署
丰富的插件

1.2 安装node.js

在nodejs官网下载对应系统的安装包，按提示安装

检验安装成功：

$ node -v

1.3 安装hexo

$ npm install hexo-cli -g

注意：Mac系统，则需要

$ sudo npm install hexo-cli -g

二、搭建博客

1.创建博客目录<username>.github.io

$ hexo init username.github.io
$ cd username.github.io
$ npm install

2.生成静态页面

$ hexo clean
$ hexo g

g即generate

3.运行

$ hexo s

s即server

4.打开浏览器，输入地址 localhost:4000 即可看到博客页面

三、发表文章

3.1 命令方式

$ hexo new test

此时会在source/_posts目录下生成test.md文件，写入一些内容再保存

然后生成静态页面，访问 localhost:4000 查看效果

$ hexo clean
$ hexo g
$ hexo s

3.2 直接方式

在 source/_posts/下新建.md文件，然后写入内容

使用上述命令生成静态页面，访问 localhost:4000 查看效果

四、配置

网站的设置大部分都在_config.yml文件中，详细配置可以查看官方文档

下面列出简单常用配置

title：网站标题
subtitle：网站副标题
description：网站描述
author：你的名字
language：网站使用的语言

注意：进行配置时，需要在冒号:后加一个英文空格

title: myblog

五、换主题

Hexo中有很多主题，可以在官网查看。这里推荐hexo-next

下面说明更换主题的一般步骤：

1.下载主题资源

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

2.应用下载的主题

在网站配置文件_config.yml中，配置theme

theme: next

next是主题名称，具体的可查看主题的文档

3.主题其他配置

可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置

接下来执行调试命令查看效果

$ hexo clean
$ hexo g
$ hexo s

六、部署到Github

1.创建一个<username>.github.io的public仓库

如果你的用户名是xxx,则需要创建一个xxx.github.io的public仓库

2.安装 hexo-deployer-git

$ npm install hexo-deployer-git --save

3.网站配置git

在网站的_config.yml中配置deploy

deploy:
  type: git
  repo: <repository url>
  branch: [branch]

branch为分支，默认为master，可以不配置

repo为仓库地址，在github上新建仓库后，可复制地址

3.部署

$ hexo d

d即deploy

七、标签

7.1 两个确认

确认站点配置文件有

tag_dir: tags

确认主题配置文件有

tags: /tags

7.2 新建tags页面

$ hexo new page tags

此时会在source/下生成tags/index.md文件

7.3 修改source/tags/index.md

title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false

7.4 在文章中添加tags

在文章xx.md中添加：

tags: 
    - Tag1
    - Tag2
    - Tag3

多个Tag可按上面的格式添加

其文件头部类似：

title: TagEditText
date: 2016-11-19 10:44:25
tags: 
    - Tag1
    - Tag2
    - Tag3

八、分类

8.1 两个确认

确认站点配置文件有

category_dir: categories

确认主题配置文件有

categories: /categories

8.2 新建categories页面

$ hexo new page categories

此时会在source目录下生成categories/index.md文件

8.3 修改categories/index.md

title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

8.4 在文章中添加categories

在文章xx.md中添加：

categories: 
    - cate

其文件头部类似：

title: TagEditText
date: 2016-11-19 10:44:25
categories: 
    - cate

九、评论功能

1.安装gitment

$npm install gitment --save

2.在 https://github.com/settings/applications/new 进行注册，获取Client ID和Client Secret

3.打开themes/next目录下的_config.yml文件进行修改并保存

gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: <username> # MUST HAVE, Your Github Username
  github_repo: <username>.github.io # MUST HAVE, The name of the repo you use to store Gitment comments
  client_id: 76xxxxxxxxxxxxxxxx5f # MUST HAVE, Github client id for the Gitment
  client_secret: 4axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxca # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

4.生成网站和提交网站

$hexo g
$hexo d

5.点击文章下方的初始化评论按钮

6.文章名太长会导致评论功能开放失败出现Error: Validation Failed错误

修改文件next/layout/_third-party/comments/gitment.swig，将id部分修改为id: '{{ page.date }}'

    {% if page.comments %}
      <script type="text/javascript">
      function renderGitment(){
        var gitment = new {{CommentsClass}}({
            id: '{{ page.date }}',
            owner: '{{ theme.gitment.github_user }}',
            repo: '{{ theme.gitment.github_repo }}',
            {% if theme.gitment.mint %}
            lang: "{{ theme.gitment.language }}" || navigator.language || navigator.systemLanguage || navigator.userLanguage,

【GitHub】GitHub+Hexo搭建个人博客