Making this Website

Assignment

make the website for CBA's self-hosted GitLab

Where we started

Well, all of us in the HTMAA class started with an blank site on the GitLab repo, deployed by a GitLab CI job to pull the repository into a Nginx server.

# .gitlab-ci.yml

job:
  script:
    - mkdir -p /var/www/classes/863.25/people/YufengZhao
    - export GIT_WORK_TREE=/var/www/classes/863.25/people/YufengZhao/
    - git checkout -f main
    - git pull

However, this doesn't include a build step, which is required for a static site generator. Because I really don't want to write raw HTML and CSS for this type of blog site, I decided to find a workaround.

Site Genration on CBA's GitLab

In 2024, I spent a lot of time to make my personal website easier to maintain. I ended up building a MDX component library powered by a Next.js Static Site Generator (SSG). The Content Management System (CMS) is just a simple GitLab repository.

Yufeng's personal website as of Sep 2025.

I think it looks pretty sweet, and I'm quite used to writing my custom MDX syntax. The first thing I did was to copy the entire repository and modify it to fit the CBA's GitLab. In order to make it work, I had to modify the CI job to build the website.

# .gitlab-ci.yml, modified
stages:
  - build
  - deploy

variables:
  BUN_VERSION: "latest"

build:
  stage: build
  cache:
    paths:
      - ~/.bun/install/cache/
      - node_modules/
      - .next/cache/
  before_script:
    # Install Bun
    - curl -fsSL https://bun.sh/install | bash
    # Add Bun to PATH for current session
    - export PATH="$HOME/.bun/bin:$PATH"
    # Verify installation
    - bun --version
  script:
    - export PATH="$HOME/.bun/bin:$PATH"
    - bun install
    - bun run build
  artifacts:
    paths:
      - out/
    expire_in: 1 hour
  only:
    - main

deploy:
  stage: deploy
  dependencies:
    - build
  script:
    - mkdir -p /var/www/classes/863.25/people/YufengZhao
    - rm -rf /var/www/classes/863.25/people/YufengZhao/*
    - cp -r out/* /var/www/classes/863.25/people/YufengZhao/
  only:
    - main

I chose to install Bun on the CI runner to build my Next.js website. However, the pipeline job not only failed but also froze the entire GitLab server for about 30 minutes (thank god I was doing it during midnight). I realized the GitLab server is probably quite slow, so I immediately reverted the CI configuration.

Separation of Source Code and Output

Thankfully, I'm not the only person who has this problem. My classmate Sun Chuanqi's decided to separate the source code and the output. Here's a summary of his approach:

🔗

Source code

Sun moved his source code to Github, which is faster than CBA's GitLab.

🔨

Building and Deploying Output

Using Github Action to build the site and commit the output to the GitLab repository.

This is his repository, and here's the Github Action. As written in Sun's instruction, in order for the Github Action to work, I had to add the GitLab access token to the Github repository's secrets, and relax the branch protection policy to allow direct push permission on the main branch. Here's the screenshots of how to do them: