SKIP TO CONTENT

hosting a static HTML site on gitlab pages

November 30, 2021

written by
Rex Vokey

Do you ever wish you had a super-fast way to make a simple website public, and not have to worry about signing up with a hosting provider?  Well, these days there are actually lots of ways to do this.  But I’m going to tell you one of my favorite ways: Gitlab Pages.

what kind of site can it host?

Gitlab Pages can host everything from plain old HTML to your favorite SSG (Static Site Generator).  We’ve used it to host static HTML, Gatsby, and NextJS sites.  It simply follows the instructions you give it and makes the site available to visitors.

some knowledge required.

To do this, you have to have a Git repository on Gitlab.com.  This means you’re going to need to know how to use Git.  But if you’re already familiar with Git and other basic tools needed to work with code, it’s a breeze!

OK, how do I get my site hosted?

My favorite way to do this, if I’m trying to host static HTML, is to use a project template:

Gitlab create from template

Then, chose the “Pages/Plain HTML” template:

Gitlab pages, choosing plain HTML template

Then you’ll be asked to set up your project details:

Gitlab Pages project details

Once you create the project, it’s actually already nearly ready to go!  Just commit your HTML to the “public” directory and push it to the repository and it’ll host it.  However, for the sake of this article, we’ll edit the example “index.html” it has in there. Go to Repository>Files and navigate to public/index.html.  Once there, you can actually edit the file in place.

Edit Gitlab Pages public html file

Make a small change to the file, commit it, then wait a couple of minutes.  Gitlab pages will prepare the site for hosting and you’re good to go!  Navigate to Settings>Pages and get the address where your site will be hosted:

Location of Gitlab Pages hosted site

Done!

what if I want to point my domain to it?

You can!  At the end of the steps outlined above, you’re already on the correct page for this.  Simply click the “New Domain” button and follow the instructions.  I’m not going to detail that process here, but it’s usually straightforward, as long as you have control of your domain name.

what’s the catch?

There isn’t one.  There are limits to things like Pipeline minutes (the time it takes to build the site), but that doesn’t really come into play unless you’re updating the site *a lot*.  And there’s an overall limit to the size of the site (10 GB!).  Other than that, you don’t have to worry about it.  Once the site is up, you’re good to go.