Preface
Goal: Show Minimal Homepage in Hugo
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.
- Windows Environment: Chocolatey - Hugo
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.
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.
<pre>
</pre>
3: Minimal Homepage
Directory Structure
Consider have look for each file:
.
├── 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.
-
- config.toml
- gitlab.com/…/config.toml
# 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.
-
- content/_index.html
- gitlab.com/…/content/_index.html
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>
-
- layouts/index.html
- gitlab.com/…/layouts/index.html
<p>Dear Bulma,</p>
{{ .Content }}
<p>Yours sincerely.</p>
Notice your first Go html/template
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:
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.