How to build a high-performance and secure website in JAMStack?

Eric Wei
5 Min To Read
08 Sep, 2021
- Aws
- 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 build 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.

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’s 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 web site’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 how to write Markdown. But you still can set up CMS Tools to edit page

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.

I have set up WordPress with high-performance architecture for my personal blogs.

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 ensure security, I must set up the firewall properly, regularly update plugins and themes and run penetration test tools to validate my 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 good solution - JAMStack - and got off from WordPress.

Below will show how to build a 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 notification 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.

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)

Local Editor: 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 to bitbucket/Github.

Cloud Editor: Forestry

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.

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 and 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.

I think JAMStack will become easier and easier in the near future.