Host your Static Site on GitLab Pages 🎉
Static Sites are quick and easy; and when you can host them for free forever, that's icing on the cake.
In previous post Ways to host single page application (SPA) and Static Site for FREE , we talked about different ways to host Static Sites or SPAs for free.
In this post, we will be looking at a very specific product: GitLab Pages.
GitLab has some really cool reasons to be chosen for hosting Static Pages
- Inbuilt pipelines, so you don't need to look for another service to build your sites
- Private repos which can have public sites
- If you wanna go pro (paid plans), it has basic plan cheaper than GitHub
To host site on Gitlab, you would need to create the CI/CD file named as
.gitlab-ci.yml which will trigger the build pipeline for Gitlab and then deploy the site for you on the domain structure as per your namespace; namespace can be either username or group-name
So what should go the
.gitlab-ci.yml file? But before that, what is yml file?
YAML is a configuration file generally used by CI/CD (Continuous Integration/Continuous Deployment) environments.
For Gitlab pages, the YAML file will have steps to
- Pick the image to use as platform where it will build the artefacts. The images can be the docker images as well. So you can find the favoured one and use here.
- Definition of type of JOB, which is specifically named pages in this case
- Then what stage this pipeline is for, like test, deploy etc. For the pages, it is deploy stage
- Then it will have scripts/commands to execute which will prepare final build for us
- Then we will define the artefacts to keep after the build is completed
- And then other criteria like which branches to build for
And for above cases, it will look like following:
image: alpine:latest pages: stage: deploy script: - echo 'Nothing to do...' artifacts: paths: - public only: - master
Now we have some different scenarios where our YAML file will be a bit different
Static HTML site
For static site, you just need to put all the stain files in public directory and it will deploy with above configuration.
Though if you don not have any public directory and have all the code/files in src dir , you can create the public dir and copy the necessary files in that dire in the scripts section; like as follows:
image: alpine:latest pages: stage: deploy script: - mkdir public - cp -a src/* public/ # or # - cp src/*.html public # - cp src/*.css public # - cp src/*.js public # - cp src/*.jpg public artifacts: paths: - public only: - master
For SPAs, the build process is more simple because almost all SPA Library or Framework comes with command line utility and uses npm for the build and other scripts
Following is an example YAML for React:
image: node:7.9.0 # change to match your node version cache: paths: - node_modules/ before_script: - npm install test: stage: test script: - CI=true npm test pages: stage: deploy script: - CI=true npm run build - rm -rf public - mv build public artifacts: paths: - public # GitLab pages serve from a 'public' directory only: - master # run on master branch
Above script is from this gist: Configuration file for create-react-app on GitLab Pages · GitHub
There are some static site generators like Jakyll, Hugo, Hexo etc and those can also be deployed on Gitlab pages. All general configs are available at GitLab Pages examples · GitLab
Following video generally covers the posting process though they have taken example of Jakyll.
If you agree, share this article with others 🗣