写在前面

因为刚结束学业，加之暂时赋 ~~dai~~ 闲 ye 在家，萌生出想要记录一些平时写码或者玩工具的个人经验，于是就有了本文的诞生。

本文非教程向，仅用来作为笔者的备忘录。

配置环境

注：此处笔者所用的环境是 Windows 10 + WSL (Ubuntu 18.04)

安装配置 nvm（可选）和 Node.js

nvm 安装 (可选)

Node Version Manager (nvm) 是 Node.js 版本管理工具，类似于 Python 的 pyenv。

# https://github.com/nvm-sh/nvm#installing-and-updating
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

node 安装

# 有安装 nvm
nvm install --lts

# 没有安装 nvm，使用包管理工具安装
# 参考：https://github.com/nodesource/distributions/blob/master/README.md#deb
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

# 手动安装
# 参考： https://github.com/nodejs/help/wiki/Installation
export VERSION=v10.15.0
export DISTRO=linux-x64
sudo mkdir -p /usr/local/lib/nodejs
sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs 
echo "export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH" >> ~/.profile
. ~/.profile
exec $SHELL

安装 cnpm 由于 npm 的官方镜像在国内的连接性十分堪忧，所以使用淘宝的 cnpm 代替

# https://developer.aliyun.com/mirror/NPM
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Hexo 工具及初始化项目

# 全局安装 hexo-cli
cnpm install hexo-cli -g
# 初始化项目
hexo init YourProjectName
cd YourProjectName
cnpm install

完成项目的初始化后，目录结构如下：

# tree -L 2
.
├── _config.yml
├── node_modules
│   ├── @types
│   ├── ***
*
├── package-lock.json
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
└── landscape

_config.yml 是整个站点（博客）的配置目录；

node_modules 是 node 模块的安装路径；

package-lock.json 和 package.json 储存项目所依赖模块的信息；

scaffolds 是 Hexo 的脚手架，在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：hexo new photo "My Gallery"

source 文件夹存放博客文章及页面等

themes 存放主题模板

接下来，可通过 hexo server 命令在本地环境下启动临时的 Hexo 服务器，通过 localhost:4000 进行测试访问

部署云端

Git 安装与配置

# Debian/Ubuntu | 其他平台可参考：https://git-scm.com/download/
sudo apt install git
# 设置邮箱及用户名
git config --global "YourUsername"
git config --global "YourEmail"
# 生成 RSA 密钥
ssh-keygen -t rsa -C "YourEmail"

查看生成的公钥：cat ~/.ssh/id_rsa.pub，复制并导入到 Github 账户，地址：https://github.com/settings/keys

测试密钥：ssh -T [email protected]

修改博客站点配置：

# ./_config.yml
deploy:
  type: git
  # 先在 Github 创建新的仓库，并命名为：YourUsername.github.io
  repo: https://github.com/YourUsername/YourUserbame.github.io.git
  branch: master

添加域名

参考 Github 官方文档：点我

推送文章

# 新建文章
hexo new post "TITLE"
# 编辑文章并推送
hexo g
hexo d

访问设置的域名或者 https://YourUsername.github.io/ 即可看到博客站点

配置主题

主题选择

配置站点及主题

# ./_config.yml
# 站点信息
title: Blog_Name
subtitle: 'YourChoice'
description: 'Your Description
keywords: YourKeyWord
author: YourName
url: https://yourdomain.domain
# 有的主题是 zh-Hans，具体请看主题文档
language: zh-CN
timezone: 'Asia/Shanghai'
# 主题选择
theme: next
# 字符及阅读时长估计
# 要先安装：https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "分钟"

# ./themes/next/_config.yml
# 自定义文件路径
custom_file_path:
  # 自定义 footer 启用 canvas-nest
  footer: source/_data/footer.njk
# 网站图标
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
# 版权信息
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:
# NexT 主题模式
scheme: Pisces
# 菜单，用法：Key: /link/ || icon
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
# 用户头像设置
avatar:
  # Replace the default image and set the url here.
  url: /images/half9000_avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false
# 社交信息
social:
  GitHub: https://github.com/half9000 || fab fa-github
  E-Mail: mailto:[email protected] || fa fa-envelope
# 文章设置
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: false
  categories: true
# 使用图标而非 # 显示标签
tag_icon: true
# 第三方插件：不蒜子统计
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye
# 2020-11-06 更新：添加 Latex 公式支持
# Math Formulas Render Support
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: false

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

footer 文件

<!-- ./source/_data/footer.njk -->
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

如果 ./source 路径下不存在 about, categories 等文件夹，需先进行创建：

hexo new page "about"
hexo new page "categories"
hexo new page "tags"

并编辑对应目录下的 index.md，添加属性 type: about 等

启用搜索

cnpm install hexo-generator-searchdb 安装插件

修改站点配置：

# Search configuration
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置：

# Dependencies: https://github.com/next-theme/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 page loads.
  preload: false

启用评论插件

配置 Github

打开链接：点我点我，填写相关信息，获取 id 和 secret

注：Authorization callback URL 应填写博客实际访问的 URL，如本站为 https://blog.half9000.com

配置主题：

# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: YourName # GitHub repo owner
  repo: YourName.github.io # Repository name to store issues
  client_id: YourIdD # GitHub Application Client ID
  client_secret: YourSecret # GitHub Application Client Secret
  admin_user: YourAccount # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

HALF9000's Blog

Hexo 折腾小记