简单记录一下我博客的安装和美化，本教程仅为个人备忘录

开始前先看官方文档（最起码过一遍）
官方文档：Butterfly - A Simple and Card UI Design theme for Hexo

环境搭建

安装 Git：

windows 安装Git | ZのBlog (blog.fkcz.cc)

安装 node.js

见安装Node.Js部分

windows常用运行环境的安装 | Z の Blog (blog.fkcz.cc)

安装 Hexo

  1. 安装Hexo
    首先新建一个文件夹为 Hexo 安装文件夹，例如：E:\Blog\Hexo-Blog

    在 Git Bash 中使用 cd 命令进入文件夹：
    需使用 cd E:/Blog/Hexo-Blog 或者 cd /e/Blog/Hexo-Blog

    • 全局安装：npm install -g hexo-cli
    • 仅局部安装 hexo ：npm install hexo # 本教程采用局部安装
    • 安装hexo服务器模块：npm install hexo-server --save
    点击此处展开/收起内容，来自 chatgpt 的解释

    全局安装和局部安装都有各自的用途和优势，选择使用哪种安装方式取决于您的具体需求。

    全局安装的优势：

    • 全局安装的软件包可以在系统的任何位置使用，而不仅限于特定的项目目录。
    • 全局安装的软件包可以通过命令行直接调用，无需指定完整的路径。
    • 全局安装的软件包可以在多个项目中共享，避免了重复安装和占用磁盘空间。

    局部安装的优势：

    • 局部安装将软件包安装在特定的项目目录中，使得每个项目都可以独立管理自己的依赖项。
    • 局部安装的软件包版本可以与每个项目的要求相匹配，避免了不同项目之间的冲突。
    • 局部安装可以使得项目更加可移植和可复制，其他用户或开发者可以通过简单的安装依赖来复现您的项目环境。

    综合考虑，一般建议在以下情况下使用全局安装：

    • 安装命令行工具，如 Hexo CLI、Vue CLI、Angular CLI 等，这些工具通常需要在全局范围内使用。
    • 安装全局的开发工具，如 TypeScript、ESLint 等，这些工具在多个项目中都可以使用。

    而在以下情况下使用局部安装更为合适：

    • 安装项目特定的依赖项，这样可以确保每个项目都有独立的依赖环境。
    • 在不同的项目中使用不同版本的软件包，以满足不同项目的特定需求。
    • 分发和共享项目时，可以通过将依赖项包含在项目中，使得其他用户或开发者可以轻松地复现项目环境。

    特别注意：
    局部安装需要将 Hexo 所在的目录下的 node_modules中的.bin 添加到环境变量 PATH 之中

  2. 在安装文件夹（E:\Blog\Hexo-Blog）下新建一个文件夹为博客文件夹 blog，并初始化博客

    1
    2
    3
    hexo init blog     //初始化项目
    cd blog            //进入项目文件夹
    npm install        //安装相关依赖

    执行完成后我们打开 blog 文件夹：
    scaffolds 是模板文件夹，创建新文章或者新页面时，Hexo 会根据此文件夹建立文件；
    source 是资源文件夹；
    themes是主题文件夹，Hexo会根据此文件夹生成静态页面

    初始化后，目录结构如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .
    ├── _config.yml      # 博客配置信息
    ├── package.json     # 项目名称、描述、版本、运行和开发等信息
    ├── scaffolds        # 生成文章的一些模板
    ├── source           # 存放用户资源
    |   ├── _drafts
    └── _posts
    ├── node_modules     # 依赖包
    └── themes           # 主题文件夹

将静态博客挂载到 GitHub

  1. 创建GitHub仓库

    仓库名为yourusername.github.io（将yourusername替换为你的GitHub用户名）。确保仓库是公开的。

  2. 安装 hexo-deployer-git

    npm install hexo-deployer-git --save

  3. 修改 _config.yml 文件

    在 blog 目录下的_config.yml，就是整个 Hexo 框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的 配置描述。
    修改最后一行的配置，将 repository 修改为你自己的 github 项目地址即可。（[email protected]:yourusername/yourusername.github.io.git）

    请检查自己的默认分支是不是 main

  4. 部署项目到 GitHub

    修改好配置后，运行如下命令，将代码部署到 GitHub

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy
    • Hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。
    • Hexo generate：生成静态文章，可以用 hexo g 缩写
    • Hexo deploy：部署文章，可以用 hexo d 缩写

    注意：deploy 时可能要输入 username 和 password

    如果出现 Deploy done，则说明部署成功了。

  5. 使用 http://username.github.io/ 访问，其中 username 为 github 用户名

  6. 使用自定义域名

    打开之前创建的github仓库，点击设置 Settings ，点击左边 Pages ，里面有个 Custom domain ，填写自己的域名，例如：blog.example.com

    打开之前本地创建的Hexo 安装文件夹，里面有个 CNAME 文件（blog/source文件夹里面，没有的话自行创建），修改里面的域名为自己的域名

使用cloudflare cdn

  1. cloudflare上面添加自己的域名后，添加dns记录，选择 CNAME 类型，

  2. 内容填写 username.github.io （上面的 GitHub Pages 网站链接）

  3. 打开代理，成功使用cdn（小黄云）

安装 Butterfly 主题

Butterfly 安裝文檔(一) 快速開始 | Butterfly

  1. 本人用的是 git clone 方式安装的 hexo-theme-butterfly

    在你的博客根目录里（本教程路径为【E:/Blog/Hexo-Blog/blog】），打开 Git 工具，执行命令即可。

    • 稳定版【建议】
    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
    • 测试版

    测试版可能存在 bug，追求稳定的请安装稳定版

    1
    git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
    • 升级方法：在主题目录下，运行 git pull

    注意：如果自己魔改了，谨慎升级

  2. 应用主题

    修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly
    theme: butterfly

  3. 安装插件

    如果你没有 pug 以及 stylus 的渲染器，请下载安装：

    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save

  4. 升级建议

    为了减少升级主题后带来的不便，请使用以下方法（建议，也可以不做）

    在 hexo 的根目录创建一个文件· _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)

    注意：不要把主题目录的 _config.yml 删掉

    注意： 以后只需要在 _config. Butterfly.yml 进行配置就行。
    如果使用了 _config. Butterfly.yml，配置主题的 _config.yml 将不会有效果。

    Hexo 会自动合并主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

美化

  1. 首先先按照官方文档进行一些基础设置和美化

    Butterfly - A Simple and Card UI Design theme for Hexo

    官方文档中都有，按照顺序搞一遍进行了

  2. 更多美化和魔改

    其实按照官方文档设置后差不多就可以了，想要更加花里胡哨的话，可以在此基础上添加其他的美化和魔改

    点击查看更多

    1. 参考比较多的

    2. 其他

    1. 补充

更新（补充）

Hexo 升级比较简单， npm-check、npm-upgrade、npm-update 一键三连。按以下顺序逐步执行完成后，Hexo 版本及系统插件均会升级到最新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//以下指令均在Hexo目录下操作，先定位到Hexo目录，比如：cd E:/Blog/Hexo-Blog
//注意一下命令为局部安装的命令

//查看当前版本，判断是否需要升级
> hexo version

//局部升级hexo
> npm install hexo

//再次查看版本，看hexo是否升级成功
> hexo version

//安装npm-check，若已安装可以跳过
> npm install npm-check

//检查系统插件是否需要升级
> npm-check

//安装npm-upgrade，若已安装可以跳过
> npm install npm-upgrade

//更新package.json
> npm-upgrade

//更新全局插件
> npm update

//更新系统插件
> npm update --save

//再次查看版本，判断是否升级成功
> hexo version

然后在到cd E:/Blog/Hexo-Blog/blog目录，运行npm-check、npm-upgrade、npm update、npm update --save，更新里面的插件

参考