Recently, I found a navigation website template that suits me perfectly: Hugo Theme Start. Since it’s built using Hugo, a static site generator, it naturally ranks among the fastest websites in the world. Deployment address: https://leftn.com

Preface
I previously used OneNav as my personal navigation website, but while cleaning up my VPS, I accidentally deleted the site. Without a backup, I regretted it for a long time.

I often thought about recreating a personal navigation website, but couldn’t find a suitable template, so it kept getting delayed. Additionally, during my use of OneNav, I was always bothered by the fact that the free theme didn’t include a search bar, so I didn’t want to use OneNav again.

This time, the trigger was when I was editing a domain’s DNS and accidentally deleted a few NS records. The main reason was that I had too many self-hosted services and too many domains, making it hard to remember which domain corresponded to which service. After reorganizing everything, I was determined to create a navigation website again.

Hugo Theme Start

If you’re familiar with Hugo, you might notice that the name of this navigation theme is very similar to the popular Hugo Theme Stack (which is the theme used by this blog). However, I intentionally borrowed the name for fun. The official name of this theme is HB Start Theme, but it’s called Theme Start in the Github repository.

Theme Installation

You can refer to the official tutorial for installation. It’s relatively straightforward.

TIPS
One thing to note is that this theme requires a recent version of Hugo. It’s best to use the latest version. Initially, I tried using version 0.125.6, but it failed to install. Additionally, you need to install the Hugo Extended version and Dart-Sass. The specific instructions are available on the Hugo official website, so I won’t repeat them here.

Theme Configuration

This theme doesn’t require much configuration. It mainly involves selecting and sorting search engines and configuring the URLs for navigation.

Unlike typical Hugo websites, this theme doesn’t allow direct template modifications. Instead, you need to create a Hugopress module and configure it according to the Hugopress tutorial.

Additionally, the icons needed for navigation links can be easily found on Hugomods. However, this isn’t mandatory. If the favicons for the added URLs are fetched correctly, you don’t need to customize the icons.

Simple CSS Modifications

Using Hugopress can be a bit cumbersome. Since I only needed to modify one CSS rule, I followed the general Hugo approach, which is simpler.

1. Create a static folder in the root directory and add a css/custom.css file with your desired content. For example, I modified the following to prevent scrollbars from appearing in the middle of the webpage.

1
2
3
4

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

2. Enable the custom CSS by adding the following code in layouts/partials/hugopress/modules/custom/hooks/head-end.html.

1

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

Website Deployment

I used Github Pages for deployment, with Github Actions handling the process.

After uploading the local start-page to the Github repository, create a new Actions template in Pages, search for Hugo, and it will deploy automatically.

Note that if the initial deployment page is <username>.github.io, after adding a custom domain, you need to manually run the workflow again; otherwise, the CSS won’t load properly.

Leftn Homepage

Here’s a brief introduction to the content of my personal navigation website.

Hyruo Blog

This is my blog, currently deployed on Vercel, with two mirrors—Hyruo Mirror—deployed on Cloudflare Pages and a VPS for easy switching. The VPS backup took a lot of effort to set up, but I finally found a deployment template shared by a Hugo forum member. Note that comments on the mirrors are synced with the main site.

 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 # Modified from a template shared by Nicolas Martignoni on the Hugo forum

on:
  push:
    branches:
      - master
  workflow_dispatch:  # Allows manual triggering of the workflow

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 }}

Hyruo Status

This is a network service monitoring tool using Nezha Probe, primarily to monitor the availability of my four VPS instances.

Two of them are Oracle’s 4-core, 24GB ARM servers located in Hyderabad, India, and Singapore. Another is Oracle’s 1-core, 1GB AMD server in Hyderabad, India. The last one is a 1-core, 1GB server from Claw.cloud in Singapore, which I believe is a subsidiary of Alibaba Cloud’s marketing department.

Hyruo Analysis

This is a website analytics tool using Umami, primarily for analyzing website traffic. It’s not publicly accessible.

Umami is privacy-friendly, open-source, and self-hosted, making it ideal for personal use.

Hyruo Browser

This is a web-based remote Firefox browser for personal study and research. It’s not publicly accessible.

It’s convenient to use but requires decent network speed. For video streaming, the server CPU also needs to be decent.

Hyruo Reader

This is an online reader using 阅读3.0, for personal use only and not publicly accessible.

I found that there aren’t many good e-book readers for Windows. I even installed an Android emulator just to read e-books before discovering the web server version.

Hyruo Coding

This is a remote Vscode service using code-server, for personal login only and not publicly accessible.

Compared to Microsoft and Github’s services, it offers better direct connection stability and seamless file sharing with the VPS.

Hyruo Editor

This is an online Markdown editor using StackEdit, freely usable with data stored locally in the browser.

I mainly use it to write Hugo blogs on my phone, although image uploading is a bit complicated.

Hyruo Chat

This is a ChatGPT-like service I set up for friends and family using Nextchat. It’s not publicly accessible.
Now that domestic AI models have caught up, regular users can just use local alternatives.

Hyruo Feeds

This is a personal subscription management app using Wallos, mainly for managing various subscription services and recurring expenses. It offers better analysis features than phone calendar reminders, though it’s not as powerful as dedicated accounting software. I don’t bother with detailed accounting, though. This is also not publicly accessible.

Hyruo AI

This is a personal AI using LobaChat, for personal login only and not publicly accessible.

Hyruo File

This is an online file storage app using Cloudreve, for personal use only and not publicly accessible.

Hyruo Download

This is an online storage management app using Alist, for personal use only and not publicly accessible.

Hyruo Photo

This is an online image hosting service using EasyImage, for personal use only and not publicly accessible.

Hyruo Video

This is an online reverse proxy app using an undisclosed program, for personal use only and not publicly accessible.

Is a Personal Navigation Website Useful?

It can be both useful and useless.

It’s useful because it helps organize and visually display links in a fixed manner.

It’s useless because a browser homepage can achieve the same effect.

The difference is that browser homepages have limited space for shortcuts, which is better reserved for frequently used platforms.

Additionally, for backend management panels and other URLs that shouldn’t be public, browser bookmarks are still the way to go.