ai-要約を取得 文章摘要

hexo + butterfly 个人博客 & webstack 主题个人导航搭建全过程系列

  1. hexo_blog の誕生 - 基础环境配置（一）⇦当前位置🪂
  2. 博客魔改（二）
  3. gitactions 实现自动化部署（三）
  4. 独立开发tooltip遇到的实际问题（四）
  5. 实现 github & aliyun 双端部署（五）
  6. hexo_blog 多语言改造（六）

基础环境配置

点击查看详情

node 安装

官方下载地址：https://nodejs.org/en/download/

修改npm源：

npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成淘宝镜像。打开CMD窗口，运行如下命令:

npm config set registry https://registry.npmmirror.com/

推荐使用 nrm 管理npm源

// 全局安装 nrm 
npm install nrm -g --save
 
// 切换到淘宝镜像
nrm use taobao

// 测试镜像速度
nrm test taobao

安装&使用 webstack 主题

// 要求 hexo >= 5.0
npm install hexo-theme-webstack -S

  1. 安装完成后，删除原有主题文件夹和配置文件

  2. 然后到 、modules 文件中，找到刚刚下载的主题文件夹，进去将配置文件复制到项目根目录

  3. 将其重命名为_config.webstack.yml。

    // 将 theme 修改为 webstack
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: webstack

起步前文件结构调整

将主题文件夹移至根目录的 /themes 文件夹当中，方便对主题进行魔改

点击查看详情

1. 复制主题到项目根目录

将主题从 node_modules 中复制到项目根目录的 themes 文件夹下。例如：

cp -r node_modules/webstack themes/webstack

此时，themes/webstack 就是该主题的完整拷贝。

2. 修改 Hexo 配置文件

在 Hexo 的根目录下找到 _config.yml 文件，并修改 theme 字段为你移动后的主题名称，例如：

theme: webstack

这样，Hexo 会直接从 themes/webstack 文件夹中加载主题，而不是从 node_modules 中加载。

3. 清理多余依赖

如果主题已经从 node_modules 中移出，可以考虑从 package.json 中移除该主题的依赖项：

npm uninstall webstack

这将防止 Hexo 再次将主题安装到 node_modules 中。

4. 未来更新管理

  • 手动更新：如果你需要更新主题，只能手动下载新版本，或通过 Git 的方式管理 themes/webstack。
  • Git 管理：你可以将 themes/webstack 添加为一个 Git 子模块，方便未来更新。
cd themes
git submodule add <webstack-theme-git-repo-url> webstack

5. 注意事项

  • 性能和依赖问题：从 node_modules 中移出主题后，Hexo 不再直接管理它的依赖，因此主题的某些功能可能需要你手动管理依赖。
  • 备份代码：修改主题代码前，建议将其纳入版本控制（如 Git），以便回滚或同步修改。

这样操作后，可以直接在项目根目录的 themes/webstack 文件夹中进行主题修改，方便又高效！

当然，这时候如果一切运行正常的话，之前的主题文件夹就可以删除啦！

将静态博客挂载到 GitHub Pages & git 初始化

首先是在 git 上创建仓库

关于仓库命名

在为你的 GitHub 仓库命名时，特别是用于 Hexo 博客部署时，有一些需要注意的事项和建议，既能方便管理，又避免潜在问题。

1. 符合 GitHub Pages 的规则

  • 个人主页仓库：如果这是用于个人主页的博客，仓库名称必须为 username.github.io（username 是你的 GitHub 用户名）。这个仓库会自动绑定到你的个人域名：https://username.github.io/。
  • 项目页面仓库：如果博客是独立项目，可以自由命名，比如 first-blog、second-blog。项目页面会显示为子路径，例如：https://username.github.io/first-blog/。

2. 简洁易懂

选择简短且能清晰表达仓库用途的名称，方便未来维护和他人理解。例如：

  • hexo-blog
  • tech-notes-blog
  • personal-blog

避免过长或无意义的名称，比如：

  • hexo2023personalblogsecondedition

3. 避免特殊字符

仓库名称仅支持字母、数字、-（中横线）、_（下划线），且名称不能以连字符开头或结尾。例如：

  • 合法：hexo-blog, second_blog
  • 非法：-hexo-blog, second blog（空格会导致错误）

建议使用 - 分隔单词，这种命名风格更符合主流习惯，例如 hexo-blog。

4. 避免与现有仓库冲突

确保新的仓库名称不与已有的仓库名称重复，特别是如果你已经有其他 Hexo 博客项目，需要区分开来。例如：

  • personal-blog
  • work-blog

5. 考虑扩展性

如果你计划未来添加多个类似项目，可以使用统一的命名模式，例如：

  • blog-personal
  • blog-tech
  • blog-lifestyle

这样能保持结构一致，便于管理。

6. SEO 和访问友好性

如果你希望博客在搜索引擎中更容易被找到，仓库名可以稍微贴近关键词。例如：

  • coding-blog
  • travel-journal

对于公共仓库，这些名字还能让其他开发者快速了解项目内容。

7. 私密性考虑

如果仓库会公开，但其中涉及个人隐私或敏感信息，避免在名称中使用全名、详细地址等私密信息。

例如：

  • 避免：john-doe-personal-blog
  • 更好：personal-blog

8. 区分主要用途

如果你用一个仓库只存放 Hexo 的静态文件，另一个仓库存放 Hexo 源码，可以在命名中有所体现：

  • second-blog-source（Hexo 源码）
  • second-blog（静态文件）

这样便于区分功能和用途。

总结

一个好的仓库名称应具备以下特点：

  • 简单明了（如 tech-blog）
  • 符合 GitHub Pages 的规则
  • 无特殊字符，使用 - 分隔单词
  • 可扩展且方便未来管理（如 blog-project1）
  • 避免敏感信息

选择合适的名称后，未来的管理和部署都会更加高效！

连接至 github

点击查看详情

  1. 配置用户名和邮箱

    git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"

  2. 执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github

    ssh-keygen -t rsa -C "你的邮箱"

  3. 用户根文件夹下，找到 .ssh 文件，会看到 id_rsa.pub 公钥文件，响应的 id_rsa 为私钥

  4. 将 SSH KEY 公钥配置到 GitHub：进入github，点击右上角头像 选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。

  5. 测试连接

    ssh -T git@github.com

    ​

项目中安装 hexo-deployer-git

点击查看详情

  1. 安装 hexo-deployer-git

    npm install hexo-deployer-git --save

  2. _config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。

    deploy:
      type: git
      repository: git@github.com:Fomalhaut-Blog/Fomalhaut-Blog.github.io.git
      branch: main

  3. 然后，执行 hexo 三连

    hexo clean && hexo generate && hexo deploy  // Git BASH终端
    hexo clean; hexo generate; hexo deploy  // VSCODE终端

    ​

无法连接至 github 的解决方案

开源项目Github520

通过修改Host文件的方法解决访问速度慢的问题

样式调整

iconfont 图标引入

点击查看详情

在 _config.webstack.yml 末尾，加入如下代码

iconfont: //at.alicdn.com/t/c/font_4763045_hil03iimvno.css

修改 themes\webstack\layout\common\group.ejs 文件

修改前，第一行的 h4 标签中的 i 标签，图标名称是写死的

<h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="<%= e.name.replace(/[\s]+/g, '-') %>"></i><%= e.name %></h4>
<div class="row">
  <% menus.forEach(function(menu) { %>
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('<%= url_for(menu.url) %>', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<%= url_for(menu.url) %>">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="<%= url_for(menu.img) %>" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong><%= menu.name %></strong>
          </a>
          <p class="overflowClip_2"><%= menu.description %></p>
        </div>
      </div>
    </div>
  </div>
  <% }) %>
</div>
<br />

修改后，参照如下：

其中，参照 id 的内容，推定 e.icon 为侧边栏菜单的图标，因此修改如下

<h4 class="text-gray">
  <i class="<%= e.icon || 'linecons-tag' %>" style="margin-right: 7px;" id="<%= e.name.replace(/[\s]+/g, '-') %>"></i>
  <%= e.name %>
</h4>

这时候，在菜单的 icon 中，就能够以 iconfont icon-riben 的形式进行替换啦！

取消主题自带的 tooltip 效果

点击查看详情

在 _config.webstack.yml 末尾，加入如下代码

custom: /css/custom.css

// 然后写入如下样式
.tooltip {
  display: none !important;
}

到这里，基本上就完了基本的框架修改，后面就是完善这个 nav_demo 啦！~

撒花啦~~~~