GitLab Pages vs. GitHub Pages

feature GitLab GitHub
site generator any any via GitHub Actions
  • GitHub Pages is substantially easier to setup and use, and is capable of medium websites getting several million hits / year
  • GitLab Pages has more features and flexibility for advanced users

GitLab Pages quick setup

  1. create a new GitLab Project named username.gitlab.io (put your GitLab username in for “username”)
  2. [if you already have a GitHub Pages website] Import from GitHub OR create/copy in your existing static website (if you had a GitHub Pages website, copy it here). If the latter, clone to the PC.
  3. on the GitLab project page e.g. https://gitlab.com/username/username.gitlab.io click Set up CI
  4. Create the .gitlab-ci.yml under the apply a GitLab CI YAML template. If coming from GitHub Pages use GitHub Actions for Hugo.
  5. The site is now building as seen with the Pipelines tab of your website project. It takes about 3-4 minutes to install the gems for a Jekyll site, then 2-3 more minutes to complete the build depending on the size of your website. The public URL should be username.gitlab.io.

If a custom domain was purchased, tie to GitLab Pages by: Project Settings → Pages add TWO new domains

example.invalid
www.example.invalid

Transfer DNS can take the website down so do this at low traffic times. Once ready, setup/transfer DNS to GitLab. Suppose the domain is example.invalid, then set DNS records to

example.invalid CNAME username.gitlab.io
www             CNAME username.gitlab.io

assuming the DNS provider supports CNAME flattening.

SSL Config

GitLab Pages used with for example Cloudflare works well to provide HTTPS with your custom domain name as per this procedure. With that procedure you can enable SSL “Full (Strict)” security.

Free GitLab accounts have a monthly quota for build “pipeline” time. For a small to moderate size static website it should be enough. Save quota by canceling pipelines / runs for unneeded builds.

For frequently updated, medium sized websites (hundreds or thousands of pages) consider Netlify with GitLab Pages or GitHub Pages.

Both GitLab and GitHub allow the source files (e.g. Markdown) to be private for a public website. Consider a private website repo, otherwise Google may present search results from Markdown code before the actual webpage.

Notes

  • For larger or active websites use Netlify, or build on laptop or cloud service like Wercker with any static generator such as Hugo and push HTML to GitHub Pages
  • Useful Jekyll plugins that GitHub doesn’t allow include jekyll-archives (page per category/tag)
  • GitLab Pages from scratch

Netlify works well with GitHub or GitLab, adding speed and reliability among other benefits