Hugo Homepage

Managing all programs hosted on a server can be a hassle, that’s why a homepage is a good idea - no longer will you have to struggle not to forget all the services you run and instead you will have everything available from a single, handy page.

In this tutorial, we will create a simple homepage in hugo using the Bootstrap Startpage theme, however, I might decide to create another homepage using either Starbase 80, Jump or some other program.

On your local machine, create a new hugo project with hugo new site homepage. Navigate to the themes directory and download the startpage theme:

git clone https://github.com/spech66/bootstrap-bp-hugo-startpage.git

To implement a search engine in the search bar, add the following to the main config file:

[[params.searchEngines]]
  name = "SearXNG"
  activated = true
  url = "https://searxng.site/searxng/search"

The authors say that grouping links and a title above the search bar is possible, however, I have found that no matter how I approached this, it didn’t work. Try for yourself and let me know if you figure it out

To create links, edit data/links.yml. The structure should be like so:

---
- group: Social media
  items:
    - title: reddit
      url: https://www.reddit.com
      icon: fab fa-reddit
    - title: Facebook
      url: https://www.facebook.com
      icon: fab fa-facebook
- group: Utilities
  items:
    - title: GitHub
      url: https://www.github.com
      icon: fab fa-github

Apparently, icons can only be taken from Font Awesome

Afterwards, build the website by running hugo and you can upload it to your server. For convenience, I recommend making a .sh file:

#!/bin/bash

rsync -ritl homepage/public/ user@server:/var/www/homepage

Now, all you have to do is configure Nginx, Apache or any other web server and you’re done!