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.
Why GitLab
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
Basic process
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
SPAs
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
With Generator's
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.
Conclusion
What do you think about hosting static site on GitLab? Let me know through comments ๐ฌ or on twitter at @patelpankaj and @time2hack.
If you agree, share this article with others ๐ฃ