Skip to Content
Skip Breadcrumb

Why and how I moved from wp.com to gitlab, netlify and hugo

Posted on Modified on by Aleksandar Lazic

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.

The Flow

Let’s just take a look at the following picture:

Gitlab-Hugo-Netlify

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:

Services

  • 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:

Other Tools

Here are some others that we would like to mention:

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.

Directory Structure

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:

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

The .scripts directory holds build scripts for the site. The entry point is the build.sh file.

Let’s take a look at build.sh:

#!/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.

Here hugo is run in verbose mode, so we can exactly what is happening in the deploy logs.

The optimize_images.sh script optimizes the images so that site loads faster in your browser.

And then there is a JavaScript file, 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.

Special Thanks

Our special thanks goes to:

You can contact me for any further questions and orders