MyDaily Coding About me

Create Static WebSite

Introduction

The content of this post is to show you how to create a static website in an easy way, using a framework and themes.
The post will be very easy and short… so, let’s proceed..

Framework

The Framework that we will to use is HUGO.
I don’t want to stress you with a lot of info about it.
If you are curious, you can check:

  1. Hugo WebSite
  2. Wikipedia
  3. GitHub repo
  4. Go, programming language that HUGO is based for.

How To

We havo to install the framework before to use it (reallY?! :D )
We will use different tools depending by the OS of your PC.

GIT is mandatory. Please, install it if not present in your PC.

1 Install

choco install hugo -confirm

brew install hugo
  • Linux
brew install hugo

2 Create e new WebSite

It’s very simple. Just write this code in terminal

hugo new site YOUR_SITE_NAME

3 Add a Theme

The theme of this WebSite is Hermit.
I’ll show you how to install it

cd YOUR_SITE_NAME

git init
git submodule add https://github.com/Track3/hermit.git themes/hermit

The code before just download the theme. Now, we have to configure the web site with the new theme:

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

4 Configure the WebSite

Before to compile the WebSite, you have to set-up some configurations in the config file.
Just open the file config.toml with VisualStudioCode (for example) and edit it following this example:

https://github.com/Track3/hermit/blob/master/exampleSite/config.toml

Simply, add what you need for your WebSite

5 Create a Page

Now, it’s time to create your first static page: \

hugo new posts/my-first-post.md

As you can see, the path is posts/. This path matches with the voice declared in the config.toml \

[menu]
  [[menu.main]]
    name = "Posts"
    url = "posts/"
    weight = 10

So, this means that, if you want to create a “folder” to collect other posts (because of different argument, for example), you have to configure the folder in the configuration and run the command to create the static page \

hugo new FOLDER_NAME/PAGE_NAME.md

5.1 Edit the WebPage

Just open the .md file with an editor like VSCode. You have to use the markdown to write the content.
As you can see, the framework will not create an empty file:

---
title: "PAGE_NAME"
date: 2022-10-03T17:58:27+02:00
draft: true
toc: false
---

If you want to add TAGS or a background image, just inser this:

images:
  - https://picsum.photos/1024/768/?random
tags: 
  - MyDaily
  - Software
  - Security

7 Start the Server!

Now it’s time to see the results.
Just run this in the terminal:

hugo server -D

and open the url http://localhost:1313

8 Build the WebSite

Very simple. Just run: \

hugo -D

Last

That’s all!
Have fun!