September 21, 2016
Wordpress is a popular CMS to set up a site these days. Usually you’ll need some cloud space to host your site. Wordpress is a great product. It offers an easy way to build your site, but it usually comes with a hosting cost. It also obscures the details of how a site works.
When you learn Wordpress, you learn the framework, but not the basics of a website works, which is perfectly fine for most cases. Since you’re here to learn, we’ll start from scratch.
This is where Gitlab comes in. While its primary purpose is to manage code, it also offers free hosting for static sites. Static sites are often what you’d see for a company’s marketing site, where it displays information and showcases its services.
A dynamic site generates pages as needed, like a site people log into and each person is shown personalized information. Most websites these days fall into this category.
However, I’d argue that not everyone needs a dynamic website. If you’re looking to set up a basic site - personal portfolio, blog, documentation for a project - this method may be the most cost-effective for you.
Gitlab1 is used for managing code, but we’ll use it to host our static website.
pages: artifacts: paths: - public only: - master
Currently, your site lives at YOURUSERNAME.gitlab.io. If you want your site to be accessible at your own domain name, you can buy one at Google Domains. To set up a site at YOURDOMAIN.com, we’ll need to complete a few extra steps.
In your Gitlab project, add a new folder called public. This is the folder that will be served by Gitlab Pages, meaning files placed in this folder will show up on YOURDOMAIN.com (or YOURUSERNAME.gitlab.io if you haven’t setup a custom domain). So your project should now contain a folder named public, a README.md, and a .gitlab-ci.yml file.
Files named 404.html and index.html are treated specially.
In the public folder, add a new file called ‘index.html’. Edit index.html and add:
This is my website
Click Commit Changes at the bottom. Once the CI file runs through and shows passed under the Project tab, you should be able to access this on YOURUSERNAME.gitlab.io and your own domain (if you set it up).
At this stage, your website should look like this. Yay.