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 can have public sites
• If you wanna go pro (paid plans), it's 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 artifacts. The images can be the docker images as well. So you can find the favored 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 artifacts 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 @heypankaj_ and/or @time2hack

If you find this article helpful, please share it with others ?

Subscribe to the blog to receive new posts right to your inbox.