前言

博客本来用的 Halo，最近总看到别人的博客被打，那我直接进行一个未雨绸缪，换成静态的，哈哈

部署

官网啥都有

系统：macOS Sonoma 14.2.1

环境

  1. 安装 Node.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 安装 nvm
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

    # 新开个终端，输入下面命令，完善 zsh 补全配置
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

    # 查看版本信息
    zsh
    nvm --version

    # 安装最新稳定版 Node
    nvm install stable

    # 显示当前的版本
    nvm current

  2. 安装 Homebrew

    1
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    安装完看提示配置环境变量，复制运行即可，大概长这样

    1
    (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/security/.zprofile

Hexo

1
2
3
4
5
6
7
8
9
10
11
# 安装 Hexo CLI 工具（全局安装）
npm install hexo-cli -g

# 我把 blog 文件夹放在 ~/Web 下
cd ~ && mkdir -p ~/Web/blog && cd ~/Web/blog

# 初始化 Hexo 博客
hexo init

# 安装博客的依赖
npm install

Butterfly 主题配置

按照作者写的一步一步来吧：https://butterfly.js.org/posts/21cfbf15/

根目录：~/Web/blog

安装

在 Hexo 根目录里

1
2
3
4
5
# 来到 Hexo 根目录
cd ~/Web/blog

# 安装 Butterfly 主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

应用主题

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

1
theme: butterfly

安装 butterfly 主题必须插件

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

一些我在用的插件

根目录：~/Web/blog

Hexo Butterfly 文章置顶插件

在 Hexo 根目录卸载 hexo-generator-index，然后安装 hexo-generator-index-pin-top

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

使用方法：

在需要置顶的文章的 Front-matter 中加上 top: true / 数字即可，数字越大，文章越靠前。

例如

1
2
3
4
cover: 
top: 1 #这里加一个top就行
abbrlink: 1d543
date: 2023-07-15 10:32:05

Ref: https://github.com/netcan/hexo-generator-index-pin-top

Hexo Butterfly sitemap 插件

在 Hexo 根目录安装 Google 的站点地图生成插件：

1
npm install hexo-generator-sitemap --save

然后来到 Hexo 根目录配置文件 config.yml，在下面添加：

1
2
3
# 站点地图
sitemap:
  path: sitemap.xml

然后重新推送到服务器，访问如下 URL:

1
https://<你的域名>/sitemap.xml

看看网页中有没有出现代码。有的话就成功。

比如我的 sitemap 就是：https://blog.liqiye.com/sitemap.xml

站点地图即 sitemap， 是一个页面，上面放置了网站上需要搜索引擎抓取的所有页面的链接。站点地图可以告诉搜索引擎网站上有哪些可供抓取的网页，以便搜索引擎可以更加智能地抓取网站。所以我们首先需要生成一个站点地图。

Ref：https://qmike.top/posts/2a1b5a62

Hexo Butterfly RSS 插件

在 Hexo 根目录安装：

1
npm install hexo-generator-feed --save

在 Hexo 的主配置文件_config.yml 中任意位置添加以下代码：

1
2
3
4
5
6
# rss
feed:
	enable: true
	type: atom
	path: atom.xml
	limit: 20

比如我的 RSS：https://blog.liqiye.com/atom.xml

Ref：https://www.cnblogs.com/MoYu-zc/p/14395965.html

Hexo Butterfly 本地搜索插件

在 Hexo 根目录安装：

1
npm install hexo-generator-search --save

同时修改主题配置文件

1
2
3
cd ~/Web/blog/themes/butterfly

nano _config.yml

修改为：

1
2
3
4
5
6
7
8
9
10
# Local search
local_search:
  enable: true
  # Preload the search data when the page loads.
  preload: true
  # 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: true
  CDN:

Hexo 隐藏文章插件

  1. 安装

    在 Hexo 根目录安装：

    1
    npm install hexo-hide-posts

    • 在文章的 front-matter 中添加 hidden: true 即可隐藏文章

    • 比如我们隐藏了 source/_posts/lorem-ipsum.md 这篇文章：

      1
      2
      3
      4
      5
      6
      7
      ---
      title: 'Lorem Ipsum'
      date: '2019/8/10 11:45:14'
      hidden: true
      ---

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • 虽然首页上被隐藏了，但你仍然可以通过 https://hexo.test/lorem-ipsum/ 链接访问它。（如果想要完全隐藏一篇文章，可以直接将其设置为草稿）

    • 你可以在命令行运行 hexo hidden:list 来获取当前所有的已隐藏文章列表。

  3. 配置

    在 Hexo 的主配置文件_config.yml 中任意位置添加以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    hide_posts:
      # 是否启用 hexo-hide-posts
      enable: true

      # 隐藏文章的 front-matter 标识，也可以改成其他你喜欢的名字
      filter: hidden

      # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
      noindex: true

      # 设置白名单，白名单中的 generator 可以访问隐藏文章
      # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
      # allowlist_generators: []

      # 设置黑名单，黑名单中的 generator 不可以访问隐藏文章
      # 如果同时设置了黑名单和白名单，白名单的优先级更高
      # blocklist_generators: ['*']

    举个栗子：设置 filter: secret 之后，你就可以在 front-matter 中使用 secret: true 来隐藏文章了。

本 Hexo 插件可以在博客中隐藏指定的文章，并使它们仅可通过链接访问。

当一篇文章被设置为「隐藏」时，它不会出现在任何列表中（包括首页、存档、分类页面、标签页面、Feed、站点地图等），也不会被搜索引擎索引（前提是搜索引擎遵守 noindex 标签）。

只有知道文章链接的人才可以访问被隐藏的文章。

Ref: https://github.com/prinsss/hexo-hide-posts

添加自定义 CSS 和 JS

方法

  1. 新建 CSS 和 JS 文件，例如

    1
    2
    3
    4
    5
    6
    7
    8
    cd ~/Web/blog/source

    mkdir css && cd css # 如果没有就新建一个
    touch random.css # 名字随便起

    # 或者
    mkdir js && cd js
    touch random.js

  2. 修改主题配置文件

    1
    2
    3
    cd ~/Documents/blog/themes/butterfly

    nano _config.yml

    修改为：

    1
    2
    3
    4
    5
    6
    7
    8
    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
        - <link rel="stylesheet" href="/css/random.css?1">
      bottom:
        - <script src="/js/random.js?1"></script>

实例

移动导航栏位置

  • 靠左

    1
    2
    3
    4
    5
    #nav .menus_items {
        position: absolute;
        width: fit-content;
        left: 0;
    }

  • 居中

    1
    2
    3
    4
    5
    6
    #nav .menus_items {
        position: absolute;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);
    }

修改公告栏

将「公告」改为「状态」模仿微信，哈哈

1
2
3
4
5
6
document.addEventListener("DOMContentLoaded", function() {
    var announcementElement = document.querySelector(".card-announcement .item-headline span");
    if (announcementElement) {
    announcementElement.textContent = "状态";
    }
});

推送到服务器

  1. 安装 rsync

    1
    brew install rsync

  2. 前往 Hexo 根目录

    1
    cd ~/Web/blog

  3. 创建脚本

    1
    nano sync.sh

    脚本内容如下：

    前提是已经配置过 ssh config，没配置过可以看这篇

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #!/bin/bash

    # 本地文件夹路径
    local_path="/Users/根据实际情况填写/Web/blog/public"

    # 远程服务器别名
    remote_alias="别名"
    remote_path="远程路径"

    # 在本地执行 hexo clean 和 hexo g
    cd /Users/根据实际情况填写/Web/blog && hexo clean && hexo g

    # 使用 rsync 同步文件夹
    rsync -avz --progress "$local_path/" "$remote_alias:$remote_path"

  4. 给脚本添加执行权限

    1
    chmod +x sync.sh

  5. 放在 ~/Documents/blog 目录下是为了 iCloud 备份方便，但是每次执行脚本还要带目录太麻烦，直接在 ~ 下再放个脚本去执行 sync.sh

    1
    2
    3
    4
    5
    6
    7
    8
    # 回到根目录
    cd

    # 创建脚本
    touch upload.sh

    # 给脚本添加执行权限
    chmod +x upload.sh

    脚本内容如下：

    1
    bash ~/Web/blog/sync.sh

  6. 这样每次写完东西，打开终端，直接输入 ./upload.sh 就行了，很方便

结语

不要把博客放在文稿里同步 iCloud，会变的不幸 :(

  • 层级太多 iCloud 会一直卡上传，你还不知道它卡在哪
  • 外面显示还有东西在上传，点进去发现没有