In this guide I useGitlab as code host andNetlify to publish the website.I’m using theHugo 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 tohttps://gitlab.com/pages/nfhugo and fork the repository.

In your cloned repository, clickSettings on the left.Change yourProject Name and clickSave changes.

Then scroll down toAdvanced and clickRemove the Forking Relationship.

Afterwards, once more open theAdvanced section and change thePath 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 theirSign 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 aNew site from Git.Choose your Git provider.If you’re following this guide, then that would beGitlab.

Select your repository in the next step, e.g. “blog”.At the third step just clickDeploy 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 theRepsitory page of your Gitlab project.In the upper-right section you should see theWeb 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 installHugo to your computer.

Runhugo 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 thecontent directory.Thepage directory contains general pages, such as the “about” page.Thepost 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 theconfig.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 myconfig.toml file.

Head over tothe 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 abranch to Gitlab, Netfify will create a preview deployment.You can find the URL to these on your site’s Netlify Dashboard underDeploy 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 assomething.xyz for USD 10 per year.

Domain Registration

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

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

• Select1 year term.
• Make sure to opt-out of any of the promotional offers they have (unless you want them).
• Enter the promo codeGENXYZ 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 onDomains.ChooseAdd 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. clickContinue)

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 clickDone.

Now, on the top right, you should see aEnable 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 youraccount dashboard.Click the greyManage button of your domain.

In the section where it saysNameserver, make sure the optionUse custom nameservers is active.Then enter the four nameservers you have noted down before. ClickSave 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 aLet’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.