Building this Blog Pt. 2

3 minute read Published:

Using GitLab to host your files

Let’s say you’re cheap like me and don’t want to pay for hosting some html, css, and js. There are a few choices for free hosting, the best of which are using Github’s or Gitlab’s pages features. This site is hosted through Gitlab which has the added benefit of auto-updating the blog every time I push without any further setup.

Here’s how you do it:

  1. Setup your repo with Gitlab.
  2. When you’re setting it up make the name / path of the project equal to: yourusername.gitlab.io.
    *note: It does not matter if the repo is public or private.
  3. Create a runner to build your blog every time you push. It will download the hugo docker container image and run the script hugo in order to build your static files. If you want to build the files yourself every time before you push then just remove the image and script portion of the below.
    Example .gitlab-ci.yml file to be added to your repo:

    image: publysher/hugo
    pages:
      script:
        - hugo
      artifacts:
        paths:
          - public
    
  4. Push to Gitlab. You can then check the ‘build’ tab on the left to see your current build process.
    If Gitlab successfully built the blog using the hugo command then you’re all set!

  5. Go to username.gitlab.io and see your site!

*Notes on the URL:
You can create `username.gitlab.io/projectname’ if you’d rather.

Adding Your Custom Domain

In order to add your custom domain, Gitlab is going to instruct you to use a CNAME DNS record. While this may work for the root of the domain on some hosting providers, it does not work in my case (Google domains). If you find that this does not work in your setup either, simply set the Gitlab domain as a subdomain and redirect your root domain to your subdomain.

  1. Go to the settings for the project.
  2. Go to the ‘pages’ tab on the left.
  3. Add a new domain (blog.ilangitter.com for me).
    *note: You can even add a ssl certificate here if you’d like.
  4. Save and look at the details for your newly added domain. It should say something like: blog.ilangitter.com CNAME gitter.gitlab.io.
  5. Go to your domain host’s preferences and add the CNAME record mentioned above
  6. If needed redirect your domain to your subdomain

Final Thoughts

This process above (with minor tweaks) will let you host any site created by a static site generator, not just Hugo. This has made my life so simple. After I’m done writing this all I have to do is push it to Gitlab and the rest is synced for me. If you want you could set up some sanity tests and add that to the script section of the yml file to make sure all is well.

comments powered by Disqus