Recently I learnt about the existance of HUGO, a general-purpose website framework that will help you build static website.
A static website is composed of: html, css and js components. Making it easy to create your first site.
Getting Started: How to install HUGO
Simply download the latest version from their repository:
- Code in a folder where the hugo.exe is available
You can use the version available in snap (it might no be the very latest):
snap install hugo --channel=extended
Alternatively, you can download a specific version like we did for windows with:
apt-get update -y #https://github.com/gohugoio/hugo/releases #choose and adapt the link below to the desired version wget https://github.com/gohugoio/hugo/releases/download/v0.87.0/hugo_0.87.0_Linux-64bit.deb sudo dpkg -i hugo_0.87.0_Linux-64bit.deb #extract and install #apt-get install -f #if dependency errors
Remember that the themes required some minimal version of HUGO to function properly.
Check HUGO version with:
Choose a Theme for your Project
You are ready to create your HUGO site, but how to start? First things first. Make sure that you like some of the available templates:
A great start point is:
You can check that the theme that you like is responsive:
- Use its demo link at https://pagespeed.web.dev/
How to Create a new HUGO site
In a folder where HUGO application has acces to, simple execute:
hugo new site <your project name> #hugo new site your_project_name
To generate the initial files that we will configure. This depends slightly from theme to theme, so for starters make sure to choose one with a good documentation.
Downloading a HUGO Theme
Once you have decided on your theme, you have to clone the repository, don’t be afraid, this is just to download to the HUGO folder the files that its creator shared with the world:
git clone https://github.com/adityatelange/hugo-PaperMod ./your_project_name/themes/PaperMod --depth=1
Now, it is time to see HUGO in action, we have to tell it that we are interested to use the theme that we just downloaded. For that, we have to modify the theme config file.
There are two flavours of config files: .yaml and .toml, basically we are providing inputs parameters to HUGO about our site.
If you are more conformatable with .yml files, rather than .toml:
.\hugo new site <your project name> -f yml
For PaperMod, the very basic config file in yaml version looks like:
baseURL= "/" #important, you will change that ageCode = "en-us" title = "Your Hugo Site Title" theme= "PaperMod" #the name of your desired theme, you have just downloaded it
Another way to download your desired theme is by:
cd <project name> git init git submodule add https://github.com/kaiiiz/hugo-theme-monochrome.git themes/hugo-theme-monochrome
HUGO Sample Sites
Try the sample site (if there is one in the repository). From personal experience, I would recommend to start by choosing a theme that has one of these sample sites, as you can start by adapting the initial look of the site that caught your attention in its demo.
cd ./your_project_name/themes/your_desired_theme/exampleSite .\hugo server --themesDir ../..
Modify the HUGO Theme
Have you been tinkering already with the demo site? Add your own content!
Start by creating a post:
./hugo new posts/first.md
As you can see, HUGO supports markdown to write your site.
Make sure to read your theme documentation and set proper configuration for each post. In PaperMod theme, you can start by using:
title: "" date: 2022-04-03T23:20:21+01:00 draft: false tags: ["tag1","tag2"] description: '' summary: '' url: ''
Check that everything works locally. HUGO can open a development server that compiles modifies in real time the changes as you save them:
You will see the changes getting applied on the go in: http://127.0.0.1:1313/
Generate your HUGO Site
Finally, generate the public files that you will deploy to your server
You will be able to check that the /public folder contains all the static files that form your website.
Got my HUGO site locally - What now?
At this point we have an awsome HUGO site. It would be a shame that the rest of the world cant enjoy what you have created.
For that matter, I will be writting how to deploy a HUGO site in the upcoming posts. I can tell you already that there are many ways to publish your site:
- Totally Free: using Github Pages - you will get a subdomain and space
- Free to some point: using Google Firebase, you get a subdomain and a free tier quota for usage and space
- Self-Hosting: using hardware you already own
With any of this options, you can add your own domain to have your site, your way.