hunkier

学习笔记，开源代码，技术分享

Github安装hexo博客

发表于 更新于 分类于 ， ， Disqus：
  • 写在开头

什么是Hexo？

Hexo是一个轻量级的Node.js博客框架，由一位台湾的在校大学生开发完成！

Hexo的配置文件_config.yml分为两种，一种是站点配置文件，也就是站点根目录下的_config.yml配置文件，另一个是主题配置文件，位于theme文件夹中对应主题的文件夹下的_config.yml。

在后续的网站配置中需要多次使用站点配置文件和主题配置文件，需要注意辨析。

安装node.js

Windows下安装

在nodejs官网上下载最新的Windows安装包，直接安装即可。

ubuntu下安装

命令行方式安装：

1
2
sudo apt-get update
sudo apt-get install nodejs

编译源码方式安装：

在nodejs官网上找到需要下载的源码（不是二进制文件），解压之后进入目录，执行：

1
2
$ ./configure
$ make && make install

注意如果需要sudo的话， make和make install 要分开，因为sudo不能传递到&&后面的指令。

安装npm

1
2
sudo apt-get update
sudo apt-get install npm

查看node和npm版本

1
2
node -v
npm -v
  • 安装cnpm

因为防火墙的缘故，很多境外网站被墙了，所以使用node.js的原生工具npm是无法正常安装模块的，建议使用淘宝前端组的国内镜像，使用他们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

使用方法如下：

从registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPM registry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.

1
cnpm install [name]

Hexo的安装与使用

安装Hexo

安转了node之后，就可以使用以下命令来安装hexo：

1
npm install -g hexo-cli

使用Hexo

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <folder>
cd <folder>
npm install

新建完成后，指定文件夹的目录如下：

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

_config.yml 网站的 配置 信息

您可以在此配置网站大部分的参数。

package.json 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.0.0",
    "hexo-generator-archive": "^0.1.0",
    "hexo-generator-category": "^0.1.0",
    "hexo-generator-index": "^0.1.0",
    "hexo-generator-tag": "^0.1.0",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-stylus": "^0.2.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-server": "^0.1.2"
  }
}

scaffolds模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source资源文件夹是存放用户资源的地方。

除 _posts 文件夹之外，开头命名为 _(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes主题 文件夹。

Hexo 会根据主题来生成静态页面。

安装hexo插件

在hexo中实现可视化编辑博客（hexo-admin）

hexo-admin-github

安装并使用hexo-admin

1
2
3
npm install --save hexo-admin
hexo server -d
open http://localhost:4000/admin/

设置后台密码

修改站点配置文件，就是网站根目录下的 _config.yml文件:

1
2
3
4
admin:
  username: myfavoritename
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something

  • username是用户名

  • password_hash是密码的哈希映射值，由于不同版本的node.js的哈希算法是不一样的，所有用以下方法来产生有效的密码哈希值。

1
2
3
4
5
>  node
> const bcrypt = require('bcrypt-nodejs')
> bcrypt.hashSync('your password secret here!')
> //=> '2a10$8f0CO288aEgpb0BQk0mAEOIDwPS.s6nl703xL6PLTVzM.758x8xsi'
>
  • secret是用于产生cookie值的。

在站点配置文件中设置好以下三个值之后，登录 http://localhost:4000/admin/ 就会提示输入账号密码。

在hexo中实现RRS功能（ hexo-generator-feed ）

安装

1
npm install hexo-generator-feed --save

配置

在网站的根目中的_config.yml文件设置

1
2
3
4
5
6
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

type - Feed type. (atom/rss2) 
path - Feed path. (Default: atom.xml/rss2.xml) 
limit - Maximum number of posts in the feed (Use 0 or false to show all posts) 
hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it) 
content - (optional) set to ‘true’ to include the contents of the entire post in the feed.

在hexo中实现本地搜索功能（hexo-generator-searchdb）

安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
npm install hexo-generator-searchdb --save

编辑 站点配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

除了安装本地搜索，还可以考虑 * swiftype * 的搜索。

更换hexo主题

Hexo有很多主题，可以在 _* Hexo官网的主题页面 _选择自己喜欢。 
以*Next**为例，本站使用的就是Next主题。

使用Git来获取主题文件

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

直接在Next的 GitHub主页 下载主题文件

将Next文件夹放到theme文件夹中，修改站点配置文件，也就是网站根目录下的_config.yml文件中的theme：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

上传到github

如果你一切都配置好了，发布上传很容易，一句hexo d就搞定，当然关键还是你要把所有东西配置好。

首先，ssh key肯定要配置好。

创建SSH
在gitbash中输入：ssh-keygen -t rsa -C "youremail@example.com，生成ssh。然后按下面的方式找到id_rsa.pub文件的内容。

1
2
3
4
5
$ cd ~/.ssh/
$ ls
id_rsa  id_rsa.pub  known_hosts
$ cat id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC0avsgprEOmpE1yVnbU4hjireV3Ozxb5vFLl4KXgkVY9X3O78E5y10rSa9CHs4lFao/Gij3G/VuXAC/id0pY7ti/BD6CmY8etFlZun9Zw+7Z41gRRrFxreXGwFhzfJeu6CVGYSQgPMjgu1TCCO9wM1hwU41T/Nof3F2kDlRn0pxvmIAkGNy/E8dtB9alY7ObNyrMuACZX8k42STttlte6MlelBVckFyks5IwQ+WdBc0giZTlfXbrL455HiEXitN20FQDznFoX96+iBlAa/WTE2fqVlKY22t5rmyU//JQkFG9ttxAOinADzTLskysE3eWaiupvA0gAjRc4rr8Sg83gJ huangkuier@gmail.com

把id_rsa.pub文件的内容添加到github的ssh key中。

其次，配置_config.yml中有关deploy的部分：

正确写法：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:hunkier/hunkier.github.io.git
  branch: master

错误写法：

1
2
3
4
deploy:
  type: github
  repository: https://github.com/hunkier/hunkier.github.io.git
  branch: master

后面一种写法是hexo2.x的写法，现在已经不行了，无论是哪种写法，此时直接执行hexo d的话一般会报如下错误：

1
Deployer not found: github 或者 Deployer not found: git

原因是还需要安装一个插件：

1
npm install hexo-deployer-git --save

其它命令不确定，部署这个命令一定要用git bash，否则会提示Permission denied (publickey).

打开你的git bash，输入hexo d就会将本次有改动的代码全部提交，没有改动的不会：

常用hexo命令

常见命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令：

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

使用其他端口命令：

1
2
3
4
hexo s -p 5000
(node:13224) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
INFO  Start processing
INFO  Hexo is running at http://localhost:5000/.

4.11. _config.yml

这里面都是一些全局配置，每个参数的意思都比较简单明了，所以就不作详细介绍了。

需要特别注意的地方是，冒号后面必须有一个空格，否则可能会出问题。

4.12. 写博客

定位到我们的hexo根目录，执行命令：

1
hexo new 'my-first-blog'

hexo会帮我们在_posts下生成相关md文件

当然你也可以直接自己新建md文件，用这个命令的好处是帮我们自动生成了时间。

一般完整格式如下：

1
2
3
4
5
6
7
8
9
---
title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---

以下是正文

那么hexo new page 'postName'命令和hexo new 'postName'有什么区别呢？

1
hexo new page "my-second-blog"

最终部署时生成：hexo\public\my-second-blog\index.html，但是它不会作为文章出现在博文目录。

写博客工具

那么用什么工具写博客呢？这个我还没去找，以前自己使用editor.md简单弄了个，大家有好用的hexo写博客工具可以推荐个。

https://www.typora.io

如何让博文列表不显示全部内容

默认情况下，生成的博文目录会显示全部的文章内容，如何设置文章摘要的长度呢？

答案是在合适的位置加上<!--more-->即可，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 前言

使用github pages服务搭建博客的好处有：

1. 全是静态文件，访问速度快；
2. 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
3. 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；

<!--more-->

4. 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
5. 博客内容可以轻松打包、转移、发布到其它平台；
6. 等等；
谢谢你请我喝牛奶

欢迎关注我的其它发布渠道