Game Tech Tutorial
Published in

Game Tech Tutorial

How to build high performance and secure website with JAMStack and AWS Amplify? (WordPress VS JAMStack)

Building a website to promote games, products, or personal blogs is a very common strategy.

But how to create a website with high performance and security?

Should I choose WordPress or JAMStack to create it?

In this tutorial, we will explore the differences between WordPress and JAMStack. You will know how to choose them for your needs.

Also, we will give you a practical example to build a personal blog or website in high performance and security using JAMStack(Hugo) on AWS Amplify.

Let’s get started.

WordPress VS JSMStack

WordPress

WordPress is a popular open-source tool to build websites based on LAMP (Linux + Apache + MYSQL + PHP).

We need to set up WordPress on LAMP. WordPress provides lots of easy-to-use themes and plugins to create a website in admin UI.

Pros:

  • Accounts for over 30% of the websites on the internet.
  • Admin UI is user-friendly, easy to edit pages.

Cons:

  • Need to spend time and effort to maintain database and smoothly scale-out websites.
  • Must set up a security firewall and check firewall settings frequently to avoid hacker attacks like Brute-Force Attack, Cross-Site Scripting, SQL Injection, OWAP TOP10 Attack.
  • Must regularly update plugins and themes to avoid being attacked by Malware or XML-RPC attacks.
  • Not SEO friendly, need plugins to set it up.

JAMStack

This is a new technology to build a website in static content based on JAMStack (JavaScript + API + Markdown ).

The concept is to edit a page in Markdown via an editor like vi. Then you can build the website in static contents with HTML, Javascript, and CSS, and deploy them to CDN from the Markdown file.

API defines the interface between JavaScript in CDN and headless CMS. It bridges the gap between static websites and headless CMS. In other words, you can take the advantage of static content on CDN while still using utilizing the strengths of APIs to make a JAMstack app dynamically.

Pros:

  • No database and plugins with higher security
  • Pr-build the website's contents to static files and deploy to CDN with high performance
  • No need to worry about updating plugins and themes.
  • Friendly SEO, no need for the plugin to set up SEO.

Cons:

  • Without fancy Admin UI to edit pages. Unless you use 3rd Party tools.
  • Hard to manage a lot of pages due to no databases. But you can set up Headless CMS
  • Need to learn JAMStack and get used to writing Markdown. But you still can set up CMS Tools to edit page

Note:

If you have some engineers to regularly maintain websites, it’s recommended to use WordPress. Because it’s not hard to smoothly scale out server capabilities and ensure security as traffic grows.

While if you just wanted to build a personal blog and save costs without worrying about performance, scalability and security, JAMStack is a better option.

Experience:

I have set up WordPress with high availability for my personal blogs on AWS Lightsail.

However, I found WordPress has too many vulnerability problems in plugins and themes. Once my website is open, I will be easily attacked by an XML-RPC attack.

To avoid XML-RPC attacks on WordPress and ensure security, I must set up the firewall properly, regularly update plugins and themes and run penetration test tools to validate the blog’s security.

This is wasting time and not cost-effective when compared to hosting a static website on CDN like CloudFront on AWS.

Later, I found a superior alternative — JAMStack — and got off from WordPress.

Most importantly, I can save the server costs on AWS from $32(Lighsail architecture) to $2 (AWS Amplify) while having just a small amount of user traffic.

Below will show how to build this economical website with JAMStack(Hugo), AWS Amplify, and CMS Tools(forestry).

Create 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/

Set up Static Website with AWS Amplify

  • Import your folder into bitbucket/Github.
  • Link your project to bitbucket/Github on AWS Amplify.
  • Create a webhook on AWS Amplify to receive Git push notifications from bitbucket/Github.

Then when you make any push to update codes, bitbucket/Github will notify AWS Amplify to run automatic deployment to CloudFront on AWS.

Note:

AWS Amplify can help you run CI/CD for deploying your web project to CloudFront. No need to maintain, set up CloudFront, S3, Web Server, SSL Certificates by yourself.

Edit Webpage with Editor(Forestry/Typora)

If you don’t like writing markdown in a text editor, you can download Typora to edit the page on the local and push it to bitbucket/Github.

Forestry can help you edit your page on the cloud. Once you make any change on the page, it will update the CDN as well.

CI/CD:

You need to setup Forestry to access github as well. When you make some changes on your codes, Forestry will push to github. Then github will notify AWS Amplify by webhook to build and deploy your projects to CloudFront on AWS.

Conclusion

In this tutorial, you learned the tradeoffs between WordPress and JAMStack. Also, you know how to build a low-cost website in Hugo, JAMStack, and AWS Amplify for high performance and security.

WordPress is easy-to-use and suitable for someone who has no knowledge of Github and Markdown while it’s required professionals to regularly check vulnerabilities, update themes and plugins, and scale-out capabilities in your database and website.

JAMStack, on the other hand, can achieve high performance, security, and SEO friendly because it only has static files on CDN without databases or any plugins. However, it’s still required some knowledge in Github and Markdown.

Of course, you can use some 3rd Party service to manage your website for WordPress or JAMStack.

Thanks for reading.

You might be interested in

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eric Wei

Eric Wei

Senior Full Stack Engineer & Solution architecture | AWS, GCP, Azure | Cloud, Unity Game Development, SDK, DevOps, and more.