Fully Open Edge Cloud

How To Build A Website With Hugo in Theia

How To Build A Website With Hugo in Theia
  • Last Update:2021-09-07
  • Version:001
  • Language:en

Agenda

  • Prepare environment
  • Create a New Site: quickstart
  • Verification

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. 

Prerequisites

Access nginx-server-cdn-url

Follow the steps in How To Deploy Hugo in Theia With Embedded Software URL to deploy Hugo. 

Get URL from connection parameter of the nginx-server-cdn-url. Access nginx-server-cdn-url  to have an initial instruction. 

Source environment

According the instruction to enter the directory of Hugo workplace and source the environment:

bash-4.3$ cd /srv/slapgrid/slappart64/srv/runner/instance/slappart0/srv/hugo
bash-4.3$ source /srv/slapgrid/slappart64/srv/runner/software/b9ae9628491bee23011cddd7d489b286/go.work/env.sh

To verify your Hugo install:

(go.work) bash-4.3$ hugo version
hugo v0.86.1+extended linux/amd64 BuildDate=unknown

Create a New Site

hugo new site quickstart

The above will create a new Hugo site in a folder named quickstart.

Congratulations! Your new Hugo site is created in /srv/slapgrid/slappartX/srv/runner/instance/slappart0/srv/hugo/quickstart.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

As the output indicates, the folder of your Hugo site should be under the directory of Hugo workplace. And it can be easily found in EXPLORER.

Add a Theme

See themes.gohugo.io for a list of themes to consider. This quickstart uses the beautiful Ananke theme.

First, download the theme from GitHub and add it to your site’s themes directory:

cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Then, add the theme to the site configuration:

echo theme = \"ananke\" >> config.toml

Add Some Content

You can manually create content files (for example as content/<CATEGORY>/<FILE>.<FORMAT>) and provide metadata in them, however you can use the new command to do a few things for you (like add title and date):

hugo new posts/my-first-post.md

Edit the newly created content file if you want, it will start with something like this:

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

Re-instanciate 

We mentioned in the welcome page

There is always a Hugo server running for you (in the directory of Hugo workplace) so that the website can dynamically update according to your changes.

Therefore, instead of launching hugo server as it introduces in the Quickstart, you are supposed to parse a site parameter to the instance by:

$ slapos request 'Embedded Instance' https://lab.nexedi.com/nexedi/slapos/raw/master/software/hugo/software.cfg --parameters site='quickstart'

The software name and software release uri can be found by

$ slapos service list
# OUTPUT
# List of services:
# Embedded Instance https://lab.nexedi.com/nexedi/slapos/raw/master/software/hugo/software.cfg

Then launch command to re-instanciate:

$ slapos node instance --all

More information about rapidspace-HowTo.Supply.A.Software.And.Request.An.Instance.On.Theia.Runner

Verification 

Once slapos node instance finished without errors, you can access the website through hugo-server-cdn-url or nginx-server-cdn-url.

hugo-server-cdn-url is the website hosted by the Hugo server while nginx-server-cdn-url is the website hosted by the Ngnix server. 

You website looks great, but it is sure that you want to improve it. You can find more documentations on https://gohugo.io/.

Make the changes to the site configuration or any other file in your site while the Hugo server is running, and you will see the changes in the browser right away, though you may need to clear your cache.