Trying to decide between a static website vs a dynamic website for your next project? We got you.
In this series, we'll cover what static websites are, how they function, how they differ from dynamic websites, and the respective pros and cons of both.
By the end, you should have a good idea of which approach might be the best fit for your project, as well as how you can get started.
What Is a Static Website?
A static website is a website that serves pages using a fixed number of pre-built files composed of HTML, CSS, and JavaScript.
A static website has no backend server-side processing and no database. Any “dynamic” functionality associated with the static site is performed on the client side, which means the code is executed in visitors’ browsers rather than on the server.
In non-technical terms, this means that your hosting delivers the website files to visitors’ browsers exactly as those files appear on the server.
What’s more, every single visitor gets the same static file delivered to their browsers, which means they’ll largely have the exact same experiences and see the exact same content.
How Do Static Websites Work?
We’ll go over how to make a static website in more depth later on, but the basic approach that most static sites use is as follows:
Choose how to build your site – while you could just manually create your static HTML, CSS, and JavaScript files for very simple websites, many modern static websites will use some type of static site generator tool or headless CMS.
Set up your site – you’ll build your site using your chosen tool. Unlike something like WordPress, you won’t control your site from a live production server.
Deploy your site – this means that you move your site’s static files onto live hosting so that users can access them. You could use application hosting or you could deploy your HTML files directly to a content delivery network (CDN). Because your static site doesn’t require a database or server-side processing, there’s no need to store it on a single web server.
Examples of Static Websites and Tools
When looking at a website, there’s no hard and fast rule to tell whether it’s static or dynamic. Instead, it’s more helpful to look at examples of tools that help you build and manage static websites.
Hugo is a popular example of a static site generator.
Here are some of the most popular static website examples when it comes to software for creating static websites:
All of these tools let you create static websites, but they go about it in very different ways. For example, Publii gives you a code-free desktop interface, while some other tools require you to use the command line.
How To Build a Static Website
If you think the advantages of building a static website might make it a good fit for your next project, here’s a quick guide on how to create a static website.
We’re intentionally keeping this guide high level so that you can adapt it to your own use case.
1. Choose a Static Site Generator or CMS
To start, you’ll want to choose a static site generator or a content management system that allows you to deploy a static site.
If you have the technical knowledge, you can always create a static site from scratch using your own HTML, CSS, and JavaScript, along with your favorite HTML editor software. However, this can quickly become unwieldy as your site grows and you may or may not have the technical knowledge to do everything from scratch.
A static site generator gives you a simpler way to build your static site. It will also make it easier to update your site in the future.
Rather than needing to edit every single HTML file when you make a change (such as adding a new item to your navigation menu), the static site generator can help you deploy new versions of all your site’s files that reflect the changes.
Here are some popular static site generators that you can consider:
Jekyll – one of the most popular open-source static website generators. Can work for a variety of sites and supports blogging. We have a whole post on how to create a static site with Jekyll.
Hugo – another popular open-source generator that can work for all different types of sites. We also have a post on how to create a static site with Hugo.
WordPress + a static site generator plugin – you can use WordPress to build your site but then deploy it as a static HTML site using your preferred static site generator plugin.
For more options, check out our post with the top static site generators.
2. Build Your Website
Once you’ve chosen your preferred tool, you’ll use that tool to build your website.
How that works will depend on which tool you choose, so there’s no single guide that will apply to all static site generators.
If you’re coming from a WordPress background, using WordPress itself as a static site generator offers one of the simplest ways to get your toes wet and create your first static site.
Here’s an example of what it might look like to build a static website with WordPress:
Create a local WordPress site using DevKinsta. This will not be the site that your visitors actually interact with – it’s just where you’ll manage your content and website design.
Set up your site using your favorite design tool. You could use the native WordPress block editor or you could use your favorite page builder plugin such as Elementor or Divi.
Install a static site generator plugin. This is what you’ll use to deploy your static website in the next step. Popular options include Simply Static and WP2Static, though there are also newer alternatives such as Staatic.
The Simply Static plugin lets you use WordPress as a static site generator.
Or another option would be to pair WordPress with Gatsy using GraphQL.
3. Deploy Your Website to Hosting
Once you’ve built your website, you need to “deploy” it to your hosting. Essentially, this means you need a way to get the static HTML files from your static site generator to your live hosting environment.
There are a couple of different routes you can take here.
One approach is to set up some type of automatic/continuous deployment using GitHub. You store your site’s files in a GitHub bucket. Then, whenever you push a new version of your site to GitHub, GitHub notifies your server and your server automatically deploys the new version of your site.
For example, pushing new files to GitHub might automatically trigger a process like this:
When you make a change in GitHub, it automatically notifies your server.
Your web server pulls the latest files from GitHub and runs a Hugo build.
Your server moves the files into the live site environment.
For another Git-based option, some people also like to use GitHub pages for static websites.
As an alternative approach, some people also like to deploy directly to a CDN rather than using any type of web server. This approach might look something like this:
You upload your site’s files to some type of online storage environment. Many tools can do this automatically or via the command line.
You set up a CDN to pull from that storage.
When you publish new files to your storage, the CDN will automatically start pulling in those new files.
If your tool doesn’t offer any special features to simplify deploying your site, you would need to:
Generate your site’s static HTML files.
Manually upload those files to your static website hosting service, such as Kinsta’s Application Hosting service (which offers support for static website hosting).
Should You Use a Static Website As Your Next Project?
Whether or not a static website is a good fit for your next project depends on the purpose of your website and your own knowledge level.
As such, there’s no single one-size-fits-all answer here.
Instead, let’s go through some situations when it might or might not make sense to use a static website.
When a Static Website Might Make Sense
A static website works best for websites where all visitors see the same content and the content doesn’t change very often – especially for smaller websites with not a lot of content.
Here are some types of websites that can work very well with the static approach:
Basic business brochure websites
Resume websites
Simple blogs that don’t publish that often
Documentation content/knowledge bases
These types of websites are able to achieve all of the benefits of the static approach but with very few tradeoffs.
For example, you’re unlikely to need to personalize a basic business brochure website, so you’re not “losing” any functionality by using the static approach.
Similarly, these types of sites don’t change very often, so you won’t need to worry about constantly redeploying your static pages.
When a Dynamic Website Might Make Sense
To start, dynamic websites are generally always the best choice for situations where you need the ability to personalize the site experience, such as ecommerce stores, membership websites, online courses, and so on.
Basically, if you want users to be able to see different content on a page, you’ll typically want to use a dynamic website.
While there are ways to build the aforementioned types of websites using a static website, the tradeoffs that you have to make usually aren’t worth it, which is why a dynamic website might be a better choice.
Dynamic websites can also often make more sense for content-heavy sites, especially sites with lots of taxonomies and other methods of organization
Similarly, if you’re regularly publishing new content all the time, that might be a reason to go with a dynamic website.
For example, a personal blog where you only publish 1 new post every 2 weeks might be fine as a static website, but a monetization-focused blog that’s publishing 5 new posts every day will probably be better as a dynamic website.
💡Get all your applications, databases, and WordPress sites online and under one roof.
Our feature-packed, high-performance cloud platform includes:
Easy setup and management in the MyKinsta dashboard
24/7 expert support
The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
An enterprise-level Cloudflare integration for speed and security
Global audience reach with up to 35 data centers and 260 PoPs worldwide
Get started with a free trial of our Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.
Top comments (0)