← Journal

The Story of This Very Website

How mapuekyle.com began as a beginner DevOps project: a static site provisioned on a DigitalOcean droplet with Terraform, Ansible, Docker and GitHub Actions.

  • DevOps
  • Terraform
  • Ansible
  • CI/CD

Update (2026): This post chronicles the first version of the site: a DigitalOcean droplet provisioned with Terraform and Ansible. It has since moved to Netlify for cost, and has now been rebuilt from scratch with Astro and an interactive three.js scene. I’ve kept this story as-is because it’s a snapshot of where I started. A “part 2” on the rebuild is on the way.

Introduction

As a passionate individual eager to delve into the world of DevOps, I found myself facing a common question: “What is a good beginner project to gain practical experience?” After exploring various resources and communities, I stumbled upon an insightful blog post titled “The Best DevOps Project for a Beginner” by Logan Marchione. Inspired by his guidance, I embarked on an exciting journey to build my own static website, and I would like to share my personal experience and lessons learned along the way.

Often it is difficult to get hands-on experience in DevOps. Doing a beginner challenge could solidfy otherwise only theoretical concepts.

Static site

He recommended building a static site. That’s the answer.

meme

Why

A static site is a great beginner project because:

How

Below are the steps I took based on the outline of the steps for the challenge.

  1. Purchase a domain
    • I took the liberty to browse through different sites/marketplace:
    • Hover, Cloudflare, Namecheap, AWS, etc…
    • Given that this is a personal website, I opted for a ‘.com’ on Namecheap
  2. Create a two Github repositories
  3. Provision a virtual private server (VPS) in the cloud using Terraform
    • So I looked up the recommended options for VPS that has Terraform support: (DigitalOcean, AWS, Linode, OVH, Oracle Cloud, Scaleway, etc…)
    • For this project I used DigitalOcean (I like it because of the straightforward pricing)
    • This code was checked out on its respective repo
    • Notes: Don’t hard-code your API keys anywhere in your Terraform code, more like NEVER hard-code them.
    • Notes: There is an option for me to store them on my DigitalOcean account but they can also be stored remotely (HashiCorp offers free state storage in Terraform Cloud)
    • Improvements for future: Use Atlantis with your GitHub account to run Terraform via pull requests to GitHub
  4. Setup DNS using Terraform
  5. Configure the VPS using Ansible
    • After the VPS is online, I installed updates, setup a user, install packages, mess with configuration files, etc…
    • I also installed a webserver Nginx.
    • This code was checked into Git on GitHub
    • Notes: Learned that I can get a TLS certificate for free from Let’s Encrypt and configure your webserver to redirect from port 80 to 443
    • Improvements for future: Instead of making one big playbook, use roles
  6. Run Ansible through Docker
    • I thought it would be a good practice for me to run my Ansible playbook through Docker (but you can definitely run it as usual)
    • I created a dockerfile inside my Ansible directory and installed respective dependencies for me to run the playbook.
  7. Create the static site locally on your PC
    • I choose from an extensive list of static site generator (here)
    • I initially used a different site that runs on react but opted for~
    • Hugo,(consider things like speed, available themes, the language the templates are written in, plugins, if you’re migrating from another data source, etc…)
    • I chose Hugo for its simplicity and speed.
    • This code was checked into Git on Github
  8. Deploy the site to your VPS using Setup GitHub Actions
    • The goal is to automate deploying the static site’s rendered code from GitHub to VPS
    • The automation is set on each push but you can definitely add other triggers (e.g., on each commit to Git, on a schedule, on a tag, etc…)
    • Improvements for the future: Use GitHub Actions to lint your Terraform code with tflint and Ansible code with ansible-lint
    • Bonus: Setup a free GitHub Pages domain at mapuekyle.github.io and push a dev/test version of your site to there but you can also do it on Netlify.

Cost

In my setup, I’m spending $84/year on my site and the surrounding infrastructure.

ProductCost (per year)
Domain (NameCheap)$12
DNS (Cloudflare)Free
VPS (DigitalOcean)$72

Conclusion

In conclusion, building a static website as a beginner project proved to be an excellent choice. It laid the foundation for my DevOps aspirations and provided a solid platform for future growth. I encourage fellow beginners to embark on this journey, embrace the challenges, and experience the transformative power of hands-on learning in DevOps.

I am looking forward to doing The Cloud Resume Challenge and navigating my way through roadmap.sh).

-Kyle