Sunday, January 19, 2025

Deploying my new Angular portfolio to Gitlab pages

I reworked my portfolio site with Angular, Tailwind CSS, and daisyUI. In this post, I'll discuss my motivations for the re-write, as well as demo my Gitlab Pages CI/CD setup.

Motivations & Process

In 2019 I built my first portfolio using Hugo, leveraging a custom theme I had developed. At the time Hugo was a great fit: simple, efficient, and perfect for a static site. However, as I began to explore more sophisticated functionality I found Hugo increasingly limiting.

By late 2024 when I decided it was time to refresh my portfolio, I realized the effort required to make Hugo work for my new vision wasn't worth it. My skills had grown significantly since 2019, and I was now comfortable building more complex websites. Angular, my preferred frontend framework, felt like the right choice for a highly customizable portfolio.

For hosting, I stuck with GitLab Pages. It's still free and with the introduction of the redirects file it handles single-page applications (SPAs) like Angular effortlessly. This made the decision to continue using GitLab Pages an easy one.

When it came to styling I wanted a fresh approach. In my professional work I've often relied on Angular Material UI for components and interactivity. However, for a portfolio site its extensive functionality felt excessive. Instead I decided to explore other options that would better align with my vision. Tailwind CSS had been highly recommended at nearly every tech conference I'd attended so I knew I wanted to use it. After some research, I discovered daisyUI, a Tailwind-based component library and theme provider. It struck the perfect balance between simplicity and flexibility.

For the design I opted for a lightly modified nord theme for light mode and a similarly customized night theme for dark mode. These themes not only fit my aesthetic preferences but also ensured a cohesive and professional look across the site.

Gitlab CI/CD Setup

This pipeline builds the Angular application using the Angular CLI. Once built, it pushes the artifacts into the deploy stage where they are zipped and staged for Gitlab Pages to deploy.

.gitlab-ci.yml

image: node:22-slim

stages:

  - build

  - deploy

build:

  stage: build

  script:

    - npm install -g @angular/cli

    - npm ci

    - ng build --configuration production --output-path dist 

  artifacts:

    paths:

      - dist/

    expire_in: 1 week

deploy:

  image: alpine:latest

  stage: deploy

  dependencies:

    - build

  pages:  # specifies that this is a Pages job

    expire_in: never

  script:

    - rm -rf public

    - mkdir public

    - mv dist/browser/* public/

    - gzip -k -9 $(find public -type f)

  artifacts:

    paths:

    - public

  only:

  - main

Gitlab Pages Redirects

The redirects file is needed for deploying SPAs (like Angular) to Gitlab Pages. This configuration ensures that all traffic is forwarded to Angular's entrypoint.

/public/_redirects

/* /index.html 200

Closing Thoughts

The result of my efforts is a portfolio that feels modern, functional, (still) free to distribute, and uniquely mine. Switching from Hugo to Angular has given me the flexibility to build exactly what I envisioned, and I'm excited to continue iterating on it as my skills and needs evolve.