# 动机
每个故事都会有一个开头,为什么我放着 cnblog 这样的傻瓜式的 blog 不用,非要自己折腾一个 blog。我想还是羡慕,每当看到 dalao 们各种或花式或简约的个人博客,就有自己创建一个 blog 的冲动,刚好周六花了一天时间把这个事情完成了。
# 基础环境搭建
# 安装 Nodejs
sudo apt-get install nodejs | |
sudo apt-get install npm | |
sudo npm config set registry https://registry.npm.taobao.org | |
sudo npm install -g n # 一定要升级,不然不兼容 hexo | |
sudo n stable # latest |
# 安装 hexo
npm install -g hexo-cli |
如果在安装 hexo-cli 时遇到 error,很大原因是因为你的 nodejs 版本不够,你可以 node -v
查看版本并升级 nodejs。
# github 创建仓库
这里建立仓库是有讲究的,首先必须是 public,不然就会 404。并且仓库名,命名按照 userid.github.io
进行命名,userid 是你的 github 用的 id,注意不是 github 的昵称,不要搞混了。
在 setting 选项中,选择 pages,开启 page 功能。
# 初始化博客
# init Blog
选择一个目录,进行博客初始化
hexo init blog_name(你的博客名称)
我的 blog 名称是 SonglinLife
,所以会生成一个 SonglinLife
的文件夹,这个文件夹就是博客的 root 文件夹。
cd SonglinLife
# 配置
因为我的 blog 是托管在 github 上的,所以需要设置 github 仓库地址(请确认你的 github 账号和你的 ssh key 已经进行了绑定)
`vim _config.yml
在设置 config 时,有两个 _config.yml
,一个是 hexo 自带的,另一个则是配置主题 shoka 的。这两个 config.json 位于不同的文件夹下,不要搞混了。
这里我给出我的配置文件:
# Hexo Configuration | |
## Docs: https://hexo.io/docs/configuration.html | |
## Source: https://github.com/hexojs/hexo/ | |
# Site | |
title: Life | |
subtitle: | |
description: 'Life is not about lifestyle, it means Lithium and Ferrum.' | |
keywords: | |
author: Kalice | |
language: zh-CN | |
timezone: '' | |
# URL | |
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project' | |
url: https://songlinlife.github.io/ | |
permalink: :year/:title/ | |
permalink_defaults: | |
pretty_urls: | |
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks | |
trailing_html: true # Set to false to remove trailing '.html' from permalinks | |
# Directory | |
source_dir: source | |
public_dir: public | |
tag_dir: tags | |
archive_dir: archives | |
category_dir: categories | |
code_dir: downloads/code | |
i18n_dir: :lang | |
skip_render: | |
# Writing | |
new_post_name: :title.md # File name of new posts | |
default_layout: post | |
titlecase: false # Transform title into titlecase | |
external_link: | |
enable: true # Open external links in new tab | |
field: site # Apply to the whole site | |
exclude: '' | |
filename_case: 0 | |
render_drafts: false | |
post_asset_folder: false | |
relative_link: false | |
future: true | |
highlight: | |
enable: false | |
line_number: true | |
auto_detect: false | |
tab_replace: '' | |
wrap: true | |
hljs: false | |
prismjs: | |
enable: false | |
preprocess: true | |
line_number: true | |
tab_replace: '' | |
markdown: | |
render: | |
html: false | |
xhtmlOut: true | |
breaks: true | |
linkify: true | |
typographer: | |
quotes: '“”‘’' | |
plugins: | |
- plugin: | |
name: markdown-it-toc-and-anchor | |
enable: true | |
options: | |
tocClassName: 'toc' | |
anchorClassName: 'anchor' | |
- plugin: | |
name: markdown-it-multimd-table | |
enable: true | |
options: | |
multiline: true | |
rowspan: true | |
headerless: true | |
- plugin: | |
name: ./markdown-it-furigana | |
enable: true | |
options: | |
fallbackParens: "()" | |
- plugin: | |
name: ./markdown-it-spoiler | |
enable: true | |
options: | |
title: "你知道得太多了" | |
minify: | |
html: | |
enable: true | |
exclude: # 排除 hexo-feed 用到的模板文件 | |
- '**/json.ejs' | |
- '**/atom.ejs' | |
- '**/rss.ejs' | |
css: | |
enable: true | |
exclude: | |
- '**/*.min.css' | |
js: | |
enable: true | |
mangle: | |
toplevel: true | |
output: | |
compress: | |
exclude: | |
- '**/*.min.js' | |
autoprefixer: | |
exclude: | |
- '*.min.css' | |
feed: | |
limit: 20 | |
order_by: "-date" | |
tag_dir: false | |
category_dir: false | |
rss: | |
enable: true | |
template: "themes/shoka/layout/_alternate/rss.ejs" | |
output: "rss.xml" | |
atom: | |
enable: true | |
template: "themes/shoka/layout/_alternate/atom.ejs" | |
output: "atom.xml" | |
jsonFeed: | |
enable: true | |
template: "themes/shoka/layout/_alternate/json.ejs" | |
output: "feed.json" | |
# Home page setting | |
# path: Root path for your blogs index page. (default = '') | |
# per_page: Posts displayed per page. (0 = disable pagination) | |
# order_by: Posts order. (Order by date descending by default) | |
index_generator: | |
path: '' | |
per_page: 10 | |
order_by: -date | |
# Category & Tag | |
default_category: uncategorized | |
category_map: | |
xlab: xlab | |
gnn: gnn | |
可视化: vs | |
python: python | |
ai: ai | |
琐事: ss | |
记事: js | |
博客: blog | |
tag_map: | |
# Metadata elements | |
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta | |
meta_generator: true | |
# Date / Time format | |
## Hexo uses Moment.js to parse and display date | |
## You can customize the date format as defined in | |
## http://momentjs.com/docs/#/displaying/format/ | |
date_format: YYYY-MM-DD | |
time_format: HH:mm:ss | |
## updated_option supports 'mtime', 'date', 'empty' | |
updated_option: 'mtime' | |
# Pagination | |
## Set per_page to 0 to disable pagination | |
per_page: 10 | |
pagination_dir: page | |
# Include / Exclude file(s) | |
## include:/exclude: options only apply to the 'source/' folder | |
include: | |
exclude: | |
ignore: | |
# Extensions | |
## Plugins: https://hexo.io/plugins/ | |
## Themes: https://hexo.io/themes/ | |
theme: shoka | |
# Deployment | |
## Docs: https://hexo.io/docs/one-command-deployment | |
deploy: | |
type: git | |
repository: git@github.com:SonglinLife/SonglinLife.github.io.git | |
branch: main |
# 配置主题
这是最重要的,主题 > 一切。
我选择的是 shoka 主题,主要原因就是很二次元,而且初始图包也有很多,不需要直接配置,懒狗是这样的😅。
Hexo 主题 Shoka & multi-markdown-it 渲染器使用说明
安装顺序:
- Hexo 主题 Shoka & multi-markdown-it 渲染器使用说明
- 依赖插件
- 基本功能
- 界面显示
- 特殊功能
一个个看过去,选择自己想要的功能,关闭直接不想要的功能。
这里有几个点,头像,赞赏码之类的图片在 'SonglinLife\themes\shoka\source\images' 这个文件夹下,所以安装完了,记得换头像和赞赏码。
还有一个值得注意的点,即使你开启了 about 功能,也是不会显示的,因为要生成一个 about 界面。
hexo n page "about"
通过 hexo 生成一个 about 页面,然后在 index.md 内进行编辑。
# 自动提交脚本
本来我开开心心的,但是。。。我发现一个严重的问题,我是用 wsl 进行配置的,然后,我生成的 md 文件要用 typora 打开。。。
所以我必须先:
hexo n "new blog"
然后打开文件管理器用 typora 编辑,这也太低效率了吧。😰
但我又必须用 hexo
来生成 md 文件,如果用 typora 生成 md 文件后这个 yaml 头就没有了,没有 tags,也没有 name 之类的。hexo 没法进行分类。。。
于是我想如果能 typora 能从模板生成文件就好了,可是找了好久,typora 并没有这个功能,而且也没有插件实现这个功能。
# 折中
写了一个 blog sh 脚本。
#!/bin/bash | |
cd /mnt/d/wsl/SonglinLife | |
if [ $# -eq 0 ]; | |
then | |
cd /mnt/d/wsl/SonglinLife/source/_posts | |
explorer.exe . | |
exit | |
fi | |
if [ $# -eq 1 ]; | |
then | |
hexo n "$1" | |
echo "生成了$1,快来写blog吧" | |
cd /mnt/d/wsl/SonglinLife/source/_posts | |
explorer.exe . | |
fi | |
if [ $# -eq 2 ]; | |
then | |
hexo g | |
hexo d | |
echo "提交到github端" | |
exit | |
fi |
这样我只要 blog blog_name
就可以一键生成文件,并且打开文件管理器。
而且,使用 blog g d
就可以编译提交一次性搞定了。
# 2022.1.21 更新
实现了文档查询功能。
# 注册 algolia 账号
获得 key。
# root 目录修改 _config.yml
文件
algolia: | |
appId: #Your appId | |
apiKey: #Your apiKey | |
adminApiKey: #Your adminApiKey | |
chunkSize: 5000 | |
indexName: songlinLife | |
fields: | |
- title | |
- path | |
- categories | |
- content:strip:truncate,0,2000 | |
- gallery | |
- photos | |
- tags |
# 主题目录修改 _config.yml
文件
algolia_search: | |
enable: true | |
hits: | |
per_page: 10 | |
labels: | |
input_placeholder: Search for Posts | |
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result | |
hits_stats: "${hits} results found in ${time} ms" |
# 执行
hexo algolia |
OK 了。
# 有待解决的问题:
这个解决方法比较粗暴:
直接将
page.js
的函数:if(window.getSelection().toString().length > 1e5 && copyright)
将原本的
window.getSelection().toString().length > 30
直接改成1e5
,这样就可以避免添加引用信息了,nice!