I decided to go with Gitlab instead of Github to host my app’s website, because Gitlab is nicer to developers that use their platform. Github only allows you to have only one website for free.
RIP Github.
Hello, Gitlab! You sexy beast, you!
I used Gitlab to host my app launch website to make it easier for me to manage and make updates to it, plus being able to use version control - Duh!
Since I already use Gitlab to host my blog/portfolio website, why not add another. And although I had quite a few hiccups along the way, I decided to post how to do this and get everything working without losing your mind in the process.
Gitlab allows you to host multiple websites on their platform by using their Group feature. It makes it easier to test your app or project without a huge investment in creating and hosting it, especially if your app idea was not as well received as you thought, you won’t be too broke afterwards.
First create your website using HTML, CSS and Javascript - Gitlab handles it all! I decided to use a randomly free one-page template that I found online for my app, HealthTab.
This post will provide a bit on how to setup a basic website and not a CMS (content management system), but the DNS settings will also apply to a CMS as well.
Keep in mind that Gitlab also allows you to setup a CMS - obviously! And this is where I now host my blog and currently I use Hugo as my CMS.
I have my portfolio as my main site and my app website’s code is stored in a “Group”.
Note:
The YAML file setup will be different for each platform that Gitlab supports, so if you decide to use Hugo or a Ruby on Rails application, the YAML file setup will be different for each than what I list below.
Prep your website’s code & setup
If this is the only website you are going to use on Gitlab, the setup is a bit easier, but if you need to host multiple websites, Gitlab has a workaround called “Groups”. In this example, I will be mainly referring to Groups as the main setup, as there are many tutorials out there on how to set up for just one website.
-
Make sure all of the files and index.html folders are not contained in an internal folder, as we will create a public folder using the YAML file setup that Gitlab needs.
-
Set up your YAML file. This file is required by Gitlab to deploy your project as a HTML-only website (it can have CSS and Javascript files too). Name the file ‘.gitlab-ci.yml’ and add the following code, but be careful that you tab using spaces (2 spaces) and not with the tab button:
pages:
stage: deploy
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
paths:
- public
only:
- master
Upload that thing to Gitlab.
-
Then push the code to the Group’s project you created.
You should be able to go to your website, under Settings -> Pages, which will have an address to something akin to this: yourGroupName.gitlab.io/launch-page
Your website lives!
-
Set up two versions of your custom domain address, one with and one without the “www” under the Settings -> Pages
Example:
-
yourdomainname.com
-
You will get the Gitlab verification status options for each version and the code that is needed to confirm that the domain belongs to you.
Setup up your DNS settings in Namecheap
Now that your website is up and running on Gitlab, you now have to setup the custom domain name so that it will route to your Gitlab project and Gitlab would also like to verify that you actually own the domain as well.
-
To do this, you have to buy your domain name, then go into your Namecheap domain dashboard and update the DNS records.
-
Go to “Advanced DNS Settings”, remove the default setup.
-
Add the two “A records” pointing to Gitlab’s IP address and the verification values from Gitlab as “TXT” type:
*** If you aren’t using a Group with a Project to host your website, don’t add the “CNAME” line. You will need the “CNAME” for it to route to the correct project where your website calls home.
If you decide to buy, use and have private email setup with your domain’s suffix through Namecheap (e.g. admin@yourdomain.com), this setup will not interfere with this option.
I had such a fun time trying to get the DNS setup correct for my private email to work - it was such a pain, that I had to contact Namecheap’s tech support to figure out what I broke. So you are welcome.
Adding a SSL Certificate to Gitlab for your custom domain
You have to get a valid certificate if you want to have SSL registered to your domain. In order to use it, you can buy this service from Namecheap. Then you need to provide Namecheap with a CSR (Certificate Signing Request).
CSR is a block of code with encrypted information about your company and domain name.
1. Create a CSR
If you are using a Mac, you can create a CSR and key in Terminal.
- Open Terminal and go to a folder where you want to save the two files that will be generated, you can do something like this:
$ mkdir GenerateCSR
$ cd GenerateCSR
- Then you have to provide the following command, which starts the process of CSR and Private Key generation. The Private Key will be required for certificate installation.
$ openssl req -new -newkey rsa:2048 -nodes -keyout
yourdomain.com.key -out yourdomain.com.csr
You will be prompted to fill in the information about your Company and domain name.
It is strongly recommended to fill all the required fields in. If a field is left blank, the CSR can be rejected during activation. For certificates with domain validation, it is not mandatory to specify “Organization” and “Organization Unit” - you may fill the fields with ‘NA’ instead.
In the Common Name field, you need to enter the domain name the certificate should be issued for.
Please use only symbols of English alphanumeric alphabet. Otherwise the CSR can be rejected by a Certificate Authority.
$ Country Name (2 letter code) [AU]:US
$ State or Province Name (full name) [Some-State]:Texas
$ Locality Name (eg, city) []:Houston
$ Organization Name (eg, company):Future Studio
$ Organizational Unit Name (eg, section) []:NA
$ Common Name (e.g. server FQDN or YOUR name) []:yourdomain.com
$ Email Address []: youremail@yourdomain.com
Please enter the following 'extra' attributes
to be sent with your certificate request
$ A challenge password []: ENTER SOMETHING HERE THAT'S CHALLENGING
Once all the requested information is filled in, you should have *.csr and *.key files in the folder where the command has been run.
The *.csr file contains the CSR code that you need to submit during certificate activation. It can be opened with a text editor. Usually it looks like a block of code with a header: “—–BEGIN CERTIFICATE REQUEST—-“ It is recommended to submit a CSR with the header and footer.
The *.key file is the Private Key, which will be used for decryption during SSL/TLS session establishment between a server and a client. It’s block header begins as: “—–BEGIN PRIVATE KEY—–“. Please make sure that the private key is saved as it will be impossible to install the certificate without it.
DO NOT, I repeat, do NOT lose or delete your private key!
2. Go to Namecheap and activate your SSL Certificate
Find your SSL that you want to create and activate it by following the instructions. Namecheap is pretty good at guiding you through its process.
You will get an email that will walk you through the next steps to obtain your SSL certificate. In it, uou will recieve a code and a link to verify that the email is valid, then if the validation is successful, it will send you another email with your certificate files to download.
The download will contain two files:
-
A *.crt file AND
-
A *.ca-bundle file.
3. Add the SSL certificate to your domain version in Gitlab
Copy the certificate (*.crt file) text and paste it in the “Certificate (PEM)” field for each of domain versions in Gitlab, then copy and paste the text from the *.ca-bundle file under the .crt text.
Copy your key’s text in the “Key (PEM)” field and click the save button.
This should be all you need to add a SSL certificate for your domain hosted on Gitlab.
Viva Gitlab!
Subscribe to my email list for a monthly newsletter and special updates!