Streamlining My Personal Website Deployment: Navigating Challenges and Solutions

TL;DR

• Integrated multiple front-end frameworks into a seamless personal site.
• Efficient deployment using GitLab CI and Render’s deploy hooks.
• Simplified frameworks: considering Vue for lighter static sites.
• Streamlined CI/CD pipeline for performance and cost-efficiency.
• Quick site build with Hugo highlights the power of static sites.

Back on track with my personal website, I’m refining its architecture to ensure seamless navigation across a Go backend, a Postgres database, and various static front ends. While the backend setup is straightforward on Render, the frontend involves Remix, Next.js, and Hugo.

Deployment Strategy

The sites are deployed via Render using GitLab CI/CD, divided into four stages: validate, test, build, and deploy. The static sites built with Hugo and Next.js are validated and tested, skipping build steps within GitLab. GitLab CI triggers Render’s deploy hooks upon code changes, automating the update process. The custom commands within Render and use of environment variables automate asset generation and deployment.

Framework Choices

Given that the Connect site is too complex for Next.js, I plan to switch it to Vue for its simplicity and efficiency. I need to verify that Vue can export a static site, ensuring it fits into my deployment model.

Central Front-End: Remix

The Remix framework serves as the primary interaction layer, providing a proxy to my Go backend and rewriting URLs to align with the main domain path. This setup allows integrated access to two static sites housed in different containers.

Challenges & Insights

• Correct YAML formatting in blog posts is critical. Errors in front matter parsing disrupt the site.
• Efficient GitLab CI configuration helps manage costs by running only necessary pipeline jobs, optimizing compute time.

Progress & Observations

While reviewing my GitLab CI configuration, particularly with Docker images, I noticed the need to update deprecated login commands. However, my current focus is to maintain velocity, ensuring all steps from validation to deployment are seamless.

Exploratory Steps

I’ve reconfigured my Hugo site settings to support relative URLs, crucial for link rewriting via Remix. Building the site with Hugo was remarkably fast, yielding a substantial 192 pages ready for deployment. This speed and efficiency highlight the potential of static site generation.

I’m excited to delve deeper into the Hugo-generated outputs and streamline remaining deployment steps. This session was a snapshot into the iterative and explorative nature of developing and deploying a multi-faceted personal website.