最近在整理个人博客，之前的博客是基于 Hexo 3.x 版本的，一晃两年多过去了，Hexo 已经升级到了 5.x 版本，新版本带来了一系列新特性，并且性能得到了极大的提升。而个人喜欢的 Icarus 主题也有了大版本的更新，更是带来了赛博朋克的主题，十分惊艳，话不多说，直接看效果。
现在让我们从零开始，快速搭建一个赛博朋克风格个人博客。
Step 1 使用 Hexo-CLI 初始化项目
初始化项目非常简单，按照官网文档操作即可，需要注意 Node 和 Git 是必备。为了避免全局安装，这里使用 npx 命令：
$ npx hexo init <folder>
$ cd <folder>
$ yarn
使用 generate 命令生成静态文件，可简写如下：
npx hexo g
使用 server 命令启动本地服务器查看页面效果，可简写如下：
npx hexo s
此时，打开 localhost:4000, 一个默认的 landscape 主题的博客页面就出现了，如下：
截屏2021-03-13 上午3.53.33.png
具体详见这个 Commit
Step 2 更换为 Icarus 主题
更换主题也非常简单，我们查看 Icarus 文档。更换主题主要有两种方式，一种是使用 npm 安装主题的方式，另一种是下载源码放到 theme 文件夹的方式。简单起见，我们先采用 npm 的方式：
代码语言：javascript复制$ yarn add hexo-theme-icarus
使用 hexo 命令修改主题为 Icarus:
$ npx hexo config theme icarus
启动服务器，很不幸，报错了：
截屏2021-03-13 上午3.57.09.png
提示很清楚，缺少依赖，我们添加依赖：
代码语言：javascript复制$ yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
再次尝试构建并启动，成功出现 Icarus 主题了：
截屏2021-03-13 上午4.01.01.png
迫不及待尝试赛博朋克风格主题了，非常简单，在 _config.icarus.yml 文件中修改：
# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk
再次尝试构建并启动，赛博朋克风格主题出现：
截屏2021-03-13 上午4.05.37.png
具体代码详见这个 Commit。
Step 3 自定义配置
下面我们修改配置文件 _config.yml 和 _config.icarus.yml ，配置网站相关信息。
主要包括 logo、favicon、navbar 的 menu 和 links、footer、donates（赞助信息，注释掉没用的支付渠道）、widgets。
这里详细说一下 widgets，widgets 就是页面上的各个区域的挂件，可以通过配置灵活改变其位置和具体信息，根据喜好决定布局采用 3 栏还是 2 栏布局。
- profile widgets：这块是用户信息模块，把相关信息改成你自己的就好啦，下面有一个 social_links，也可以自定义配置，如果没有 Twitter 和 FaceBook，可以把相关信息注释掉，也可以添加其他链接，注意图标是基于 fontawesome 的。
- subscribe_email、adsense 都用不上，可以删掉
具体修改细节可以参考这个 Commit。
修改完的效果如下：
截屏2021-03-13 上午1.02.28.png
Step 4 源码方式使用 Icarus 主题
刚才说到使用 Icarus 主题有两种方式， npm 包的方式虽然简便，但是如果想对 Icarus 主题有更深的配置就不太好弄了，尤其是过去 Icarus 一直都采用的是源码模式，很多 Issue 的解决方案都是修改源码的，而对应的 npm 包的方式则很少提及，所以我们也改为使用源码方式，方便后续配置。
首先删掉 hexo-theme-icarus 依赖，在 Icarus 仓库下载代码，解压后拷贝到 theme 文件夹中。
详见这个 Commit。
Step 5 配置样例文章
下面我们删掉默认的 Hello World 文章，创建一个自己的文章。
注意头部配置文件相关信息，在新版 Icarus 中头图需要额外配置 cover 选项，如下：
代码语言：javascript复制---
title: "【译】下一代前端构建工具 ViteJS 中英双语字幕"
date: 2021/03/08 11:12:25
categories:
- Front-End
- Tools
tags:
- Vite
- GitHub
- Translation
toc: true # 是否显示目录
thumbnail: '/images/vitet.png' # 缩略图
cover: '/images/vitet.png' # 头图
---
详见这个 Commit。
Step 6 文章内容过长怎么办
首页应该展示更多的文章，如果文章过长，用户下滑就只会看到同一篇文章，我们如果只想让用户看一部分内容怎么办呢？非常简单，在 md 文件中添加 <!-- more --> 即可，添加完之后，就会出现“阅读更多”的按钮，首页就能看到多篇文章了。
代码详见这个 Commit。
Step 7 怎么样让文章两栏展示
目前文章页仍然和首页一样，是三栏布局，为了有效利用空间，希望文章页能够两栏布局。此时我们需要在 Icarus 源码文件夹添加 _config.post.yml 文件，并配置成两栏布局：
widgets:
# Profile widget configurations
-
# Where should the widget be placed, left sidebar or right sidebar
position: right
type: toc
# Whether to show the index of each heading
index: true
# Whether to collapse sub-headings when they are out-of-view
collapsed: false
# Maximum level of headings to show (1-6)
depth: 3
来看看效果：
截屏2021-03-13 上午3.05.31.png
代码详见这个 Commit。
Step 8 部署到 GitHub Pages 上
这块内容就不再赘述，操作方法官网有详细描述。
在 _config.yml 中配置你的 GitHub Pages 对应的仓库地址，如我的是：
deploy:
type: git
repo: https://github.com/Ivocin/ivocin.github.io.git
每次都构建完，执行 npm hexo d 就可以快速部署了。
Step 9 其他功能
当然还有包括评论、百度统计等功能，Hexo 官网和 Icarus 文档都有详细描述，这里就不再赘述了。
其他 CMS（Content Management System） 产品
市面上有非常多的 CMS 产品，侧重点各有不同，罗列如下：Hexo、VuePress、Nuxt、Docsify、Docute、GitBook、Gatsby、Hugo、Next.js、Jekyll 、WordPress、Drupal、Dumi。
Hexo 之前一直是 Vue 的文档托管方案，但是 Hexo 主题系统太过于静态以及过度地依赖纯字符串，所以有了后来的 VuePress。当然 Hexo 也有很多优点，比如强大的 Tag Plugins （但私有语法也带来了迁移的问题）、超多的主题（目前有 311 个，很丰富，但是质量参差不齐，没有评分功能，在官网选择主题对于选择困难症的人来说一定非常痛苦），最新的 5.x 版本速度也有了很大的提升，总的来说，一般博客就够用了。其他的适合写博客的有 Gatsby、Hugo、Jekyll ，没深入使用过，先不做评价。
文档类的选择就不用很困难了，Vue 类的用 VuePress，未来可能是 VitePress，React 类的文档用 Dumi 就好了。
后续计划有时间对其他 CMS 产品一一试用并比较，会从 Gatsby 开始。
