使用 Hexo 搭建博客
Hexo 安装
运行环境安装
Hexo 安装
npm install -g hexo-cli
创建目录
Hexo 安装完成后,选择一个空文件夹执行:
hexo init <folder>
cd <folder>
npm install
初始化后,目录结构如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
只需要关注:_config.yml / source/ / themes/,其余文件不需要修改
页面生成
使用命令生成静态文件
hexo g # hexo generate
然后再使用 hexo s 可在本地启动
hexo s # hexo server
使用 hexo clean 清除生成的静态文件
hexo clean
一键部署 Github Page
下载插件:
npm install hexo-deployer-git --save
然后在 _config.yml 中添加 deploy 配置
deploy:
type: git
repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch]
message: [message]
| 选项 | 描述 | 默认 |
|---|---|---|
repo |
目标存储库的 URL | |
branch |
分支名称 | gh-pages (GitHub) coding-pages (Coding.net) master (others) |
message |
自定义提交信息 | Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }} |
token |
可选的令牌值,用于认证 repo。 用 $ 作为前缀从而从环境变量中读取令牌 |
在 Repository Settings 中将默认分支设置为 _config.yml 配置中的分支名称
当需要更新部署时,使用以下命令就会自行上传并部署
hexo d # hexo deploy
基础配置
可以在 _config.yml 或代替配置文件中修改大部分的配置
网站
| 设置 | 描述 |
|---|---|
title |
网站标题 |
subtitle |
网站副标题 |
description |
网站描述 |
keywords |
网站的关键词。支持多个关键词。 |
author |
您的名字 |
language |
网站使用的语言。使用 2 个字母的 ISO-639-1 代码,或 它的变体。默认为 en。 |
timezone |
网站时区。 Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai。 |
网址
| 设置 | 描述 | 默认值 |
|---|---|---|
url |
网址, 必须以 http:// 或 https:// 开头 |
|
root |
网站根目录 | url's pathname |
permalink |
文章的 永久链接 格式 | :year/:month/:day/:title/ |
permalink_defaults |
永久链接中各部分的默认值 | |
pretty_urls |
改写 permalink 的值来美化 URL |
|
pretty_urls.trailing_index |
是否在永久链接中保留尾部的 index.html,设置为 false 时去除 |
true |
pretty_urls.trailing_html |
是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html 无效) |
true |
网站存放在子目录
如果您的网站存放在子目录中,例如
http://example.com/blog,则请将您的url设为http://example.com/blog并把root设为/blog/。
例如:
# e.g. page.permalink is http://example.com/foo/bar/index.html
pretty_urls:
trailing_index: false
# becomes http://example.com/foo/bar/
目录
| 设置 | 描述 | 默认值 |
|---|---|---|
source_dir |
Source 文件夹存储内容的位置 | source |
public_dir |
Public 文件夹生成静态站点的位置 | public |
tag_dir |
标签文件夹 | tags |
archive_dir |
归档文件夹 | archives |
category_dir |
分类文件夹 | categories |
code_dir |
Include code 文件夹,source_dir 下的子目录 |
downloads/code |
i18n_dir |
国际化(i18n)文件夹 | :lang |
skip_render |
匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。 |
例如:
skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染
## This also can be used to exclude posts,
skip_render: "_posts/test-post.md"
# will ignore the `source/_posts/test-post.md`.
以上是比较重要的配置,还有部分配置未列出,可参考文档
主题
以 butterfly 主题为例
下载主题
(建议先 Fork 一份主题,使用自己 Fork 后的链接)
在 Hexo 项目的根目录下,下载 Clone theme
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
启动主题
在根目录下的 _config.yml 中,修改主题
theme: butterfly
安装插件
npm install hexo-renderer-pug hexo-renderer-stylus --save
主题配置
为避免主题升级时,下载主题会将自己的配置文件覆盖,所以先将 themes/butterfly/_config.yml 复制到根目录(不要删除),并重命名为 _config.butterfly.yml,之后在根目录的配置文件中进行修改
之后可以自行查看配置文件中的选项,选择是否启动
一般需要配置:
- 启动数学公式渲染
math:
# Choose: mathjax, katex
# Leave it empty if you don't need math
use: mathjax
- 设置 Logo
nav:
# Navigation bar logo image
logo:
display_title: true
display_post_title: true
# Whether to fix navigation bar
fixed: false
- 设置导航栏
menu:
Home: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
娱乐||fas fa-list:
音乐: /music/ || fas fa-music
电影: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart
- 设置跳转链接
social:
fab fa-github: https://github.com/musuyin || Github || '#24292e'
fas fa-envelope: mailto:musuyin@qq.com || Email || '#4a7dbe'
参考文档
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 木素音的小站!