Host Your Own Blog with Gitlab and Netlify

This guide shows how to host your own blog / website for free with about 1 hour of effort. It’s how I host this blog of mine.

There are certainly other options, and I’ve used some in the past. But this worked very well and with very little configuration effort.

In this guide I use Gitlab as code host and Netlify to publish the website. I’m using the Hugo build system to build a static page.

Result

You’ll get a website / blog, that is automatically deployed whenever you push changes to your Git repository. The site will have free TLS (aka “https”) and IPv6. If you’re willing to spend USD 10 a year you will also get your own domain name.

Preconditions

I’m assuming you already have a Gitlab account (it’s free) and that you’re logged-in to Gitlab.

Setting up Gitlab

Go to https://gitlab.com/pages/nfhugo and fork the repository.

In your cloned repository, click Settings on the left. Change your Project Name and click Save changes .

Then scroll down to Advanced and click Remove the Forking Relationship .

Afterwards, once more open the Advanced section and change the Path to something that correlates with your project name, e.g. “blog”.

Setting up Netlify

If this is the first time you’re using Netlify, head straight ahead to their Sign Up page . I recommend to register with an email address, but you might as well use you Gitlab account right away.

Once you’ve completed the signup process, you should add a New site from Git . Choose your Git provider. If you’ve followed this guide, then that would be Gitlab .

Select your repository in the next step, e.g. “blog”. At the third step just click Deploy Site .

You’re website will now be deployed by Netlify and you will see the URL that Netlify generated for you. Click it, and you should see your blog / website.

Changing Content

There are two ways to edit the content of your website. The easiest is using the Web IDE of Gitlab. Or you can also edit your pages on your local machine.

Web IDE

Go to the Repsitory page of your Gitlab project. In the upper-right section you should see the Web IDE button. Press it, and it will take your straight to an online editor.

Local Editing

Hint: I’m assuming you know how Git works

You can clone the repository to your computer and edit the files locally. To preview the changes, you can install Hugo to your computer.

Run hugo serve from the project root directory. It will echo a URL on which you will find a preview of your page.

File Structure

Your content pages are in the content directory. The page directory contains general pages, such as the “about” page. The post directory contains your blog posts. You should be able to adjust the pages by looking at the examples present.

There is one more important file, and it’s the config.toml file. It contains some basic information about your blog that you would like to adjust. If you’re interested how it could look like, have a look at my config.toml file.

Head over to the Hugo website for more information about the file structure, all the settings and how it all works together. It explains anything in great detail.

Advanced Topic: Branch Preview

By default, if you push a branch to Gitlab, Netfify will create a preview deployment. You can find the URL to these on your site’s Netlify Dashboard under Deploy Previews .

It’s a great way to preview a branch to someone else.

Bonus: Custom Domain

It’s very easy to add a custom domain to your site, but domains are not free. But don’t worry, they’re mostly not expensive either.

You can get domains such as something.xyz for USD 10 per year.

Domain Registration

The first step is to register a domain somewhere. My domain is registered via gen.xyz .

If you choose to register with gen.xyz , pay attention to the following:

• Select 1 year term.
• Make sure to opt-out of any of the promotional offers they have (unless you want them).
• Enter the promo code GENXYZ and you will get the first year for just USD 1.

After you paid via credit card or PayPal you will get loads of emails. There will be one important email where you will need to confirm you email-address. It will usually arrive quite a bit after all the other emails arrive, and you can’t use the domain until you’ve confirmed your email-address.

Register via Netlify

You can also register your domain via Netlify. This is usally a bit more expensive, but it will be way easier in terms of configuration. If you want to do that, then just follow the steps below. But instead of a domain you already own, you’d enter the domain you’d like to have.

Configure Netlify

Now that you own a domain, go to your Netlify account and click on Domains . Choose Add or Register a Domain and enter your newly registered domain.

When it asks you to add DNS records, you may gladly skip over it. (i.e. click Continue )

In step three it will show you four nameservers. They will look similar to these:

• dns1.p04.nsone.net
• dns2.p04.nsone.net
• dns3.p04.nsone.net
• dns4.p04.nsone.net

Note them down, as they are required in the next step.

Then click Done .

Now, on the top right, you should see a Enable IPv6 button. I recommend to click it, as it might give your site an extra speed boost in certain situations.

Configure Nameservers

You will now have to hook up to your domain with Netlify. If you registered with gen.xyz, navigate to your account dashboard . Click the grey Manage button of your domain.

In the section where it says Nameserver , make sure the option Use custom nameservers is active. Then enter the four nameservers you have noted down before.

Click Save Nameservers .

It will usually take a while until your domain is reachable accross the internet. (A few hours is very common.)

Congratulations

You have sucessfully deployed a personal website / blog. Now make sure that you keep it up-to-date and that anyone knows about it.