个⼈⽹站迁移之旅：从博客到知识库，从Hexo到Docusaurus
或是出于跟风，或是为了简历能好看点，2020 年 2 ⽉，在翻看了中⽂互联⽹⼤量的「免费个⼈⽹页搭建教程」后，我选择了 Hexo + Github Pages 的⽅案，了⼀款看上去还不
错的主题，搭建了⾃⼰的第⼀个博客⽹站。
很难量化我在这接近两年的时间⾥有了什么成长，我迎来了⼀学期的⽹课（甚⾄期末考试都是线上），见证了前所未有的⽣活⽅式的转变（从此社恐⼈可以合理戴⼝罩了），学习了更多的计算机专业课知识（虽然已经忘光），写了更多的汉字（我都不好意思说能叫⽂章），体验了⼀边在互联⽹企业 996 ⼀边赶学期⼤作业 Deadline 的⽣活（然后现在推⾏
「1075⼯作制」），准备考研⼜开始准备⼯作，准备⼯作⼜准备 Gap 去⽀教……
这之中⼤概还是有很多值得记录的吧，然⽽从结果上看我并没有留下什么，因此我也开始思考就我个⼈的情况⽽⾔，⽤时间轴将⽂章串联起来的博客，是否是个⼈⽹站最合适的载体。你需要的怎样的个⼈⽹站？
知乎、简书、博客园、……那些优秀或不那么优秀的写作平台已经有很多很多。⽽选择独⽴于这些⼤平台，去运营⾃⼰的个⼈⽹站，这件事多少带点理想主义⾊彩——个⼈⽹站缺乏稳定的流量来
源，在国内更是需要备案等操作，虽然能免于平台审核的等待，但更多时候恐怕只是⼩圈⼦的孤芳⾃赏。
⽽我最早是为什么开始写⽂章的呢？虽然「nobody cares」，但我现在想想依然觉得有些不可思议，当时的⾃⼰为什么有勇⽓做这种事（顺带⼀提我突然想起了粉丝刚刚破⼀万时我是如何声情并茂地和舍友讲了⼀下午我是怎么涨粉的的⿊历史，太尴尬了，现在我已经忘了当时他的脸上是怎样的神情）。
魔域师傅搭建个⼈⽹站则主要是为了寻⼀种将所学知识归类展⽰的渠道，希望可以通过笔记避免知识的遗忘。从我之前在 Hexo 上发布的博客来看，我发布的内容以课程内容、软件技巧为主，这些内容⼀般有⽐较明确的分类和标签，⽐起瀑布流式的⽂章，更适合⽤树状的Docs进⾏整理，这也成了本次迁移到 Docusaurus 的主要动⼒。
Hexo 有哪些不适合你的地⽅？
在使⽤ Hexo 的过程中，我主要遇到了以下痛点（事实上很多痛点都是技术菜所导致的）：
Node 版本问题：此前 Hexo 在 Node 14.x 以上版本运⾏时会存在兼容问题（我不清楚现在是否解决了），⽹上的资料通常是建议将 Node.js 降级⾄ 12.x 版本使⽤。为此我不得不安装 nvm 管理电脑上不同的 Node 版本，每次写博客前还需要切换 Node 环境，在⼀定程度上打击了创作积极性。
不够省⼼的客户端：体验过⼏个 Hexo 客户端，感觉界⾯和⾃⼰的期待有些差距，使⽤时也会遇到⼀些⼩问题，于是⼜回到了命令⾏创建新博客的⽅式。
瀑布流式的⽂章组织⽅式：虽然 Hexo 提供了标签、分类等功能，但是没有进⼀步的层级关系，标签过多也不利于⽇后复盘。因此，⽂档式的知识库也许更符合我的需求。
较⾼的主题定制门槛：我使⽤的是从 Github 上的 Hexo 主题，作者主要使⽤ JQuery 开发，然⽽我在前端上学艺不精，只会站在 React、Vue 的肩膀上修修补补，似乎除了改改主题颜⾊就没有别的能做的事情了。
CI/CD 部署问题：之前创建博客时没有使⽤ CI/CD，每次更新 Github Pages 都需要经过「写博客→⽣成静态页⾯→上传到 Github」的过程，所以这次采⽤ Docusaurus 构建个⼈知识库时就⽤了⾃动部署。
Docusaurus 是什么？有哪些优势？
Docusaurus 是⼀款基于 React 构建的站点⽣成器，可⽤于构建⽂档⽹站、博客、营销页⾯（落地页）等。
Docusaurus 的⽂档和博客功能都是开箱即⽤的，背靠 Facebook 开源项⽬团队（现在应该叫 Meta ？）
，官⽅⽂档对于中⽂的⽀持也很友好，主要功能都能在⽂档上到。
⽀持在 Markdown 语法中嵌⼊ React 组件，此外还有丰富的插件库，⽐如能在线运⾏的代码执⾏器等，可以进⼀步丰富个⼈⽹站的功能。在这次的迁移过程中我就⽤ Infima 的Note 组件美化了迁移信息。
Docusaurus 是⼀款 React 应⽤程序，对于曾在「软件⼯程」课上被 React + Typescript 折磨的我来说，我对于 React 语法⽐较熟悉，可以尝试增加⾃⼰所需的功能。
颜值⾼：第⼀眼看上去感觉 Docs 很像 Gitbook，⾃⾝的配⾊我感觉也挺不错，之后可能会微调下标题字号。
当然，经过近⼀周的使⽤我也发现了⼀些⼩问题：
标签功能并不好⽤：Docusaurus 会将标签按照⾸字母进⾏分类，英⽂标签还好，中⽂标签则每⼀个单字都会成为⼀个分类。
暂时还没有评论功能：Docusaurus ⽀持添加⽂档搜索模块，但我还没到类似 Gitalk 的评论插件（虽然这个功能也没啥必要）。
同样缺乏 GUI：好在 Docusaurus 会⾃动根据 docs 下的⽬录树划分⽂档层级，便于建⽴个⼈知识库。博客则需要在标题中注明时间与题⽬，可能需要⾃⼰写⼀个简单的脚本。
导航栏定制问题：Docusaurus 采⽤ Infima 的Navigation Bar 组件，通过注⼊的⽅式设定导航栏参数。原⽣导航栏定制⾃由度不⾼，好在可以放弃引⼊，⾃⾏编写导航栏（从「」⾥的源码学到的）。
⽬前 Docusaurus v2 还是 beta 版本，社区很活跃，看好这个⼯具的前景。
从 Hexo 迁移到 Docusaurus 需要⼏步？
忍不住讲起某个⼤象与冰箱的笑话，虽然我⼀直感觉这个笑话好冷。 和 的 Front-matter 存在部分命名上的差异，好在它们都是⽤ YAML 格式组织的，因此我写了两个简单的
Ruby 脚本（），可以提取出原先在 Hexo ⽣成博⽂的时间戳、标题、标签、分类等信息，将其分别转换为 Docusaurus 格式的⽂档和博客 Markdown。
#!/usr/bin/ruby
require 'pathname'
require 'tmpdir'
require 'yaml'
地球上最稀有的动物def copy_not_null_array(hexo_yaml_info, hexo_key, docusaurus_yaml_info, docusaurus_key)
if hexo_yaml_info[hexo_key]
if hexo_yaml_info[hexo_key].class != Array
docusaurus_yaml_info[docusaurus_key] = [hexo_yaml_info[hexo_key]]
else
docusaurus_yaml_info[docusaurus_key] = hexo_yaml_info[hexo_key]
end
end
end
def parse_markdown_file(filepath)
output_directory_name = "./output"
text_all = _s
# 分割博⽂的头部和正⽂
begin_split = text_all.index('---')
unless begin_split
return
end
end_split = text_all.index('---', begin_split + 1)
head = text_all[0, end_split]
body = text_all[end_split + 4, text_all.size]
# 读取YAML头部信息
temp_filename = File.pdir, "p")
temp_file = w(temp_filename, "w")
temp_file.puts head
temp_file.close
hexo_yaml_info = YAML.load_file(temp_filename)
File.delete(temp_filename)
# 迁移所需的YAML信息
# - Docusaurus⽂章属性: www.docusaurus/docs/blog#header-options
blog_name = hexo_yaml_info['title'].gsub(/[()]/, '('=>'「', ')'=>'」')
docusaurus_yaml_info = w
docusaurus_yaml_info['authors'] = 'mondaycha' # 在l中完善信息
# docusaurus_yaml_info['author_url'] = 'github/MondayCha'
# docusaurus_yaml_info['author_image_url'] = 'github/MondayCha.png'
# docusaurus_yaml_info['author_title'] = '我逐渐理解了⼀切（完全没理解）'
docusaurus_yaml_info['title'] = blog_name
docusaurus_yaml_info['date'] = hexo_yaml_info['date'].strftime("%Y-%m-%d %H:%M:%S")
copy_not_null_array(hexo_yaml_info, 'tags', docusaurus_yaml_info, 'tags')
copy_not_null_array(hexo_yaml_info, 'categories', docusaurus_yaml_info, 'keywords')
if hexo_yaml_info['photos'] and hexo_yaml_info['photos'][0]
docusaurus_yaml_info['image'] = hexo_yaml_info['photos'][0]
end
# 将新头部和正⽂写⼊⽂件
unless File.directory? output_directory_name
Dir.mkdir(output_directory_name, 755)
end
create_time = hexo_yaml_info['date'].strftime("%Y-%m-%d") # 时区有问题，待修复
title = hexo_yaml_info['title']
output_filename = File.join(output_directory_name, create_time << '-' << blog_name.gsub(' ','-') << '.md')
if File.file? output_filename
File.delete(output_filename)
end
output_file = File.open(output_filename, 'a+')
output_file.puts docusaurus__yaml
# ⽣成摘要，否则缩略页不忍直视
truncate = "---\n<!--truncate-->"
output_file.puts truncate
output_file.puts body
output_file.close
end
directory_name = "./"
file_list = w(directory_name).children.select { |c| c.to_s.match('.*.md$') }
file_list.each do |filepath|
puts filepath
parse_markdown_file(filepath)昶读什么
end
将脚本放在 Hexo ⽬录下的 \source\_posts⽂件夹下，与此前创建的博⽂平级，之后运⾏脚本即可获得适⽤于 Docusaurus 的 .md⽂件。
从零开始的 Docusaurus 配置⽣活
1. 环境配置
以 Windows 系统为例，需求 Node.js 版本 ≥ 14，最好选择 Yarn 作为你的包管理⼯具。从官⽹下载 Node.js 的安装包并安装完成后，确保 Node.js 已经添加到了环境变量中：
PS F:\FuckNPM\l1lBlog> node -v
v16.13.0
使⽤⾃带的 npm 完成 Yarn 的安装，正如曾⼏何时 Edge 打开的第⼀个与最后⼀个⽹页就是 Chrome 下载页。
npm install -global yarn
yarn config set registry registry./ # 使⽤淘宝维护的npm镜像源
yarn config set proxy XX
yarn config set https-proxy XX
2. 初始化⽹站
Docusaurus 已经提供了⼀个模板（或者说 Scaffold？），我在 Github 上也看到有⼈做的精简后的模板。如果你已经完成了 Node.js 和 Yarn 的安装，那么只需要⼏⾏命令就能很快启动⽹站：
npx create-docusaurus@latest my-website classic
cd my-website
yarn start
部署完成后，如果 3000 端⼝没有被占⽤，那么访问 就能看到提供的模板页⾯了。
3. 创作你的创作
如果你已经有 Hexo 博⽂，那么正如上⼀节，将博⽂的 Front-matter 转换后放⼊根⽬录下的blog或docs⽂件夹。可以参见官⽅⽂档中的说明，⾮常详细。
4. 最期待的 CI/CD 环节
我选择使⽤ Github Pages 进⾏部署，先参考「」⼀节，修改fig.js的ports部分，否则 Github Actions 会显⽰⽆权访问，因为你把⽹页部署到 Facebook 那⾥去了……
参考「」⼀节进⾏ ssh key 的设置，由于我并⾮⽣成某个 Github 项⽬的⽂档页，⽽是⽣成 Github 的根博客，官⽅提供的l代码并不能很好运⾏，在参考了其他项⽬后，我使⽤了如下配置⽂件：
name: documentation
on:
push:
branches: [documentation]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
# checkout && nodejs
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '15'
- run: yarn install && npm run build
# delopy
- uses: peaceiris/actions-gh-pages@v3
with:
李承铉演过的电视剧github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
游戏昵称骚而不俗的我的 Github 项⽬分⽀结构可以参考「」
⾄此就完成了从 Hexo 到 Docusaurus 的迁移与部署⼯作了，如果说您有疑问的话也可以在评论区或 Github Issue 区留⾔，我有看到就会回复的。
>开端的结局
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论