Install a website via flat files with Hugo

The concept

The concept is based on of flat files with a standard Markdown philosophy. All you have to do is to mark your content and use the formatting standards available here: Markdown Cheatsheet.

An interpreter will then assemble all the Markdown files and build them as html standard pages.

Why Hugo?

There are multiples Static Site Generators, but based on this article: https://medium.freecodecamp.org/static-sites-are-back-24d01a01f11a, the question was which are the most stared on the place right now.

Compared with GitHub Star History the response is quiet trivial. If count the best growth in the last 12 months the result is:

1. Gtasby (React.JS)
2. Hugo (Go)
3. Jekyll (Ruby)
4. Hexo (NodeJS)
5. Pelican (Python & Jinja2)

Gatsby had a great curve till now but the themes available are a bit limited at the moment. So the decision was to use Hugo which is responsive and rapid also.

According to his phrase The world’s fastest framework for building websites (…). With its amazing speed and flexibility, Hugo makes building websites fun again. The language Go which Hugo is based make it really fast to deploy a website.

Get the skeleton

First of all go to https://gitlab.com/pages/hugo to retrieve the hugo skeleton for Gitlab. Simply clone it like this:

Get other themes

You can also go to Hugo’s themes page and select a theme that fit your envy.

Select the theme, for instance Beautiful Hugo, and then download and put it in the theme folder within the previous skeleton.

Modify the files

Basically you need to configure:

• README.md
• config.toml
• all the data in content repository (_index.md, pages, posts)
• add your images in your selected theme for instance: themes/beautifulhugo/static/img then simply point like this: img/A3O-FA.png

Verify the YAML

The .gitlab-ci.yml should look like this:

# All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
image: registry.gitlab.com/pages/hugo:latest

test:
  script:
  - hugo
  except:
  - master

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

In the first part it will automattically load the latest image of hugo so you don’t have to carry about this. Then it will publish your pages on branch master and make it public.

You are done! Quiet easy nope?