Static Website Hosting with GitLab Pages

3/3/2025

This post provides a step-by-step guide for users to create and deploy a personal website using GitLab Pages. It details the process of creating a new project, adding `index.html` and `style.css` files with provided templates, configuring the `.gitlab-ci.yml` file for deployment to the `public` directory, and accessing the deployed site. It also includes instructions for customizing the website with personal information and images.

9/23/2024

Introduced the `pages.path_prefix` property to `.gitlab-ci.yml` for GitLab Pages, enabling the creation of parallel deployments. This allows for distinct URLs for review apps based on `CI_MERGE_REQUEST_IID` and for versioned documentation deployments using `CI_COMMIT_BRANCH`. The post provides detailed CI/CD configuration examples for both scenarios.

9/13/2023

This post provides a tutorial on hosting VueJS applications using GitLab Pages. It details the steps for setting up a VueJS application using `vue-cli`, configuring the `.gitlab-ci.yml` file for GitLab Pages deployment (specifying `node:16-alpine` image, build and deploy stages, and artifacts path), and modifying `vue.config.js` to set the `outputDir` to 'public' and dynamically configure the `publicPath` based on the `CI_PAGES_URL` environment variable.

1/11/2023

This post details the implementation of an automated web attack surface monitoring solution using GitLab CI/CD and GitLab Pages. It outlines the creation of three shell scripts (`setup.sh`, `discover-services.sh`, `take-screenshots.sh`) to install tools (httpx, gowitness), identify web services, and generate screenshot reports. The `.gitlab-ci.yml` file configures these scripts to run in a pipeline, with the output published via GitLab Pages. It also covers defining target lists using CI variables and scheduling pipeline runs.

10/24/2022

This post details how to configure Astro to output static files to a 'public' directory and static assets to a 'static' directory, and how to set the `base` and `site` properties in `astro.config.mjs` to ensure correct asset loading when deploying to GitLab Pages. It also outlines the steps for creating a `.gitlab-ci.yml` file using the GitLab Pages wizard to build and deploy an Astro site, specifying `node:lts` as the build image, `npm ci` for installation, and `npm run build` for the build command.

4/18/2022

This post introduces and evaluates several static site generators (SSGs) including Hugo, Zola, Jekyll, Hexo, GatsbyJS, and Astro. It provides an evaluation toolkit for choosing an SSG based on use case, languages/frameworks, ecosystem, community, and specialty. It details the 'single binary' approach with Hugo and Zola, and the 'standard approach' with Jekyll and Hexo. It also touches upon more flexible SSGs like GatsbyJS and Astro. The post highlights how these SSGs can be deployed to GitLab Pages, with specific examples and guides for Hugo, Zola, Jekyll, and Hexo.

3/15/2022

This post details how to publish Obsidian.md notes using GitLab Pages by integrating with MkDocs. It outlines the necessary file structure, MkDocs configuration (`mkdocs.yml`), and GitLab CI configuration (`.gitlab-ci.yml`) to build and deploy a static site from Obsidian notes.

1/20/2021

This post details how to find and utilize Middleman lifecycle callbacks by reading the open-source codebase. It provides a list of core Middleman callbacks and a step-by-step guide on how to locate them within the Middleman repository. The author also plans to contribute this information back to the Middleman documentation.

8/6/2020

This post details a user's implementation of a system using GitLab Pages and CI/CD to automate the reporting of local COVID-19 rates. The process involves a Kotlin script run by Gradle to download data, calculate rates per 10,000 residents over two weeks, and generate a CSV file. This CSV is then published to GitLab Pages via a CI/CD job, where a static website using d3.js reads the data to graph the results. GitLab Pipeline Schedules are used to run the script multiple times a day.

8/3/2020

Introduced API-based configuration for GitLab Pages, replacing the legacy config.json file and NFS traversal. The Pages daemon now sources domain configuration from an internal API endpoint (`/api/v4/internal/pages?domain=...`) on demand and caches it. This significantly reduced daemon startup time on GitLab.com from ~25 minutes to under a minute. The post also details the transition plan to object storage and the potential for Kubernetes deployment, and provides guidance for self-managed instances to enable API-based configuration.

5/11/2020

This post details how to leverage GitLab CI/CD and GitLab Pages to publish accessibility test reports. It outlines the steps to include the `Verify/Accessibility.gitlab-ci.yml` template, configure the `a11y_urls` variable, and deploy the generated HTML report to GitLab Pages by moving it to the `public` directory and renaming it to `index.html`. This makes the accessibility report persistently available at a static URL, facilitating broader organizational sharing.

11/7/2019

This post details a specific workflow for design handoffs using Sketch Measure to generate HTML design specs, which are then committed to a GitLab project. GitLab CI is used to trigger GitLab Pages, which hosts these HTML specs as a static website. This enables easy sharing of up-to-date design specifications via a URL. The post also highlights the use of Git hooks to automatically mention issues in commit messages and the ability to view previous versions of specs via CI job artifacts.

2/20/2019

Introduced the ability to select from popular GitLab Pages templates directly from the new project setup screen, simplifying the creation of new static websites. This allows users to bypass the need to fork existing templates and get started immediately. The post also details the process of setting up a Hugo-based site using this new feature, including editing the `config.toml` file to match the project URL and triggering the CI/CD pipeline for deployment.

8/28/2018

This post announces the cleanup of legacy Azure infrastructure for GitLab Pages, specifically the removal of the proxy load balancer at the old IP address (52.167.214.135). It instructs users with custom domains pointing to this old IP to update their A records to the new GCP IP address (35.185.44.232) to avoid service disruption.

10/12/2017

This post details how an educator leveraged GitLab and Grav CMS to create an open course environment, demonstrating a practical application of GitLab for content management and collaboration. It highlights the use of GitLab for version control of course materials, collaborative editing by students, and integration with a flat-file CMS (Grav) that uses Markdown. The author also discusses the benefits of open-source software in education and provides a specific example with the CMPT-363 course hub, releasing an open-source version of the project.

12/7/2016

This post details the rebuilding of the GitLab Docs site using Nanoc, GitLab CI, and GitLab Pages. It describes the build process, including cloning documentation from multiple repositories (CE, EE, Omnibus, Runner) into a single Nanoc project, using Rake tasks for repository management, and leveraging Nanoc's rules for Markdown processing (Redcarpet, Rouge for syntax highlighting) and asset handling. It also outlines the CI/CD pipeline for testing (link validation, SCSS linting), building, and deploying the static site to GitLab Pages.

11/3/2016

This post details how to configure GitLab CI/CD to generate code coverage reports using tools like SimpleCov and then publish these reports as static websites using GitLab Pages. It provides specific `.gitlab-ci.yml` configurations for running tests, storing results as artifacts, and deploying them to GitLab Pages. It also touches upon parallelizing test suites and merging partial coverage reports, and how to add a code coverage badge to the README.md.

10/3/2016

This post introduces GitPitch, a service that allows developers to create slideshow presentations directly from Markdown files within GitLab repositories. It details how to create a PITCHME.md file, the convention for defining slides using #HSLIDE, and how GitPitch generates a public URL for the presentation. It also covers customization options like themes and background images, and how GitPitch integrates with the GitLab workflow for versioning and audience tailoring. The post highlights the benefits of using GitPitch for developers to present their code and ideas efficiently.

8/19/2016

This post details a workflow for posting to a GitLab Pages blog from an iOS device using static site generators (SSGs). It outlines the use of Git operations apps (like Working Copy) and text editors (like Editorial) on iOS to clone repositories, create branches, write content, add images, commit changes, and push them to GitLab. The process leverages GitLab CI/CD to build and deploy the website upon merging changes to the main branch. It also discusses the limitations of mobile blogging, such as the lack of local rendering for previews.

6/17/2016

This post provides concrete examples and GitLab CI configurations for building various Static Site Generator (SSG) sites with GitLab Pages. It details the `.gitlab-ci.yml` structure required for the `pages` job and the `public` folder output. It showcases examples for Jekyll, Middleman, Nanoc, Octopress (Ruby), Hexo, Brunch, Harp, Metalsmith, GitBook (Node.js), Pelican, Lektor, Hyde, Nikola (Python), and Hugo (Go Lang), including links to their project repositories and CI configurations.

6/10/2016

This post details the benefits and structure of modern Static Site Generators (SSGs), including their environment, template engines, markup languages, preprocessors, and directory structures. It explains how SSGs automate web development to output static sites from dynamic writing, leading to faster page loading times and reduced server load. The post also covers blog-aware SSGs, supported content types (client-side processing, media files), interactive services, and utilities, as well as the limitations of SSGs (e.g., inability to register users or have admin access). It explicitly mentions the integration with GitLab Pages for building SSG sites.

6/3/2016

This post defines static vs. dynamic websites, outlining their technical components, advantages (performance, simplicity for static; customization, personalization for dynamic), and disadvantages (manual updates, lack of personalization for static; complexity, potential load times for dynamic). It introduces the concept of Static Site Generators (SSGs) as a solution to bridge the gap, enabling dynamic development with static publishing, and positions GitLab Pages as a free hosting solution for SSG-generated sites.

4/7/2016

This post details the process of creating a new project for GitLab Pages, including step-by-step instructions for setting up `.gitlab-ci.yml` configurations for plain HTML, Jekyll, and Hexo websites. It also explains the distinction between user/group and project websites, and provides guidance on namespace management for custom domains.

4/4/2016

This post announces the availability of GitLab Pages for free on GitLab.com, detailing its features such as support for custom domains and TLS certificates. It also provides links to new resources like a quickstart guide, user and admin documentation, and a group with example projects for various static site generators. The post emphasizes that GitLab Pages is powered by GitLab CI and invites users to a webcast about GitLab CI.