hunkier

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

Github安装hexo博客

  • 写在开头

什么是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. 等等;
谢谢你请我喝牛奶

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