Behind The Pixels: How I Built My Website

Introduction

Building a website involves a fascinating interplay of technologies, tools, and decisions. In this blog post, I’ll take you behind the scenes of my personal website and share the stack I’ve chosen to create a seamless user experience.

Payload CMS: A Code-First Approach

What is Payload CMS?

Payload CMS is a powerful and flexible content management system (CMS) that takes a code-first approach. It allows developers to define their content models using TypeScript, which brings several advantages:

Type Safety and Autocompletion: By defining content models in TypeScript, you gain the benefits of type safety and autocompletion. This means fewer runtime errors and a smoother development experience.
Customizable Data Structures: With Payload, you’re not limited to predefined content types. You can create custom data structures tailored to your specific project requirements. Whether it’s articles, products, or any other content, you have the flexibility to design it exactly as needed.

The Code-First Philosophy

The code-first philosophy is at the heart of Payload CMS. But what does it mean?

Designing Models in Code: Instead of using a graphical interface to create content models, you define them directly in your codebase. This approach aligns well with modern development practices and version control systems.
Version Control and Collaboration: When content models are part of your codebase, you can track changes, collaborate with other developers, and roll back modifications if needed. It’s like managing your content alongside your application code.

Headless CMS: Decoupling Frontend and Backend

Payload is a headless CMS, which means it separates content management from frontend presentation. Here’s why this matters:

Focus on Content: As a developer, you can concentrate on creating content models and APIs without being tied to a specific frontend technology. Whether you’re building a web app, mobile app, or any other client, Payload provides the backend infrastructure.
Flexibility for Frontend Developers: Frontend developers can consume content via APIs, choosing the best tools and frameworks for their needs. This decoupled architecture allows for greater flexibility and scalability.

Strong TypeScript Support

For TypeScript enthusiasts, Payload is a dream come true:

Out-of-the-Box Typings: Payload provides strong typings out of the box. When you define your content models, you automatically get type definitions for your data structures. This consistency ensures that your data adheres to the expected format.
Type-Driven Development: TypeScript’s type system guides your development process. You can catch errors early, refactor with confidence, and enjoy better tooling support.

In summary, Payload CMS combines the power of code-first design, headless architecture, and TypeScript support. Whether you’re building a blog, an e-commerce site, or any other application, consider giving Payload a try—it might just become your new favorite CMS!

Learn more about Payload in their documentation.

Self-Hosting Payload on Hetzner Cloud

Why Hetzner Cloud?

Control: Opting for self-hosting grants you complete control over your environment.
Fine-Tuning Server Settings: You can tweak server configurations to match your specific requirements. Whether it’s adjusting resource allocation, optimizing caching, or fine-tuning security settings, self-hosting allows customization.
Security Management: With Hetzner Cloud, you’re in charge of securing your server. You can implement firewalls, set up intrusion detection systems, and follow best practices to safeguard your data.
Scalability: As your project grows, you can easily scale your resources. Whether it’s adding more CPU cores, RAM, or storage, Hetzner Cloud provides flexibility.
Cost-Effectiveness: Hetzner Cloud offers competitive pricing, making it an attractive choice for personal projects. Hetzner Cloud provides a range of plans, allowing you to choose the resources that fit your budget. Whether you’re running a small blog or a larger application, there’s a plan for you.

Self-hosting on Hetzner Cloud combines control, security, scalability, and cost-effectiveness. If you’re looking for a reliable VPS provider for your Payload CMS, Hetzner Cloud is definitely worth considering!

Learn more about Hetzner Cloud here.

CI/CD with GitHub Actions

What is CI/CD?

Continuous Integration (CI) and Continuous Deployment (CD) are essential practices in modern software development. Let’s break them down:

Continuous Integration (CI): CI focuses on automating the process of integrating code changes into a shared repository. Whenever you push changes to your repository, CI tools automatically build and test your code.The goal is to catch issues early, ensuring that your codebase remains stable and functional.
Continuous Deployment (CD): CD extends CI by automating the deployment process. Once your code passes tests in the CI pipeline, CD takes over. It deploys your application to various environments (such as staging or production) without manual intervention.

GitHub Actions

GitHub Actions is a powerful tool built right into your GitHub repository. Here’s how it works:

Workflow Creation: You define workflows (sequences of automated steps) in YAML files within your repository. These workflows can be triggered by events like pushes, pull requests, or scheduled intervals.
CI/CD Pipelines: GitHub Actions supports a full range of CI/CD workflows. When you push changes, it automatically runs your defined workflows. You can build, test, and deploy your code—all within the same environment.

My Workflow in Action

Let’s see how my CI/CD pipeline works with GitHub Actions:

Build and Test: Whenever I push changes to my repository, GitHub Actions kicks off. It builds my website, runs tests, and checks for any issues. Early detection helps prevent bugs from reaching production.
Deploy to my Hetzner Server: Once the tests pass, the CI/CD pipeline deploys my Payload app to my Hetzner VPS. This automation saves a ton of time and reduces the risk of manual errors. So I can focus on writing code, knowing that the deployment process is handled seamlessly.

In summary, GitHub Actions streamlines my development workflow by automating CI/CD tasks. Whether for catching bugs or deploying to servers

Learn more about GitHub Actions here.

Svelte: A Fresh Approach to Web Components

What is Svelte?

Svelte is a component-based JavaScript framework that stands out for its unique approach to building web applications. Here’s what makes it special:

Compiler-Based Approach: Unlike traditional frameworks where components are interpreted at runtime, Svelte compiles your components into highly optimized JavaScript during build time. This means that the browser doesn’t need to interpret any framework-specific code, resulting in faster load times and better performance.
No Virtual DOM: Svelte doesn’t rely on a virtual DOM (like React or Vue). Instead, it directly updates the DOM elements that need to change. Learn more why Virtual DOM is pure overhead
Component Syntax: Svelte components are written in a clean, concise syntax that closely resembles HTML. You define your component’s structure, styles, and behavior all in one place.It provides an elegant syntax for things like control structures ({#if myCondition === true}), loops ({#each myArray as item}) and more, what makes the components more readable and easier to understand in comparison to JSX.
Great Reactivity: Svelte’s reactivity system is elegant. You just declare reactive variables in your components or use the built in stores, and Svelte automatically handles the rest. No need for explicit watchers or complex state management libraries.
Svelte 5 (Beta) The brand new reactivity system of Svelte 5, called runes is based on signals. It's so far very awesome since it fixes some of the quirks of using reactive variables but the Svelte Devs are still keeping it as elegant as possible by leveraging the power of Sveltes compiler. It makes the state management a real joy and easier to understand and maintain.
Lifecycle Hooks: Svelte provides a few lifecycle hooks for things like mounting and unmounting and more.
Easy Animations: Svelte makes transitions and animations a breeze. You can out of the box animate any property directly within your components using the in:, out: and animate: directives.
No unnecessary re-renders: Svelte components only re-renderswhat needs to be re-rendered. Especially when leveraging the power of signals for the state management. The components are class based under the hood, so the JS code you write inside the <script> block will only run once on initialization. No worries about re-renders causing weird bugs.

Lern more about Svelte in their documentation or try the very well made interactive tutorial.

SvelteKit: The Next-Generation Meta Framework

Now, let’s talk about SvelteKit, which takes the Svelte experience to the next level:

Full-Stack Framework: SvelteKit is more than just a frontend library. It’s a full-stack framework that allows you to build complete web applications. It provides routing, server-side rendering (SSR), and APIs out of the box.
Built on Vite: SvelteKit leverages the power of Vite, a lightning-fast build tool. This combination results in rapid development and near-instantaneous reloads during development.
File-Based Routing: SvelteKit uses a file-based routing system. Each route corresponds to a file in your project. This simplicity makes it easy to organize your app and understand its structure.
Adapters: SvelteKit introduces the concept of adapters, which allow you to deploy your app to various platforms (such as Node.js, Netlify, or Vercel) with minimal configuration.

Learn more about SvelteKit in their documentation.

In summary, Svelte and SvelteKit offer a delightful development experience, blazing-fast performance, and a refreshing take on building web applications. As you write your blog post, feel free to explore these frameworks further and share your love for them!

Vercel: The Frontend Cloud

What is Vercel

Vercel is a powerful platform for deploying websites or web applications. Here’s why it stands out:

Seamless Deployment Workflow: Vercel streamlines the deployment process, making it incredibly easy for developers. Whether you’re working with static sites or frontend frameworks like React, Next.js, or Vue.js, Vercel handles the hard parts. Automatic scaling ensures your site can handle traffic spikes without manual intervention.
Global Availability and CDN: When you push code to Vercel, it instantly becomes available across the globe. Your website reaches users everywhere, ensuring a smooth experience. Vercel’s content delivery network (CDN) optimizes content delivery, reducing latency and improving load times.
Optimized Performance: Vercel’s infrastructure is highly optimized for frontend assets. Fast load times enhance user experience and positively impact SEO. The platform automatically compresses images, minifies JavaScript, and optimizes assets for efficient delivery.
Git-Connected Deploys: Deploying from Git repositories is seamless. Connect your GitHub, GitLab, or Bitbucket account, and Vercel handles the rest. You can also trigger deploys directly from your local environment by using the command line interface (CLI).
Analytics: Vercel provides lightweight, privacy-friendly analytics. Gain insights into performance, user behavior, and errors. Monitor your site’s health and make data-driven decisions.
Instant Rollbacks: Deploy confidently—even on a Friday! If something goes wrong, you can instantly roll back to a previous working deployment. No more sweating over broken releases.
Bridging Client and Server Rendering: Vercel seamlessly integrates both client-side and server-side rendering (SSR). Optimize performance by serving static content where possible and dynamic content when needed. Reduce bundle sizes and improve initial load times.
Reliability and Scalability: Vercel’s elastic scalability ensures your site can handle any scale. Whether you’re launching a personal blog or a high-traffic app, Vercel has you covered. Sleep well knowing your site won’t crash during traffic spikes.

In summary, Vercel empowers frontend developers to build, scale, and secure personalized web experiences. Whether you’re a solo developer or part of a team, Vercel streamlines the deployment process and provides the tools you need for success.

Learn more about Vercel in their documentation.

Conclusion

Behind every pixel on my website lies a thoughtful decision. From choosing the right tools to optimizing performance, building a website is an art form. I hope this glimpse into my process inspires you to craft your own digital masterpiece!

Note: The opinions expressed in this blog post are solely mine and based on my personal experiences.