- 写在开头
什么是Hexo?
Hexo是一个轻量级的Node.js博客框架,由一位台湾的在校大学生开发完成!
Hexo的配置文件_config.yml分为两种,一种是站点配置文件,也就是站点根目录下的_config.yml配置文件,另一个是主题配置文件,位于theme文件夹中对应主题的文件夹下的_config.yml。
在后续的网站配置中需要多次使用站点配置文件和主题配置文件,需要注意辨析。
安装node.js
Windows下安装
在nodejs官网上下载最新的Windows安装包,直接安装即可。
ubuntu下安装
命令行方式安装:
sudo apt-get update
sudo apt-get install nodejs
编译源码方式安装:
在nodejs官网上找到需要下载的源码(不是二进制文件),解压之后进入目录,执行:
$ ./configure
$ make && make install
注意如果需要sudo的话, make和make install 要分开,因为sudo不能传递到&&后面的指令。
安装npm
sudo apt-get update
sudo apt-get install npm
查看node和npm版本
node -v
npm -v
- 安装cnpm
因为防火墙的缘故,很多境外网站被墙了,所以使用node.js的原生工具npm是无法正常安装模块的,建议使用淘宝前端组的国内镜像,使用他们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用方法如下:
从registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPM registry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.
cnpm install [name]
Hexo的安装与使用
安装Hexo
安转了node之后,就可以使用以下命令来安装hexo:
npm install -g hexo-cli
使用Hexo
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
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
{
"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
npm install --save hexo-admin
hexo server -d
open http://localhost:4000/admin/
设置后台密码
修改站点配置文件,就是网站根目录下的 _config.yml文件:
admin:
username: myfavoritename
password_hash: be121740bf988b2225a313fa1f107ca1
secret: a secret something
username是用户名
password_hash是密码的哈希映射值,由于不同版本的node.js的哈希算法是不一样的,所有用以下方法来产生有效的密码哈希值。
> 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 )
安装
npm install hexo-generator-feed --save
配置
在网站的根目中的_config.yml文件设置
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,在站点的根目录下执行以下命令:
npm install hexo-generator-searchdb --save
编辑 站点配置文件,新增以下内容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
除了安装本地搜索,还可以考虑 * swiftype * 的搜索。
更换hexo主题
Hexo有很多主题,可以在 _* Hexo官网的主题页面 _选择自己喜欢。
以*Next**为例,本站使用的就是Next主题。
使用Git来获取主题文件
git clone https://github.com/iissnan/hexo-theme-next themes/next
直接在Next的 GitHub主页 下载主题文件
将Next文件夹放到theme文件夹中,修改站点配置文件,也就是网站根目录下的_config.yml文件中的theme:
# 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
文件的内容。
$ 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的部分:
正确写法:
deploy:
type: git
repository: git@github.com:hunkier/hunkier.github.io.git
branch: master
错误写法:
deploy:
type: github
repository: https://github.com/hunkier/hunkier.github.io.git
branch: master
后面一种写法是hexo2.x的写法,现在已经不行了,无论是哪种写法,此时直接执行hexo d
的话一般会报如下错误:
Deployer not found: github 或者 Deployer not found: git
原因是还需要安装一个插件:
npm install hexo-deployer-git --save
其它命令不确定,部署这个命令一定要用git bash,否则会提示Permission denied (publickey).
打开你的git bash,输入hexo d
就会将本次有改动的代码全部提交,没有改动的不会:
常用hexo命令
常见命令
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
缩写:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
组合命令:
hexo s -g #生成并本地预览
hexo d -g #生成并上传
使用其他端口命令:
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根目录,执行命令:
hexo new 'my-first-blog'
hexo会帮我们在_posts
下生成相关md文件
当然你也可以直接自己新建md文件,用这个命令的好处是帮我们自动生成了时间。
一般完整格式如下:
---
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'
有什么区别呢?
hexo new page "my-second-blog"
最终部署时生成:hexo\public\my-second-blog\index.html
,但是它不会作为文章出现在博文目录。
写博客工具
那么用什么工具写博客呢?这个我还没去找,以前自己使用editor.md简单弄了个,大家有好用的hexo写博客工具可以推荐个。
如何让博文列表不显示全部内容
默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?
答案是在合适的位置加上<!--more-->
即可,例如:
# 前言
使用github pages服务搭建博客的好处有:
1. 全是静态文件,访问速度快;
2. 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
3. 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;
<!--more-->
4. 数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
5. 博客内容可以轻松打包、转移、发布到其它平台;
6. 等等;