# 动机

每个故事都会有一个开头,为什么我放着 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 创建仓库

image-20211204213537767

这里建立仓库是有讲究的,首先必须是 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。

image-20220121152158368

# 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!