I have decided to start my own company in 2017. So, I was looking for a solution for the company’s website.
Nowadays it’s quite easy to get a domain and a hosting provider. So, I looked for the platforms to build the site and Hugo caught my eyes. I wanted to use it.
But I didn’t have the time to dig into the Hugo templates, because I must run my company to earn money for a living 😀 in 🇦🇹.
For this reason, as an alternative, I chose WordPress.com for the website. But I was not very happy with it. So, after several months of work, I decided to go back to Hugo. But I wanted a helping hand.
Luckily, there is the Hugo community forum. I posted there and asked for help. A very talented guy Munif Tanjim responded to the post, since then we worked together to bring THIS site from grounds up.
Let’s just take a look at the following picture:
As you can see, it represents how the site is run.
We used GitLab to host the source of this site in a private repository. All the templates and contents of the site is stored there. And then it’s processed by Hugo and deployed to Netlify.
Services, Tools & Resources
We tried and used various tools and services along the way. Let’s take a look at those we ended up with:
- Netlify: Handles the deployment & hosts the site
- Algolia: Handles the search functionality on the site
- GitLab: Stores the source files & used for Issue handling
Tools & Resources
We used various tools for developing the site. Here are some of them:
- Hugo: The static site generator used to build the site
- Node.js: The main engine that powers the build process
- webpack: The famous bundler along with Babel, SCSS and loads of other plugins
- Text Editors: Used for developing the site & writing its contents
- Font Awesome: We used it for the icons on the site
Here are some others that we would like to mention:
- Keepass 2: The password safe
- gtmetrix: The checker for your site
- powermapper: The SEO Optimization Checker
and of course, there is:
- Communication: The key to success 😎
- Vision: The target how the website should be
Behind the Scene
Now, let’s take a a look behind the scenes. Currently, we can’t share our whole repository with you all. But, we will provide an overview of how everything is set up and working together.
As we said before, the source for this site is hosted on a private repository on GitLab. Our repository’s directory structure looks like this:
├── config.toml ├── content │ ├── authors │ ├── blog │ │ ├── 2016 │ │ └── 2017 │ ├── categories │ ├── events │ ├── glossary │ ├── pages │ └── tags ├── data │ └── authors ├── netlify.toml ├── package.json ├── .scripts ├── static │ ├── img │ └── pdfs ├── themes │ └── me2digital │ ├── archetypes │ ├── data │ ├── i18n │ ├── layouts │ │ ├── _default │ │ ├── events │ │ ├── glossary │ │ ├── index.html │ │ ├── pages │ │ ├── partials │ │ ├── search │ │ ├── shortcodes │ │ └── taxonomy │ ├── package.json │ ├── src │ │ ├── fonts │ │ ├── scripts │ │ └── stylesheets │ ├── static │ │ └── assets │ ├── theme.toml │ ├── webpack.config.js │ └── yarn.lock └── yarn.lock
Connecting Them Together
We will have to connect this GitLab repository with Netlify. Netlify has an article about it on their blog: GitLab integration for Netlify. If you want to know details about Netlify and their features, they have a detailed documentation. You can check it.
We mentioned that for the site’s search functionality, we’ve used Algolia. You can check their documentation to learn about how to use their service on your own site. Detailed information about their API is also there. They also have helpful tutorials.
The Build Process
.scripts directory holds build scripts for the site. The entry point is the
Let’s take a look at
#!/usr/bin/env sh rm -rf public hugo -v .scripts/optimize_images.sh node .scripts/build_algolia.js
This build script is running on Netlify. After changes are pushed to the GitLab repository, Netlify executes this build script on their infrastructure.
hugo is run in verbose mode, so we can exactly what is happening in the deploy logs.
optimize_images.sh script optimizes the images so that site loads faster in your browser.
build_algolia.js. It is executed with Node.js. It generates a Search Index from
the site’s contents and then uploads it to Algolia.
Our special thanks goes to:
- Chris, from Netlify, for his great support and patience to my questions
- Daniel Müller for his post From WordPress to Hugo