Setup Blog
Setup Blog
记录了博客建站部署的全过程。包括框架，主题，配置，插件，工作流等等。
引子
之前折腾过 Gridea，Notion的博客框架，但最终因为懒而放弃了自己建博客网站，直接用notion的界面来做。但是最近notion越来越卡，所以花了将近两天时间新建了一个个人博客部并署到了github上。希望今后能提高写博文的频率。本文的内容有较多花里胡哨的内容，旨在练习新的 markdown 格式，技术文章要减少这样的内容
@[toc]
0. 总览
找到了好看的主题，自己稍微配置之后就有这样的效果了。开发 Aurora 的大佬真厉害！
1. 静态博客框架Hexo
Node.js环境搭建
在 wsl 环境中安装了 nvm 用于管理 Node.js 环境，在后续安装的过程中发现提前选择 nvm 真是明治的选择，省了许多重装找包的时间。
## 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
## 以下代码放入shell配置文件中，如.bashrc, .zshrc
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
## 重载 bash / zsh
source ~/.bashrc
source ~/.zshrc
## 安装nodejs和npm
nvm install node # 最新版
nvm install 14.17.0 # 最近的稳定版版本选择
我这里选择了最新版的 Node.js：16.3.0，npm：7.15.0，之后 npm 又手动升级到了7.17.0。
安装 Aurora 主题的时候还是出现了 css-what 这个包的错误，提示有DoS攻击漏洞。估计是最新版npm没有收录， npm audit fix 无效。过一段时间再试试
WSL 环境
如果是在 wsl 环境运行 npm 并且源代码放在 windows 的文件系统中，需要保证 windows 系统也装有 node.js 。否则会报错npm WARN tar EPERM: operation not permitted, futime
具体安装主要参考了Ubuntu 安装 Node.js 的正确姿势
其他涉及的网站：
- nvm-sh/nvm - Github
- 使用 nvm 管理不同版本的 node 与 npm | 菜鸟教程 (runoob.com)
- nvm安装与使用 - #Empty - 博客园 (cnblogs.com)
Hexo框架安装
主要参考快速使用 Hexo 搭建个人博客_哔哩哔哩_bilibili的前几集。其实没有什么复杂的地方。就是以下的代码。
Hexo安装
初次安装
npm install hexo-cli -g # 全局安装hexo
hexo init hexoBlog # 初始化博客目录
cd hexoBlog # 进入目录
npm install # 安装需要的库
hexo server # 启动本地服务器已有hexo源码文件夹，直接在根目录下
npm install hexo-cli -g # 全局安装hexo
npm install # 根据package.json安装所需的包这些代码执行完之后，就能够在访问本地端的博客了。如果不想折腾，到这一步就可以用了。 Hexo 原生配置参考文档 | Hexo。之后是我个性化的 主题，插件和工作流程 的记录。
2. Aurora主题
在网上找了许多的主题，觉得好看的有许多 NexT, matery, fluid, casper。但是真正经验到我的就只有正在用的这一个aurora。
安装步骤没有什么好多说的文档写的很清楚。
注意！！！
npm 的依赖会有一些问题，需要保证 npm 的更新和依赖处理:
- 装的时候碰到了
css-what的版本过低，准备等 npm 更新到稳定版再说。暂时没有使用上的问题。 - 缺少
truncate-html，用npm i truncate-html装了就行。
Aurora 主题的配置很多是自己搞了一套的，需要在 _config.aurora.yml 里配置，和普通的主题不一样
使用图标的时候，有一种 font awesome 的选择。可以在开始使用 – Font Awesome 中文网页面输入邮箱获取cdn。要放在 _config.aurora.yml 的injects 里。阿里的 iconfont 不好用。
3. 插件
markdown 渲染器
hexo-renderer-markdown-it-plus把多个常用的markdown渲染打包了，比较实用。参考hexo markdown渲染器安装就行。具体效果可以看Markdown Demo
Warning
一定要在 _config.aurora.yml 记得注入css文件，否则latex公式不能渲染
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min._config.yml的配置
## markdown render
markdown_it_plus:
highlight: true
html: true
xhtmlOut: true
breaks: true
langPrefix:
linkify: true
typographer:
quotes: “”‘’
pre_class: highlight
plugins:
- plugin:
name: markdown-it-mark
enable: true
- plugin:
name: markdown-it-toc-and-anchor
enable: true
options:
toc: true
tocClassName: 'markdownIt-TOC'
tocFirstLevel: 1
tocLastLevel: 6
# tocCallback:
anchorLink: true
anchorLinkSymbol: ''
anchorFirstLevel: 1
anchorLastLevel: 6
anchorLinkSpace: true
anchorLinkSymbolClassName:
anchorLinkBefore: true
anchorClassName: 'markdownIt-Anchor'
resetIds: truehexo-tag-plantuml 流程图渲染器
直接看：Hexo UML | ZRL (ruleizhou.github.io)
简单版：【Hexo】使用PlantUML插件画UML图 | 大专栏 (dazhuanlan.com)。
还有一个其他的流程图插件【Hexo插件系列】流程图、时序图、 | ESON，没看过，但是应该也有用。
hexo-renderer-stylus 渲染器
官方推荐的主题渲染器，但是 Aurora 用不到。换主题无法显示的时候需要装。
部署到github个人主页
参考GitHub+Hexo 搭建个人网站详细教程 - 知乎 (zhihu.com)的 git ssh配置 ，发布deploy配置 和 hexo-deployer-git插件 这几块内容。
Tips
文章中 git cli 配置了 ssh 但是在发布的时候没有用到
## _config.yml
deploy:
type: 'git'
repo: git@github.com:idlesilver/idlesilver.github.io.git # 是git仓库的ssh链接，不是https
branch: master4. 工作流程
迁移
notion , CSDN 导出为markdown。调整格式之后导入
写文章
经过一番折腾，觉得draft没有必要。 Aurora 基于 Vue3 导致 hexo publish 的时候categories和tags不能正常继承。
直接用：
hexo new [layout] title想要不显示出来就调整 Front-matter 中的时间 date， 然后在 _config.yml 里设置未来博文不显示
## _config.yml
## Writing
...
render_drafts: false # 不显示草稿
relative_link: false
future: true #定时发布？
...图床
两种解决方案：
_config.yml里post_asset_folder: true图片放在同名文件夹下使用千牛云等图床，详见 快速使用 Hexo 搭建个人博客 p8 _哔哩哔哩_bilibili 的第8P。
最终选择了购买域名和配置图床：
参考文章：
- 七牛云配置 七牛云+阿里云搭建免费图床（已填坑，放心食用）_Maycope的博客-CSDN博客
- 设置二级域名 七牛图床添加阿里云域名 - 知乎 (zhihu.com)
- 不设置域名的简化使用方法 七牛云和Github如何使用PicGo设置免费图床_一个骚年的博客-CSDN博客
亲测七牛云北美服务器回传速度够快。