最快的个人导航网站Hugo-theme-start

最近找到一款非常适合自己的导航网站模板，Hugo Theme Start，因为是采用 Hugo 构建的静态网站，理所当然也就是全世界构建速度最快的网站之一，部署地址: https://leftn.com

前言
我之前曾使用 OneNav 作为个人导航网站，但在清理 VPS 时，误将网站给删了，由于没做备份，事后懊恼好久。
后来也经常想着重新做个个人网站导航，但没有找到合适的模板，这一拖就是很久。另外，由于在使用 OneNav 过程中，对于免费主题不提供搜索框功能一直耿耿于怀，便没有重新使用 OneNav 的想法。
这次起因是我在操作一个域名 DNS 编辑时，又误删除了几个 NS 记录。主要原因还是个人部署的服务太多、用的域名太杂，经常记不起来到底哪个域名是对应哪个服务。重新整理了一遍后，彻底激起了要再搞个导航网站的想法。

Hugo Theme Start

如果熟悉 Hugo 的朋友会发现，上边这个导航主题名称跟 Hugo 上最热门的 Hugo theme stack 非常像（也就是本博客使用的主题）。但其实这个名字是我故意在蹭后者瞎编的，本文介绍的这款主题官方名称是 HB Start Theme , 只是在 Github 仓库中叫 Theme start 。

主题安装

主题安装可以直接参考官方教程，总体还是比较简单的。

TIPS
需要注意的问题是，该主题需要用新近版本的 Hugo，最好直接用 Lastest, 我一开始用 0.125.6 是安装失败的。另外，需要安装 Hugo Extended 版本，并安装 Dart-Sass。具体教程在 Hugo 官网也都有，这里不再复述。

主题配置

这个主题也没有太多东西配置，无非是搜索引擎选择和排序，然后就是导航所需要的网址链接配置。

与一般 Hugo 网站存在区别的是，这款主题并不能直接修改模板，而是需要创建 Hugopress 模块，按 Hugopress 教程配置。

另外，导航网址所需的 icons 在 Hugomods 中也都能方便找到，不过这也不是必须的，如果所添加网址 favicon 获取都很正常，也可以不用自定义 icons。

简单修改CSS

使用 Hugopress 还是相对麻烦，由于我只需要修改一处 CSS ，按照 Hugo 通用做法更简单。

在根目录下创建 static 文件夹，新建 css\coustom.css，内容视自己情况而定。例如，我修改如下内容，避免在网页中间显示滚动条。

1
2
3
4
/* custom.css */
.hb-start-apps::-webkit-scrollbar {
  width: 0px !important;
}

在 layouts\partials\hugopress\modules\custom\hooks\head-end.html 中启用自定义 CSS，添加如下代码。

1
<link rel="stylesheet" href="/css/custom.css">

网站发布

我使用的是 Github Pages 作为发布端，通过 Github Actions 部署。

将本地 start-page 上传到 Github 仓库后，在 Pages 中选择新建一个 Actions 模板，搜索 Hugo 即可自动部署。

需要注意的是，如果一开始部署页面是 <username>.github.io ，在添加自定义域名后，需要重新手动运行一遍 workflow ，不然无法正常加载 CSS 。

Leftn Homepage

简单介绍一下个人导航网站内容。

Hyruo Blog

就是本博客，目前部署在 vercel，同时有两个备份 Hyruo Mirror 分别部署在 Cloudflare Pages 和 VPS 上方便随时切换。其中部署在 VPS 的备份折腾了很久，最后还是在 Hugo 论坛发现有大佬发部署模板才搞定。需要注意的是，在后两个镜像上的评论与本站都是通用的。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
name: Hugo CI & deploy # 修改自 Hugo 论坛大佬 Nicolas Martignoni

on:
  push:
    branches:
      - master
  workflow_dispatch:  # 允许手动触发工作流

jobs:
  build:
    name: Build and deploy website
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: ${{ env.HUGO_RELEASE }}
          extended: true
        env:
          HUGO_RELEASE: '0.125.6'
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '14'
      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Run Node
        run: npm ci
      - name: Build website with Hugo
        run: npm run build
      - name: Deploy website with rsync
        uses: burnett01/rsync-deployments@7.0.1
        with:
          switches: -avzr --quiet --delete
          path: public/
          remote_path: ${{ secrets.DEPLOY_DIRECTORY }}
          remote_host: ${{ secrets.DEPLOY_HOST }}
          remote_user: ${{ secrets.DEPLOY_USER }}
          remote_key: ${{ secrets.DEPLOY_KEY }}