Creating A Website With Hugo
How did I make this website? Well read this to find out how. I will include how to host it in a future blog. THIS IS A LINUX TUTORIAL
What is HUGO?
Hugo is a Go-based static site generator. Hugo was first developed in 2013 by Steve Francia as an open source undertaking. Hugo has been continuously improved since version 0.14 in 2015, with Bjrn Erik Pedersen serving as the project’s principal developer. The Apache License 2.0 governs the use of Hugo.
Why use HUGO?
HUGO contains support for the Markdown (.md) language. Hugo allows the user to write the website in the Markdown language then compile it into a usable website written in HTML. You can also host the server on a laptop or on whatever computer you are working on and see changes live. This prevents bugs and issues or allows the user to fix them before they impact the public website.
Setup and Install
Hugo whilst being simple has a number of prerequisets. One of these includes snap. Snap is a package manager that allows us to easily install hugo. To use snap though you need to first install snap. To do this enter a command line and write.
-$ sudo apt install -y snap
This will install snap and automatically agree to install the extra packages that snap requires. After this we can write:
-$ snap install hugo
Accept all of the prompts to install required libaries. When this is done we can add this to our path.
sudo nano /etc/environment
You will see a variable named PATH. The file should look somthing like this
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/local/games:/usr/games
COMMAND_NOT_FOUND_INSTALL_PROMPT=1
POWERSHELL_UPDATECHECK=Off
POWERSHELL_TELEMETRY_OPTOUT=1
DOTNET_CLI_TELEMETRY_OPTOUT=1
Add to the end of PATH:
:/snap/bin
It will now look like:
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/local/games:/usr/games:/snap/bin
COMMAND_NOT_FOUND_INSTALL_PROMPT=1
POWERSHELL_UPDATECHECK=Off
POWERSHELL_TELEMETRY_OPTOUT=1
DOTNET_CLI_TELEMETRY_OPTOUT=1
Press Ctrl+X, then when it says “Save Modified Buffer”, type “Y” and press enter.
After this open a command line and type
-$ hugo
You should get the error
Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
Run `hugo help new` for details.
Total in 0 ms
Creating the HUGO website.
For this I will be using the Nightfall theme. We will cover setup, basic configuration and hosting the website locally on your machine during development. Making it public may be done in a later blog.
First what you want to do is open a command terminal and write these commands one after the other.
Building the base
-$ cd {DIR WHERE YOU WANT WEBSITE SOURCE}
-$ hugo new site quickstart
-$ git init
-$ git submodule add https://github.com/LordMathis/hugo-theme-nightfall themes/nightfall
-$ echo "theme = 'nightfall'" >> config.toml
Init Setup
You have now built the foundation of your new website. But before we write a post we need to do a basic configuration of the “config.toml” file. Open this file in notepad, notepad ++, vscode, or any other text editor. In this enter:
baseURL = 'localhost'
languageCode = 'en-us'
title = '{WEBSITE TITLE}'
theme = 'nightfall'
[params]
author = "{YOUR NAME}"
user = "{WHATEVER}"
hostname = "{HOSTNAME}"
[[params.social]]
key = 0
name = '{SOCIAL 1}'
url = "{URL}"
[[params.social]]
key = 1
name = '{SOCIAL 2}'
url = "{URL}"
[menu]
[[menu.header]]
name = "posts"
weight = 0
url = "/posts"
Fill out all of the lines with {} with values that match yours. For example the line “title = ‘{WEBSITE TITLE}’”, may become “title = ‘Epic Cool Blog’ “. Then Write
-$ hugo server --buildDrafts
This will work although when you click on posts you will get a 404 error. If this is the case this is good.
ADDING POSTS
Open a the command line and turn of your server by pressing Ctrl+C. Type
-$ hugo new posts/test.md
Open test.md in any text editor of your choice. In this copy and paste this code. DO NOT DELETE THE TOP
# TEST- 1
## TEST - 2
### TEST - 3
#### TEST - 4
##### TEST - 5
###### TEST - 6
***
TEST - text
*TEST - text*
**TEST - text**
***TEST - text***
ADD TWO SPACES TO BREAK LINE
***
Code Snippet
***
Points
> As you can see this is spaced
>> As you can see this is double spaced
>>> As you can see this is triple spaced
>>>> As you can see this is quadruple spaced
>>>>> As you can see this is quintiple spaced
>>>>>> As you can see this is sextuple spaced
1. This is the first thing on a list
2. This is the second thing on a list
3. This is the third thing on a list
4. This is the fourth thing on a list
5. This is the fifth thing on a list
6. This is the sixth thing on a list
1. This is an indented list
2. This is an indented list
[]()
**Use "[]-()"To Break Lists (Together)**
- First item in Unrdered List
- Second item in Unrdered List
- Third item in Unrdered List
- Fourth item in Unrdered List
- Fifth item in Unrdered List
- Sixth item in Unrdered List
- This is an indented list
- This is an indented list
[]()
**Order of numbers doesn't matter**
1. This is labeled as number 1
9. This is labeled as number 9
***
Images
***
URLS
<https://youtube.com>
Formatted
Open [`Youtube`](https://youtube.com).
***
BASIC HTML CODE WORKS
Save and try and press the button again. As you can see an Icon will pop-up which is the title of your article. Click on it and you will see the code. Thanks for reading.