Host your website for free with GitLab Pages (step-by-step)
Do you want to learn how to host your next website for free with GitLab Pages? In this post, you will learn what is required to host your site, and then I will show you step-by-step how to do so!
In this post, we will cover the following topics:
- What are GitLab Pages?
- Some questions regarding GitLab Pages
- How to host a free website with GitLab Pages?
What are GitLab Pages?
Overall this works similar to GitHub Pages that you can use to host repositories that you created on GitHub! If you use GitHub, this post here is better suited for you.
Some questions regarding GitLab Pages
What can you host with GitLab Pages and what not?
On the other hand, you cant use GitLab Pages to host applications that require server-side technologies (like express js) to run.
How is the URL of your final site structured?
The basic URL structure is:
One exception is the URL structure for a repository named like
username.github.io. The resulting URL is:
Can you use a custom domain?
Yes! Check the detailed guide provided by GitLab here.
What state does the repository have to be in?
The repository can either be public, private, or internal.
How to host a free website with GitLab Pages?
Compared to other options, GitLab Pages does not offer a simple way to host your free website through a web UI. Instead, you have to set up a CI that generates the page for you and gets executed in specific situations. So, for the step-by-step guide, let’s start with your project in the editor of your choice (you can also use the Web IDE).
For this example, we will use the website that we created with VITE and Tailwind CSS in this blog post here. (I recreated the GitHub repo on GitLab to show it in this post.)
- Create a file called
.gitlab-ci.ymlwith the following contents (hint: read the comments to see what you might need and whatnot):
image: node:16.5.0 pages: stage: deploy cache: key: files: - package-lock.json prefix: npm paths: - node_modules/ script: # needed for the vite build step only - npm install - npm run build # the final contents for your page always have to be stored in the public folder - cp -a dist/. public/ artifacts: # artifact to make it visible for gitlab pages paths: - public rules: - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
- Commit and push the new file
- Visit your free website under the suitable domain we discussed in the last section (for me it is https://programonaut.gitlab.io/website-html-tw-css)
In this post, we learned how to use GitLab to host a static website for free. You can use this to host the landing page of your next big project, or in some cases, you can even host the whole project.
I think it is a bit sad that GitLab does not offer a web interface to create your free pages. Other providers like GitHub offer this functionality and lower the barriers to a free website for everyone with it. Nonetheless, if you have some experience with CI, it works pretty easily, and luckily GitLab offers a lot of templates to ease that process.
Did you use GitLab Pages already? Share your experience in the comments below!
If you got some questions regarding this post or anything else regarding your projects, feel free to ask! I would love to help you 🙂
And lastly, if you liked this blog post, consider subscribing to my newsletter. In it I send a monthly update on all the posts I created!