站内链接:
介绍和环境安装
hexo
hexo 是什么?如何安装 hexo? 如何利用 hexo 建立简易博客? 需要做哪些配置? Hexo 相关命令? 本文将会讲解 hexo 相关的知识点, 理解标签插件(插入各种内容), 主题等.hexo 是一个快速, 简洁且高效的博客框架,使用 Markdown 或者其他渲染引擎解析文章,并生成静态页面. 类似的博客框架还有 hugo 等生成器.
安装
首先, 安装 nodeenv 虚拟运行环境, 选择合适的版本, 不建议使用高版本的 node, 否则会出现各种问题. 包的安装参考nodeenv.
a. 安装虚拟环境:
1
2
3
4
5
6
7
8
9
10
11
12
|
workon nodejs
pip install nodeenv
nodeenv --list
nodeenv --without-ssl --node=8.8.1 --npm=5.5.1 --jobs=4 env
npm install hexo-cli
|
b. 进入虚拟环境:
1
2
3
4
5
6
7
|
workon nodejs
souce env/bin/activate
./node_modules/hexo-cli/bin/hexo s --debug
./node_modules/hexo-cli/bin/hexo g
|
c. 退出虚拟环境:
1
2
3
4
|
deactivate_node
deactivate
|
PS: 2023-01-01 补充， 使用 nodeenv 更加的繁琐了，可以通过 nvm 按照不同版本的 node，之后在当前 shell 中通过 nvm 临时切换 node 版本， 然后再进行 hexo 环境的安装， 没必要搞上面的 env 环境。
基于 docker
使用 docker 安装 hexo 运行环境, 一键快速完成, 善用 docker. dockerfile 配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
FROM node:14
MAINTAINER unusebamboo unusebamboo@163.com
WORKDIR /hexo
RUN git config --global user.name "unusebamboo"
RUN git config --global user.email "unusebamboo@163.com"
RUN npm --registry https://registry.npm.taobao.org install hexo-cli@4.0.0 -g
RUN hexo init .
RUN npm --registry https://registry.npm.taobao.org install
EXPOSE 4000
CMD ["/usr/bin/env", "hexo", "server"]
|
在完成上述配置之后就可以使用如下命令构建并且运行容器:
1
2
3
4
5
6
7
8
9
|
docker build -t 'bifeng_blog:10' .
docker run -it --name="bifeng_blog" -p 4000:4000 -v $HOME/.ssh:/root/.ssh -v $HOME/Public/blog:/hexo -v $HOME/Documents/blog/_posts:/hexo/source/_posts bifeng_blog:10 bash
hexo g
hexo s --debug
|
如果不希望每次都输入 run 命令, 那使用 docker-compose 来进行管理,下面是 docker-compose.yml 配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| version: '3.4'
services:
blog:
restart: 'no'
build:
context: .
dockerfile: Dockerfile
image: bifeng_blog:10
container_name: myblog
ports:
- '4000:4000'
volumes:
- $HOME/.ssh:/root/.ssh
- $HOME/Public/blog:/hexo
|
后续可以使用命令:
1
2
3
4
5
6
7
8
|
docker-compose up
docker-compose log -f
docker-compose down
docker-compose up -d
|
运行成功之后, 就可以直接访问 4000 端口服务: http://127.0.0.1:4000
fluid 主题
最新版本基于 docker 的 fluid 主题的容器搭建, 参考使用 docker 搭建 hexo.
自定义的配置可以见fluid 主题配置, 进入该目录执行如下命令即可自动创建容器:
Command
Initialize
初始化网站的各个配置文件和相关目录,命令如下:
1
2
3
4
5
6
7
|
hexo init blog
cd blog
npm install
|
基本命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
hexo new [layout] <title>
hexo generate
hexo publish [layout] <filename>
hexo server
hexo deploy
hexo render <file1> <file2> ..
hexo migrate <type>
hexo clean
hexo list <type>
|
选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
hexo s --safe
hexo s --debug
hexo s --silent
hexo s --config custom.yml
hexo s --draft
|
Tag Pugins
说明
插入引言,可以包含(作者,来源,标题等):
1
2
3
| {% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
|
代码块:
1
2
3
| {% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}
|
三个反引号, 具体格式:
1
| [language][title][url][link text] code
|
其他配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
| # youtube视频
{% youtube video_id %}
# 文章
{% post_path slug [title] %}
# 资源
{% assert_img slug [title] %}
# 站内链接
{% post_link "markdown-path-of-special-file" "description" %}
# 站内链接例子
{% post_link "vim/vim-command-basic" "vim basic" %}
|
1
2
3
4
5
6
7
8
9
| 注意, 任何不在代码块中的{%后面都必须跟随post_link, 否则会报错, 例如:
unknown block tag: ref
或者
tag name expected
原因: 表示存在无效的语法: {% ref ...
除非用代码块, 而并非简单的`来进行注释
|
错误
如果发生错误unknown path, 则表示文章中包含某些特殊字符:
Glossary
物理布局
各个文件夹含义:
- Scaffold–根据 scaffolds 文件夹来创建文件,查找 photo.md 模板来创建新的文件
- config.yml–存放配置
- source–存放用户资源的地方, 所有的 md 文件, 网站 ico 等
- themes–博客主题, 通过 submodule 来添加主题并引用
- public–执行 hexo generate 之后, 统一生成资源,可以提取该目录进行博客的单独部署
关键术语
layout, 布局,有:post, page, draft,对应不同的路径
- post source/_posts
- page source
- draft source/_drafts
Front-Format–文件最上方使用的分割区域,指定个别文件的变量,参数说明:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| layout 文件布局
title 标题
date 建立日期(默认值为文件建立日期)
updated 更新日期(默认值文件更新日期)
comments 开启文章的评论功能(true)
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址
photos 在文章头部插入图片
其中分类具有层次性,标签则无,如果添加多个标签:
tags:[python, javascript]
或者
tags:
- python
- javascript
|
标签
对于标签和分类, 需要提前增加响应的文件夹, 以便后续能够在导航栏中进入标签和分类.
添加标签页面的命令如下:
在文件source/tags/index.md中增加 categories 内容:
1
2
3
4
5
| ---
title: tags
date: 2018-05-06 17:09:21
type: 'tags'
---
|
往文章中增加新的 tags:
分类
添加分类页面的命令如下:
1
2
| hexo new page categories
|
在文件source/categoried/index.md中增加 categories 内容:
1
2
3
4
5
| ---
title: categories
date: 2018-05-06 17:49:19
type: 'categories'
---
|
往文章中增加新的 categories:
source
资源: 资源+文章内容,其中资源表示:图片,CSS 等文件
数据文件: source/_data文件夹,用于不在文章内,但是重复使用的资料。
部署
github
每一个 github 账号只能有一个特殊的命令约定项目:username.github.io,用于
创建个人博客,所有网站内容在 master 分支下(当然,另外一种 gh-pages 这里
不再描述).在创建完项目之后,可以在 setting 中查看是否正确的完成部署操作.
github pages 原理:
- master 下的静态文件可以通过 username.github.io 链接访问
- hexo -g 会生成一个静态网站
- hexo d 会将静态网站提交到 github 上
在获取相应的 ip 地址信息后,在相应域名服务商上面设置即可。
1
2
3
4
5
6
7
|
dig https://unlessbamboo.github.io +nostats +nocomments +nocmd
unlessbamboo.github.io.
|
设置 cname, 在 hexo 项目 source/下创建 CNAME 文件,加入”www.unusebamboo.com",以便
能够顺利的访问。
coding
在创建同用户名的项目之后,进入 pages 服务项,选择部署来源,最后
绑定域名访问地址:www.unusebamboo.com,当然,首先得保证dns配置。
转移配置
对于不在代码块中的相关大括号, 可能会报错, 此时需要进行转义操作, 其中主要是number sign:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| ! ! — 惊叹号 Exclamation mark
” " " 双引号 Quotation mark
# # — 数字标志 Number sign
$ $ — 美元标志 Dollar sign
% % — 百分号 Percent sign
& & & Ampersand
‘ ' — 单引号 Apostrophe
( ( — 小括号左边部分 Left parenthesis
) ) — 小括号右边部分 Right parenthesis
* * — 星号 Asterisk
+ + — 加号 Plus sign
< < < 小于号 Less than
= = — 等于符号 Equals sign
> > > 大于号 Greater than
? ? — 问号 Question mark
@ @ — Commercial at
[ [ --- 中括号左边部分 Left square bracket
\ \ --- 反斜杠 Reverse solidus (backslash)
] ] — 中括号右边部分 Right square bracket
{ { — 大括号左边部分 Left curly brace
| | — 竖线Vertical bar
} } — 大括号右边部分 Right curly brace
|
引用:
alipay
