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.

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

  stage: deploy
  - echo 'Nothing to do...'
    - public
  - 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

  stage: deploy
  - mkdir public
    - cp -a src/* public/
    # or
    # - cp src/*.html public
    # - cp src/*.css public
    # - cp src/*.js public
    # - cp src/*.jpg public
    - public
  - 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

    - node_modules/

  - npm install

  stage: test
    - CI=true npm test

  stage: deploy
    - CI=true npm run build
    - rm -rf public
    - mv build public
      - public # GitLab pages serve from a 'public' directory
    - 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.


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 馃棧

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

No Comments Yet