博客折腾笔记①：hexo 部署与自定义

发表于 分类于 阅读次数： 本文字数： 15k 阅读时长 ≈ 29 分钟

今天重新部署了一次 Hexo，记录一下过程。
方案：静态页面部署在 gitpage，hexo 文件备份到 github 私有库

注意：
博客配置文件：/_config.yml （位于博客根目录下）
主题配置文件：/themes/ThemeName/_config.yml （位于各主题文件夹下）
请注意区分二者

准备工作

github 上建一个 xxxx.github.io 的公开仓库和一个私有库
其中 xxxx 是你的 github 用户名，xxxx.github.io 是博客域名

hexo 官网
下载安装 Node.js、Git ，git 配置好信息
然后 Cmd/Powershell 执行

npm install -g hexo-cli

初始化 hexo

先建好博客的文件夹
然后命令行

hexo init <folder>
cd <folder>
npm install

然后修改文件下的_config.yml 参数

参数详见 https://hexo.io/zh-cn/docs/configuration
记得修改域名

修改_config.yml 的 deploy 部分

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: https://github.com/yyyy/xxxx.github.io.git
    branch: master

修改完后执行

hexo g
hexo d

稍等一会，应该就能访问到了

基本调整

设置备份

安装插件 hexo-git-backup 把 hexo 文件备份到建好的私有库

npm install hexo-git-backup --save

安装后在_config.yml 加入以下内容，填好私有库的信息

backup:
type: git
theme: landscape,next
repository:
   origin: https://github.com/yyyy/xxxx.github.io.git,branchName

theme 里填写你要同步的主题名
这里预先填了个 next，稍后再进行主题的安装

有需要的话，还可以编辑根目录下的.gitinore 来选择备份的文件，这里默认已经配置好不用修改了

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

附录：Hexo 的源文件说明：
1、_config.yml 站点的配置文件，需要拷贝；
2、themes/ 主题文件夹，需要拷贝；
3、source 博客文章的.md 文件，需要拷贝；
4、scaffolds/ 文章的模板，需要拷贝；
5、package.json 安装包的名称，需要拷贝；
6、.gitignore 限定在 push 时哪些文件可以忽略，需要拷贝；
7、.git/ 主题和站点都有，标志这是一个 git 项目，不需要拷贝；
8、node_modules/ 是安装包的目录，在执行 npm install 的时候会重新生成，不需要拷贝；
9、public 是 hexo g 生成的静态网页，不需要拷贝；
10、.deploy_git 同上，hexo g 也会生成，不需要拷贝；
11、db.json 文件，不需要拷贝。

引用自：https://www.jianshu.com/p/baab042849023

备份操作

hexo backup

或者

hexo b

进行备份

还原操作

  1. 安装 git、node.js

  2. 使用 git clone 将备份库克隆到本地

  3. cd 进博客根目录，依次执行

    1
    2
    3
    $ npm install hexo-cli -g
    $ npm install
    $ npm install hexo-deployer-git

排错指南

  1. 尝试提权 /sudo
  2. 出现类似 
events.js:167
    throw er; // Unhandled 'error' event
    ^

Error: spawn rm ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
    at onErrorNT (internal/child_process.js:407:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:238:12)
    at onErrorNT (internal/child_process.js:407:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)

的错误时可以尝试删掉主题文件夹中的.git 隐藏文件夹试试

参考 备份报错 #27

设置分类，建立模板

略

更换 hexo-renderer-markdown-it 渲染器

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

然后再安装几个相关插件

npm install markdown-it-emoji markdown-it-checkbox markdown-it-katex

安装后复制下列内容到_config.yml

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji
    - markdown-it-checkbox

安装后新增的功能：

  • emoji：
    😄
1
:smile:
  • KateX（存在显示 bug，已弃用，目前实现方式见后）

1
$\sqrt{3x-1}+(1+x)^2$
  • Checkbox 选框，TO-DO 用
1
2
- [ ] 无
- [x] 有
  • 注脚
    1234[^1]
1
2
1234[^1]
 [1]： 注脚演示。

[1]： 注脚演示。

  • 荧光标记
    荧光 
1
==荧光==
  • 上标、下标
    19th
    H2O
1
2
19^th^
H~2~O

主题安装配置

这里主题选择的是 next

$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

下载后前往博客根目录的_config.yml 切换主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

随后打开编辑 /themes/next/_config.yml 进行主题配置

官方文档：https://theme-next.org/docs/

基本设置

切换风格

官方提供了 Muse、Mist、Pisces、Gemini 四种布局风格，这里选择 Gemini

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

开启夜间模式适配

darkmode: true

切换语言

language: zh-CN

设置站点图标

favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

备案展示

# Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

CC 标识

这里我选择的是 by-nc-sa

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: deed.zh

设置菜单栏

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
home: / || home
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
about: /about/ || user

# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false

设置侧边栏

# Sidebar Settings
# See: https://theme-next.org/docs/theme-settings/sidebar

侧边栏大小位置

sidebar:
# Sidebar Position.
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar padding in pixels.
padding: 18
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false

头像

# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.png
# If true, the avatar will be dispalyed in circle.
rounded: false
# If true, the avatar will be rotated with the cursor.
rotated: false

# Posts / Categories / Tags in sidebar.
site_state: true

友情链接

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/xxxx || github
E-Mail: mailto:[email protected] || envelope
RSS: /atom.xml || rss
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

social_icons:
enable: true
icons_only: true
transition: true

# Blog rolls
links_settings:
icon: link
title: Links
# Available values: block | inline
layout: block

links:
#Title: http://yoursite.com

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).

TOC

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc.
max_depth: 6

即时交谈

# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
enable: false
#service: chatra
#service: tidio
icon: comment # Icon name in Font Awesome, set false to disable icon.
text: Chat # Button text, change it as you wish.

帖子页面

# ---------------------------------------------------------------
# Post Settings
# See: https://theme-next.org/docs/theme-settings/posts
# ---------------------------------------------------------------

在文章中使用 <!-- more --> 来使文章在首页不完全展示

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

文章信息

# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
    enable: true
    another_day: true
categories: true

安装插件 hexo-symbols-count-time 来显示字数信息和阅读时间预计

$ npm install hexo-symbols-count-time

然后修改博客根目录_config.yml, 添加

symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: false
exclude_codeblock: false
awl: 2
wpm: 300
suffix: "mins."

Note for Chinese users: because in Chinese language average word length about ~1.5 and if you at most cases write posts in Chinese (without mixed English), recommended to set awl to 2 and wpm to 300.
But if you usualy mix your posts with English, awl to 4 and wpm to 275 will be nice.
然后修改主题的_config.yml

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false

底部标签样式

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

打赏、文末信息

# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
# If true, reward will be displayed in every article by default.
enable: false
animation: false
#comment: Donate comment here.

reward:
#wechatpay: /images/wechatpay.png
#alipay: /images/alipay.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
#Twitter: https://twitter.com/username || twitter
#Telegram: https://t.me/channel_name || telegram
#WeChat: /images/wechat_channel.jpg || wechat
#RSS: /atom.xml || rss

相关主题推荐

安装 hexo-related-popular-posts

npm install hexo-related-popular-posts

修改主题的配置文件

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: # Custom header, leave empty to use the default one
display_in_home: false
params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

标签页面

先创建标签页面

hexo new page Tags

然后打开 /source/tags/index.md，编辑成

---
title: Tags
date: 2020-03-19 16:21:51
type: tags
comments: false
---

然后修改主题的对应配置文件

# TagCloud settings for tags page.
tagcloud:
# All values below are same as default, change them by yourself.
min: 12 # Minimun font size in px
max: 30 # Maxium font size in px
start: "#ccc" # Start color (hex, rgba, hsla or color keywords)
end: "#111" # End color (hex, rgba, hsla or color keywords)
amount: 200 # Amount of tags, change it if you have more than 200 tags

分类页面

同上

hexo new page Categories

编辑生成的 index.md

---
title: Categories
date: 2020-03-19 16:19:06
type: categories
comments: false
---

404 界面

把 404.html 放在 /source/ 下，然后修改博客根目录的配置文件

skip_render: "404.html"

谷歌日历 （未配置）

# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
calendar_id: <required> # Your Google account E-Mail
api_key: <required>
orderBy: startTime
offsetMax: 24 # Time Range
offsetMin: 4 # Time Range
showDeleted: false
singleEvents: true
maxResults: 250

安卓上 chrome 的沉浸颜色？（不是很明白）

# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

自定义 logo，在网站标题菜单栏上面的位置

# Custom Logo (Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg

代码块的风格

配色方案预览：https://github.com/chriskempson/tomorrow-theme

codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
# Add copy button on codeblock
copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: flat

返回顶部样式

back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

# Reading progress bar
reading_progress:
enable: false
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

阅读进度记忆、书签

# Bookmark Support
bookmark:
enable: true
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: manual

右上角来 Github 叉我啊图标

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: false
permalink: https://github.com/yourname
title: Follow me on GitHub

字体设置

详见 https://theme-next.org/docs/theme-settings/#Fonts-Customization
这里用的是默认，只添加了中科大的源，其他的就不展示了

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host: //fonts.lug.ustc.edu.cn

SEO 相关

禁用百度移动页面转换

# Disable Baidu transformation on mobile devices.
disable_baidu_transformation: true

其他没有设置，略

高级设置

RSS 订阅

$ npm install hexo-generator-feed

然后在博客配置文件中添加：

feed:
type: atom
path: atom.xml
limit: 20
hub:
content: true
#content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:

参数参考文档：https://github.com/hexojs/hexo-generator-feed

MathJax 数学公式渲染

参考：https://github.com/stevenjoezhang/hexo-filter-mathjax

$ npm install hexo-filter-mathjax

博客配置文件加上

mathjax:
tags: none # or 'ams' or 'all'
single_dollars: true # enable single dollar signs as in-line math delimiters
cjk_width: 0.9 # relative CJK char width
normal_width: 0.6 # relative normal (monospace) width

排错指南：如果出现无法渲染页面的情况，重新安装 hexo-renderer-markdown-it 即可

注意：

  1. 注意符号冲突，如 $ 前加 \ 来避免冲突
  2. 需要渲染数学公式，请先在文章开头 font-matter 中加入 mathjax: true
    eg:
1
2
3
4
5
<!-- This post will render the Math Equations -->
 ---
 title: Will Render Math
 mathjax: true   
 ---

pjax

采用 CDN 方式安装
先修改

pjax: true

然后修改下方

vendors:
...
pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js

FancyBox

同上，先

fancybox: true

然后

vendors:
...
jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
fancybox: //cdn.jsdelivr.net/npm/fancybox@3/dist/js/jquery.fancybox.pack.js
fancybox_css: //cdn.jsdelivr.net/npm/fancybox@3/dist/css/jquery.fancybox.min.css
...

Lazyload 图片懒加载

同上，先

lazyload: true

然后

vendors:
...
lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
...

Pangu Autospace 中英文自动空格分离 （未配置）

https://theme-next.org/docs/third-party-services/external-libraries#Pangu-Autospace

https://theme-next.org/docs/third-party-services/external-libraries#Quicklink

Animation Effect 过度动画设置（未配置）

https://theme-next.org/docs/third-party-services/external-libraries#Animation-Effect

Progress Bar 网页加载进度条动画

同上，先

pace:
enable: true

然后配置 css

vendors:
...
pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/black/pace-theme-minimal.css
...

上方 pace_css 中可以设置颜色（修改 black）
可选效果一览：https://github.hubspot.com/pace/docs/welcome/
可选颜色：https://www.jsdelivr.com/package/npm/pace-js?path=themes

Valine 评论系统

这里使用 Valine
先注册登录 Leanclub 国际站（需要验证手机号），然后参考 https://theme-next.org/docs/third-party-services/comments#Valine-China

注意： 中国站需要实名验证，且网站似乎还要已备案才能用

LeanCloud 访问数据统计

https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/LEANCLOUD-COUNTER-SECURITY.md

注意： 涉及域名，更换域名时注意修改！

Local Search 本地搜索

$ npm install hexo-generator-searchdb

然后编辑博客配置文件，加入

search:
path: search.xml
field: post
format: html
limit: 10000

再编辑主题配置文件

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the pag
preload: false

特殊标签

使用文档：https://hexo.io/zh-cn/docs/tag-plugins.html
这里仅提供示例

引言

Elegant in code, simple in core

Every interaction is both precious and an opportunity to delight.

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Note

文档：https://theme-next.org/docs/tag-plugins/note

(without define class style)

Primary Header

Welcome to Hexo!

Lists in note

  • ul
  • ul
    • ul
    • ul
  • ul
  1. ol
  2. ol
  3. ol
  4. ol
  5. ol

Tabs

文档：https://theme-next.org/docs/tag-plugins/tabs
我真的不懂啊

This is Tab 1.

This is Tab 2.

This is Tab 3.

PDF

文档：https://theme-next.org/docs/tag-plugins/pdf

Mermaid 流程图

文档：https://theme-next.org/docs/tag-plugins/mermaid

其他官方文档有的就自己看去吧