In the ever-evolving world of web development, the choice of technology stack can make all the difference in how your website performs and how easy it is to manage. For my website, I decided to go with Hugo, a static site generator that has gained popularity for its speed and simplicity. In this blog post, I will walk you through the architecture of my website, highlighting the key components and tools that make it all come together seamlessly.

Introduction to Hugo

Hugo is a static site generator written in Go. It’s known for its blazing-fast build times and the ability to create incredibly lightweight websites. Hugo doesn’t require a database or server-side processing, making it a perfect choice for blogs, portfolios, and personal websites. It uses Markdown for content and provides a highly customizable templating system.

Logical Architecture

My website comprises several components and subsystems that work together to deliver a fast and reliable web experience. Here’s a breakdown of these elements:

Hugo - The Static Site Generator

At the heart of my website is Hugo. It transforms my content in Markdown and the website’s templates into static HTML files. This approach ensures rapid loading times and enhances security by eliminating common vulnerabilities associated with dynamic sites.

Azure Storage Account

I’ve chosen an Azure Storage Account with the “Static Website” feature enabled for hosting. This setup provides a cost-effective and scalable hosting solution. Azure Storage serves as the storage medium for my website’s static assets and HTML files.

Cloudflare

To manage domain registration, content delivery, SSL/TLS certificates, DNS management, analytics, and logs monitoring, I’ve integrated Cloudflare. Cloudflare is a Content Delivery Network (CDN) to distribute my website’s content globally, ensuring low latency and high availability.

Source Code Repository

I store the source code of my website in a GitHub repository. This allows me to easily track changes, and leverage GitHub’s robust version control features.

CI/CD with GitHub Actions

To automate the build and deployment process, I use GitHub Actions. This CI/CD pipeline is triggered automatically on each push to the repository’s master branch and scheduled nightly to keep the website up-to-date. Here’s a snippet of my GitHub Actions workflow:

This workflow involves setting up Hugo, determining whether it’s a production build, initializing Azure variables, building the site, purging Cloudflare CDN cache, and deploying the build artifacts to the Azure Storage Account.

Hosting and Deployment

The hosting and deployment process for my website is orchestrated by GitHub Actions and involves several steps:

• Checkout Code : The workflow begins by checking out the latest code from the GitHub repository.

• Set up Hugo : Hugo is set up with the specified version.

• Determine Production Build : The workflow checks whether the current build is for production. It uses the master branch as a reference for production builds.

• Initialize Azure Variables : Azure variables are initialized based on whether it’s a production or test build.

• Build Site with Hugo : Hugo is used to build the website, and the appropriate base URL is configured.

• See the Changes without Deployment : A dry run is performed to see the changes without actual deployment.

• Purge Cloudflare CDN Cache : Cloudflare CDN cache is purged to ensure the latest content is served.

• Deploy Build to Site : The final step deploys the build to the Azure Storage Account.

This CI/CD setup ensures that my website is continuously updated with the latest changes and delivers to users with minimal latency and maximum security.

In conclusion,

the architecture of my website, built on Hugo, is a testament to the power of static site generation and modern DevOps practices. With Hugo as the backbone, Azure Storage for hosting, and Cloudflare for content delivery, my website combines speed, security, and scalability into a harmonious web presence. GitHub Actions streamlines the development process, making maintaining and updating my site easy. By sharing this architecture, I inspire others to explore the world of static websites and discover their benefits for personal and professional projects. Content

Thank you!