01. My website - why and how

Why I decided to build my website and how I created it.

Why I Built My Website

1. A Place to Collect My Experiences

I wanted a personal space where I could document all my professional experiences, projects, and ideas. A website serves as a central hub that reflects my personal and professional journey.

2. Write More, Share More

My goal is to write more frequently, not only to improve my ability to share knowledge but also to consistently contribute to social platforms like Substack and LinkedIn.
Why? Because personal branding is crucial. Sharing your ideas and experiences helps you stand out, build credibility, and connect with like-minded individuals.

3. Exploring Some AWS Serverless Services

As a big fan of AWS, I wanted to deepen my understanding of their serverless products by working on a small, hands-on project. This website gave me the opportunity to evaluate the practical effort required to build something from scratch and gain insights into the associated costs.

How I Built It

Choosing a Cost-Efficient and Easy-to-Manage System

I needed a solution that was simple to maintain, scalable, and wouldn’t break the bank. After researching several options, I decided on the following stack:

• Hugo: A fast and flexible static site generator that simplifies content creation.
• Amazon S3: Used for hosting the static files.
• AWS CloudFront: A global content delivery network (CDN) to ensure my site loads quickly anywhere in the world.
• Route 53: For managing my domain name and DNS settings.
• Cert Manager: To handle HTTPS certificates and provide a secure browsing experience.

The Process

Below is a high-level diagram of the workflow for my website:

Step 1: Starting with Hugo

I used the Hugo template hugo-blog-awesome as the starting point for my website. This template provided a clean and simple design, making it easier to focus on content creation.

Step 2: Generating Static Files

After customizing the template, I generated the static files with the following command:

hugo -D

This outputs the files under the public/ directory.

Step 3: Uploading Files to S3

The next step was to upload the generated static files from the public/ directory to my S3 bucket. This can be done manually or automated using a tool like s3cmd.

Step 4: Configuring the S3 Bucket

To host the website, I configured my S3 bucket with the following properties:

• Bucket Name: Matches the domain name (e.g., www.mysite.com).
• S3 Static Website Hosting: Enabled.

Public Access Settings:

• Block all public access: Off.
• Block public access to buckets and objects granted through new ACLs: Checked.
• Block public access to buckets and objects granted through any ACLs: Checked.
• Other settings: Left disabled.

Additionally, I added the following bucket policy to allow public access to objects:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mybucket/*"
        }
    ]
}

Step 5: Setting Up CloudFront

I created a new CloudFront distribution with the following settings:

• Origin Domain: My S3 bucket (e.g., www.mysite.com.s3.amazonaws.com).
• Viewer Protocol Policy: Redirect HTTP to HTTPS.
• Cache Policy: Use the default caching settings or customize as needed.
• Geographic Restrictions: Enabled geographic restrictions to limit access to specific regions.

Step 6: Configuring the Domain

I purchased my domain and created a DNS record in Route 53:

Step 7: Setting Up SSL with Certificate Manager

Finally, I requested an SSL certificate using AWS Certificate Manager for my domain. Once the certificate was validated, I associated it with my CloudFront distribution to enable HTTPS.

Lessons Learned

• Static Site Generators: Tools like Hugo simplify the process of creating and managing content.
• AWS Integration: Services like S3, CloudFront, and Route 53 provide a scalable and cost-effective hosting solution.