post-thumb

Build a Fast, Cost-Effective Website with Hugo and Azure Static Web Apps

Do you want to create an affordable, high-performance, scalable and secure website without needing administrative work and coding skills?

Today I will share a cost-effective solution to help you build a high-performance and secure website in Hugo on Azure Static App.

The best part?

You even don’t need to know any programming but just need to know markdown to create a page in Editor.

Previously, I created a high-availability WordPress on AWS’s Lightsail. However, I found maintaining WordPress for high security required ongoing attention and extra work.

Especially, WordPress vulnerable plugins usually become a backdoor for hackers to compromise your website.

Later, I discovered Hugo can build a static website and even be easily hosted on Azure Static App in just a few minutes without worrying about website security and performance issues.

Of course, you could use any frameworks like Gatsby, Ghost, Hugo, Jekyll to build and deploy static web pages to Azure Static App.

Right now, you can take advantage of $200 in free credits.

Let’s get started.

Table of Contents:

  • Introduction to Hugo and Azure Static Web Apps
  • Prerequisites
  • Create a static Website with Hugo
  • Setting Up Azure Static Web Apps
  • Testing and Deployment with CI/CD in GitHub Action
  • Summary

1. Introduction to Hugo and Azure Static Web Apps

Hugo: A fast and modern static site generator written in Go, known for its speed and efficiency in building static websites.

You only need to know the markdown format to create decent web pages without any knowledge of web programming languages like HTML, JavaScript, or CSS.

Azure Static Web Apps: A service provided by Microsoft Azure to host static content like HTML, CSS, JavaScript, and images. It integrates with GitHub and Azure DevOps for CI/CD pipelines.

Do not be afraid of static content.

What you need is to run a single command line in Hugo to build static pages and upload them to the Azure Static App.

Of course, this process can be automated by CI/CD pipelines in Github’s Action with any push events to Github Repo.

2. Prerequisites

  • Basic knowledge of Markdown and Github.
  • A GitHub and Azure Developer account.

3. Create a static Website with Hugo

Install Hugo

If you are on macOS and using Homebrew, you can install Hugo with the following

brew install hugo

First, create your new Hugo website.

// Create hugo example site
hugo new site demo-website// Goto hugo example site
cd demo-website

Setup Theme

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \"ananke\" >> config.toml

Add Some Content

hugo new posts/my-first-post.md

Start the Hugo server

You can test and see your page in the following

hugo server -D// Open your page
http://localhost:1313/4. Customizing Your Site

Tips:

  • hugo server is a command to build websites and generate static content.
  • If you want to test affiliate links or ads locally, you can run
// This command can simulate the production usage
hugo serve -e production

4. Setting Up Azure Static Web Apps

  • Once you have a Hugo website ready, you need to upload your websites to Github.
  • Then Log in to the Azure portal → create a new Static Web App → Connect your GitHub’s repo and branch.

img

  • Then Click review + create

5. Testing and Deployment with CI/CD in GitHub Action

You can edit a page and push this change to Github.

Then Github → Under the Actions tab, you can check whether the Build and Deploy jobs are done or not. If it shows a green icon, it means the deployment job is successful.

img

Then you can go to Azure Static App → Click Visit your site to see the result

img

6. Cost Estimation

When creating Azure Static App, you can choose Free or Standard plan.

  • Free Plan: can offer you 2 custom domains and free of charged in price and bandwidth.
  • Standard Plan: can offer 5 custom domaines and more app size and staging environments, Private endpoints, and Custom auth methods.

img

Let’s dive deeply to check standard plan via Azure Price Calculator

img

Suppose you only need 1 app and bandwidth is around 10 GB, the total cost is only around USD 9. This is very cost effective.

Note:

  • Free plan is suitable for indie developer or hobby project.
  • You can upgrade to standard plan when you want more features and higher security, then you can set up a database in private network to communicate with Static App in private endpoint.
  • Standard plan is more suitable for production environment with higher security and scalability.

7. Additional Tips

Azure Static App provides lots of features for you to save you time.

  • Custom Domains: You can easily add a custom domain in Azure Static Web Apps settings.
  • SSL Certificates: Azure provides free SSL certificates for custom domains.
  • Cost Management: Monitor your usage in the Azure portal to ensure you stay within your budget.
  • Compared to AWS Amplify, Azure Static App is much easier than AWS Amplify because there is no pain or strange error to block you from setting up this website.

Hugo

  • You can easily find or buy a decent template to build your game promotion or personal website.
  • To set other common features like Google Analytics and Comments (https://disqus.com)

You can edit .//config/_default/params.toml to enable them

vim ./<Your Hugo Code>/config/_default/params.toml

# google analytics
googleAnalytics = "<Replace Google Analytics ID>" # example: UA-123-45, for more info, read the article https://support.google.com/analytics/answer/1008080?hl=en

# disqus short name
disqusShortname = "<Replace disqus ID>" # get your shortname form here : https://disqus.com

# Create Robots.txt for SEO
enableRobotsTXT = false

7. Summary

Congratulations!

img

In this post, you have learned how to build a high-performance and secure website with Hugo on Azure Static Web Apps without even administration work.

Moreover, you understand how easy it is to integrate with CI/CD to boost your productivity.

Next time, if you want to build a website, this article will be a good reference for you to get started.

If you found this article beneficial, please show your support by 👏 this article or follow us below to get the latest tutorials in the future.

Thank you for reading!

Visit us at the website: Game Tech Tutorial

Follow us on Twitter, Facebook, Reddit