Static Site has been prevalent in the last 5 years. Today, I am going to talk about what is a static site, and why make your site static? What static site generators can be used for your work?

Should you move your dynamic website to static now?

What is a static site?

In simple terms, a static site is a simple website made up of only HTML, Javascript, and CSS. It’s just like the same stack used 20 years ago. You’re right. There is no difference at all. You can put a static site in any web server and it can be run with little configurations.

With a static site, you cannot do any server functions at all. This is because you can only javascript. NO PHP, Java, Python, whatever programming language.

Why static site?

Is making a static site an old technology like the website in the 90s? Yes and No. There are many benefits if you’re making a content-heavy website with little server interactions, e.g. blogs, media sites, company & personal websites, etc.

The benefits:

Fast

Since there are no server-side functions, you can put the website to any Content Delivery Network (CDN) and it can run in blazing speed. In traditional server and client-side server architecture, it takes a long time when you make a request to the server and server process the data from the database and give you back what you need.

With a static site, the files are distributed to various datacenters of the CDN. If you’re in Hong Kong, you can retrieve the content from the nearest server in a network like Singapore or Japan.

When you as the visitor request a website, CDN will give you the static file you need. There is no further processing to render the file.

Cheap

As you may know, a development stack like LAMP (Linux, Apache, MySQL, PHP) or MEAN (MongoDB, ExpressJS, AngularJS, and Node) takes up huge memory from the server. When there are more visitors to your website, the cost will grow crazily to scale up your infrastructure.

With static sites, you only put your files on CDN, which is cheap as free for Github Pages, Cloudflare Workers, Netlify, Vercel, etc. If you’re using your own infrastructure, AWS S3 is a good choice. The infrastructure can be greatly slashed by 80 – 90% if you’re having tens of thousands of visitors per day.

At the same time, the system administrators are free from firewall setup, geo-distribution, server & libraries upgrade, server scaling, high-availability setup, security audit, SSL renewal, etc. The server team can focus on other meaningful tasks.

Secure

When the server-side functions are completely removed, the security risk is much lower. Under a static site, there are only files. Hackers can hardly manipulate loopholes existed in your frameworks & programming languages.

Extremely scalable

When your site is distributed on the CDN, the performance can be highly optimized. Even with more than 10,000 concurrent requests, the web page can be returned in a split second. The auto-scaling capability is auto built-in.

What are the catches?

Having said so, there are a few catches. Since the server-side functions are removed, you’ll need to adopt JAM Stack. JAM stack consists of Javascript, API, and Markup language. Want to add a form? use Google Forms embedded in your site. Member login? Try to apply a no-code solution. Shopping cart? Use Snipcart. You can only use frontend functions in static site!

If you are looking to deliver a dynamic experience to each individual visitor, it’s not going to work. With so many benefits, there are new limitations applied.

Whenever you make an edit, you’ll need to deploy your changes to CDN again. The deployment will be worked with git commands. The time cost may be high if you need to make small changes like a typo, team editing very often. As a solution, you’ll need a headless CMS to deploy your changes.

Static Site Generator

Static Site Generator (SSG) is the tool to generate your site into a folder of static files. The files will be exported in a designated hierarchy to be uploaded to CDN later.

Currently, the most popular options are Hugo, Gatsby, Jekyll. Other options can be checked here. These tools are open source toolkit available for free. According to the current trends, Hugo is the fastest generator now. It can export more than 150 pages under 1s. If you’ve got a large site with thousand pages, Hugo probably is the right way to go.

Should I go with static sites?

It always depends. If you’re running a WordPress site with mostly static content, a static site can be the right fit for you. If there are many dynamic parts lying in, cache optimization maybe another better option for you.

Trying to move static? feel free to have a chat with us! Ping us via info@sillycube.com