Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  


Preface

Goal: Show Minimal Homepage in Hugo

Table of Content

Here, I present a Hugo Tutorial, step by step, for beginners.

  • Preface: Table of Content

  • 1: Install

  • 2: Running for the First Time

  • 3: Minimal Homepage

  • What is Next ?

Related Article

I had wrote about Minimal Hugo and you can read here:

The only different is, the content. And I also add nice favicon.

Source Code

You can download the source code of this article here.


1: Which Hugo to Install

Most distribution, have Hugo in repository. Even Windows can have it with chocolatey package manager.

But after a while, you may need multiversion of Hugo. Or you might need extended verio of Hugo. You can download here, and put it somewhere in your OS.

Hugo: Binary Version

In my cases, I prefer to uninstall Hugo package from distribution, and replace with whatever binary I need with alias in .bashrc or .zshrc. For example:

alias hugo='/media/Works/bin/hugo-54'

2: Running for the First Time.

Create Project

Consider create new Hugo site, or extract the file above, in your favorites directory

$ cd /media/Works/sites

$ mkdir tutor-hugo-bulma

$ cd tutor-hugo-bulma

$ hugo new site .
Congratulations! Your new Hugo site is created in /media/Works/sites/tutor-hugo-bulma.

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.

Run Server

$ hugo server

                   | EN  
+------------------+----+
  Pages            |  3  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 6 ms
Watching for changes in /media/Works/sites/tutor-hugo-bulma/{content,data,layouts,static}
Watching for config changes in /media/Works/sites/tutor-hugo-bulma/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

This will show you nothing in your browser.

$ curl localhost:1313

<pre>
</pre>

3: Minimal Homepage

Directory Structure

Consider have look for each file:

$ tree

.
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── _index.html
├── layouts
│   └── index.html
├── static
└── themes

.

Config

Now you can change your newly created config artefact, and change the title to whatever suitable for your site, and then add any description that you want.

# An example of Hugo site using Bulma for personal learning purpose.

baseURL      = "http://example/"
languageCode = "en-us"
title        = "Hugo's Letter to Bulma"

[params]
  description = """\
    Embrace, extend, and extinguish: Open Source with Daily Genuine Experience.
    From Coding, Design, Package Management Tweak to Desktop Customization.
    """

Minimal Homepage

In order to have a working index.html you need this two artefacts.

The only different is, the content.

  <p>There are so many things to say,
    to Bulma, Chici, and that Android 18.
    Hugo don't want to live in regrets.
    But Hugo have to go. So Hugo wrote this.</p>
<p>Dear Bulma,</p>

{{ .Content }}

<p>Yours sincerely.</p>

Notice your first chroma language:

  • {{ .Content }}.

Archetypes

You don’t really need this archetypes artefact, unless you create article from CLI.

Tips: Most of the times, I did copy paste from other articles, using file manager. And never use this archetypes.

Server Output: HTML Source

Consider see the content again.

$ curl localhost:1313
<p>Dear Bulma,</p>

<p>There are so many things to say,
    to Bulma, Chici, and that Android 18.
    Hugo don't want to live in regrets.
    But Hugo have to go. So Hugo wrote this.</p>


<p>Yours sincerely.</p>

Server Output: Browser

Now check the generated page on your favorite browser:

Hugo: Page on Browser

Tips: Multiple Sites

As a blogger, I can open two or more local Hugo sites at once. In order to do this, I use different port such as:

$ hugo server --disableFastRender --port="1515"

More Complete Article

I had wrote about Minimal Hugo and you can read here:


What is Next ?

We are going to use theme, with layouts inside each theme. Out first theme is still pure HTML with no CSS. Consider continue reading [ Hugo Layout ].

Thank you for reading.