Building a Personal Website with Next.js, Contentful, and AWS

6/3/2024 | Oscar Su

Hi! In this blog post, I want to share my experience of building my personal website. As a developer, having a personal website is crucial for showcasing your projects and sharing your thoughts through blog posts. I'll walk you through the process I followed and the technologies I used to create a fast, scalable, and easy-to-manage website.

  • Next.js: Next.js is a React framework that enables server-side rendering and static site generation. The pages are built using Next.js's file-based routing system. Each page is defined as a Reach component in the pages directory, with dynamic routes handled by creating files with brackets (e.g., [slug].js). This allows for easy creation of individual post pages. Next.js's getStaticProps function is used to fetch data from Contentful at build time. This enables the generation of static HTML files, which can be served quickly to users without the need for server-side processing on each request. This only downside is that I need to rebuild the site every time I publish a new blog post.

  • TypeScript and Tailwind: Typescript is used to add static typing on top of a JavaScript application, providing better code quality and catching potential errors during development. Tailwind is CSS framework that allows for rapid UI development using a set of pre-defined utility classes that can be easily composed to style the website's component in a consistent fashion.

  • Contentful: A headless content management system (CMS) that decouples content from the presentation layer. It provides a user-friendly interface for creating, storing, and managing the content. Contentful's API is used to fetch this content and deliver it to the Next.js application.

  • AWS (Amazon Web Services): A cloud platform for hosting and deploying websites.

    • S3 (Simple Storage Service): S3 is used to host the static files of the website. An S3 bucket is created and configured for static website hosting. The generated HTML and CSS files form the Next.js build process are uploaded to this bucket using the sync function from the AWS CLI. S3 provides a scalable and cost-effective storage solution for serving the website's static assets. It ensures high availability and durability of the files.

    • CloudFront: CloudFront seamlessly integrates with the S3 bucket hosting the website's static files, acting as a caching layer and serving the content from the nearest edge location to the user. This reduces the load on the origin server and improves the overall responsiveness of the website. It acts as the primary entry point for user requests, routing them to the nearest edge location for faster delivery. The current distribution is limited to North America and Europe.

    • Route 53: A scalable DNS and domain management service. It is used to configure the custom domain (ausika.com) for the website. A new hosted zone is created in Route 53 for the domain, and A records are set up to point to the CloudFront distribution. This ensures that when users access the website using the custom domain, the requests are routed to the correct CloudFront distribution.

By leveraging Next.js, Contentful, and AWS, the personal website achieves a balance of performance, scalability, and ease of management. Next.js provides server-side rendering and static site generation, ensuring fast initial page loads and improved SEO. Contentful acts as a headless CMS, allowing for flexible content management without coupling it to the website's codebase. AWS services like S3, CloudFront, and Route 53 enable efficient hosting, content delivery, and custom domain setup.