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

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 about 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, go 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’re following 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 you 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 which you should adjust. If you’re interested in 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 lots 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 connect 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.)

Netlify will periodically check whether the domain points to it. As soon as the change has probagated through the internet, it will automatically create a Let’s Encrypt certificate for you, so that your blog post is secured via TLS (i.e. https).

Congratulations

You have sucessfully deployed a personal website / blog. It is secured via TLS (https) and reachable via IPv6. Now make sure that you keep it up-to-date and that anyone knows about it.