A static website shows the same content to everyone and does not grab information directly from a database.
The technology world is full of jargon and acronyms and funny words. In this Tech Speak series, we try to explain these in simple terms as well as provide additional information if you want to go deeper.
Term: Static Website
AKA: Static Site
Oneliner: A static website shows the same content to everyone and does not grab information directly from a database.
Short description: Website owners want their websites fast. One method to having a faster website is to make it “static”. A static website shows the same content to everyone so it’s not personalized to each user. Static sites also don’t grab content or data directly from a database when it’s displayed in a web browser. When a static website is created, it may use a database or content management system (CMS) when building the web pages.
Example use case: I have a small business selling custom-made surfboards and wanted a simple website to show off my products and show local surfers using them. I don’t need people to login and don’t want to sell the surfboards online because each one is custom-made and I want to work directly with the customer. Because the website will be the same for all visitors and I don’t need any fancy features, I decided to create a static website. My new website is fast and I don’t worry about it being hacked because there is no sensitive information to store.
Example static hosting providers: Quant, Amazon S3, GitHub Pages, GitLab Pages, Netlify, Vercel
Example static site generators: Eleventy, Jekyll, Gatsby, Hexo, Hugo, Pelican
Keep in mind: Not all websites are static. They may be completely static, totally dynamic and use a content management system (CMS), or be a hybrid of static and dynamic pages.
Static websites have many advantages over “dynamic” websites that pull information directly from a database. If you don’t need to provide your users with personalized content or a logged-in experience, a static site might be better for your needs. Some pros of static websites include:
Lower Cost: Typically, the cost of hosting a static site is cheaper than if you are using a content management system (CMS) like Drupal or WordPress. This is because the hosting provider is just storing the static files and not having to support a database or handle running software applications.
Better Performance: Static websites are often faster than non-static ones because they don’t have to query a database on a web server for content. The web pages have been pre-built and are ready for your browser.
Enhanced Security: Because a static website is not directly tied to a database or content management system, it can’t be hacked like sites that have these. There is no logged-in area for people or bots to try to exploit.
Higher Reliability: A static website can be more reliable than a non-static site since there are “less moving parts”. It just has static files that can be served to your web browser as is.
More Scalable: Static sites normally perform better under “load” than a regular website since it’s not handling database queries and not processing backend code. If the site “goes viral” and gets a lot of traffic in a short period of time, this is often not a problem for static sites but might cause a regular website to crash.
Easier Maintenance: Depending on the way you are creating your static website, it may be easier to create content and easier to maintain the site compared to a dynamic website. This is very technology-dependent though. There are many static site generators that can be used.
We won’t go into the deep technical inner workings of static website technology but we will explain some of the important aspects. Generally speaking, a static website is comprised of “static digital assets” (usually HTML files, JavaScript files, CSS files, and image files) that have all the information needed for the website to be displayed.
For the assets required for a static website, you’ll need some method or tool for generating them. In principle, you could handcraft each HTML, JavaScript, and CSS file you needed for the site and then copy these to your hosting provider. But this isn’t practical for most people and, even developers who can do this, usually prefer using a tool instead.
There are different frameworks and tools you can use to build your static website. For example, you could use a “static site generator” to create your static files. There are many of these available such as those listed above like Jekyll and Hugo. Check out the long list of static site generators on the Jamstack site.
Some people actually prefer to use a content management system (CMS) like WordPress or Drupal and then generate a static version of their website from this. This is certainly more work to set up but provides the advantages of using functionality that these CMSs can provide like editorial workflows. This has the added benefit of allowing a hybrid site where part of the website is static and other parts of the website are dynamic. This can be useful when you have many pages that are simple and don’t need to be dynamic but still have interactive features like e-commerce or logged-in functionality.
No matter how you create your static website assets, once they are built, you sync them to your static website hosting provider. This is where they are “served” from. Though you can also additionally use a Content Delivery Network so the assets are duplicated across the world for faster results. When a user visits your website, the HTML web page is pulled from the hosting provider’s storage along with any supporting assets such as images, JavaScript, and CSS files. Then, your web browser will show you the static web page.
Finding a static hosting provider that is right for your website and organization depends on various factors such as desired features, the amount of website traffic, and your budget. Here are some steps you can follow to find static hosting for your website:
Understand your requirements: How much traffic do you get monthly and yearly? Do you get traffic spikes? How much storage do you need? Do you want additional features like a Content Delivery Network (CDN) to distribute your content around the world? How are you creating your static content? How much can you afford? These are some of the questions that you need to answer.
Research static hosting providers: Some options are listed above but there are others. Look at pricing, features, and customization. Create a short list of ones that you may want to test out.
Compare apples to apples: It can be tricky sometimes to understand the pricing of hosting and what features you are getting for different price points. Do you get customer support? If you are on a free or very cheap plan, then maybe not. Usage-based pricing can be even trickier so make sure you understand your traffic patterns and spikes as well as your data footprint for these calculations. Make sure to compare prices for add-on features that you want to use. Go through your short list and compare them.
Try them out or get demos: Some static hosting providers have a free plan or a free trial. If you are super adventurous, you can try it out on your real website but we’d strongly recommend testing on a test site first if possible. If necessary, use the company’s customer support if you get stuck. Hopefully, it’s easy to add your static files to the hosting platform. If there isn’t a free trial, you might be able to request a free demo from the sales team.
Narrow down to one option: Once you are past your trial period or you’ve gone through all the demos, pick whichever one you think is best based on your needs and usage. Monitor your experience and the experience of your users over the next few months and see if you want to commit or switch. You can use Google Analytics and similar analysis tools to check performance and traffic patterns.
Learn more about static websites and related concepts by checking out these resources:
Quant is a global static edge; a CDN & WAF combined with static web hosting. We provide solutions to help make WordPress and Drupal sites static, as well as support for all popular static site generators.
An introduction to the Quant CLI tool to show how deployments can be introduced into current CI/CD pipelines to achieve automated Quant deployments. First in a series that will explore integrations and examples with popular CI cloud providers.
Legacy sites can be a major burden to maintain. Use Quant to take a static snapshot of your old website to start saving money, stop maintaining your old servers and software, and remove your risk of security vulnerabilities. Archive your legacy content easily.
For better security, performance, and hosting costs, learn how to create a static version of your Drupal 8 or Drupal 9 site using the QuantCDN module in this step-by-step guide.
Complete trial with CDN, WAF, Crawler, static integration and support.
Cancel anytime.