realmq website

A static site build with hugo, gulp and deployed via netlify to https://realmq.com. The theme is based on TheSaas.

Getting started

In order to hack realmq website locally you need to have hugo static site generator installed.

# Linux
$ snap install hugo

# macOS
$ brew install hugo

If you are not covered read this installation guide.

Next, install the asset build tools:

$ npm i

Then build the project:

$ npm run build

Finally run the dev pipeline with live reload upon file change.

$ npm run dev

Directory Structure

|- content          # gonnabe website content/pages
|- data             # .yml, .json and .toml data files
|- layouts          # html templates
|-- 404.html        # 404 error page
|-- index.html      # Home page
|- public           # deploy directory of generated pages and assets
|- src              # asset source directory (scss, img)
|-- img             # images
|-- scss            # entrypoint and theme adjustments
|-- thesaas         # base theme scss sources
|- static           # build directory (css, img)
|- config.toml      # hugo config file
|- gulpfile.js      # asset build pipeline

For more information on hugo's directories: read this article

Asset build pipeline

• COMPILE: The scss files from src/scss/* will be compiled into css to static/css
• COPY: The images from src/img will be copies to static/img
• REV: All generated assets will be [revisioned](Gulp Rev) by appending content hash to their file names.
• REV: Revisioned css files will be rewritten to resolve the revisioned assets.
• REV: A manifest containing a map of all revisioned assets will be generated to data/assets.json

Within templates you have to reference assets via their rev mapping:

<img src="/{{ index .Site.Data.assets "img/some-image.png" }}">

There is also a short code:

<img src="{{< asset "img/some-image.png" >}}">

Helpful Resources

• Hugo Page