By James Quick
This tutorial is out of date and no longer maintained.
Static sites are the new hotness in Web Development and rightfully so. Every day on podcasts, blog articles, and Tweets I see and hear more and more people converting their sites. Let’s check out five reasons why so many people are moving to static sites!
Static sites are incredibly powerful as well as fast, secure, and extremely easy to work with!
Let’s start by explaining what static sites are. First, the term “static” does not mean that your site has no dynamic capabilities. It simply means that that your site consists of a set of “pre-built” files (namely HTML, JS, and CSS files) that are directly served on request.
Dynamic sites, on the other hand, are being dynamically generated with each incoming request. Scotch.io frontend site is a mix between dynamic and static. The Scotch.io dashboard is a React SPA hosted completely on Netlify.
Because of this, you do not need a server (not one that you manage or write code for) like Node or Apache. All your host provider needs is a way to return your static assets.
The lack of database calls and dynamic content generation makes Static Sites incredibly fast!
Web Developers are constantly trying to improve speed, which in turn, improves user experience. Specifically, they put a lot of focus on Time to First Byte (TTFB), which measures the time it takes from the initial request to the first byte received by the browser.
Related Reading: Keep Server Response Times Low
Since content is pre-generated, the time it takes to dynamically generate content is taken out of the picture! This means no database queries, no HTML templating, etc.
As mentioned, static sites don’t need a server that you have to manage. Since they are just static files, it’s easy for these files to be replicated across the world. This means that someone requesting your site from Japan can be served from a local data center instead of one on the other side of the world. Content Delivery Networks (CDNs) are built to do just this, which makes them a perfect host static sites. They are able to serve your site from as close as possible geographically to the person that requested it.
Hosting for static sites can be set up in minutes!
Simplicity in hosting has a lot in common with the benefit of speed. As we just talked about, all your host provider has to do is serve static assets. The host doesn’t need to support a specific language or framework. In fact, it really doesn’t care anything about the specifics of your application. It just needs to know how to serve files, and serve them fast!
All of the top cloud providers have added specific plans for serving static sites, but a few of the newer hosts have really made a splash. Here are a few excellent hosts for your static sites.
I hear more and more about Zeit and the amazing products they have. One that I’ve really enjoyed so far is Hyper, which is a terminal built in Electron. They also have support for static sites with Zeit Now hosting.
Amazon’s cloud platform, AWS, was probably the first huge public cloud platform, used by individuals and enterprises alike. They have continued to add features to the platform over the years including file hosting with S3 which you can use for static sites.
Along with Amazon, the Google Cloud Platform is one of the biggest and most popular ones out there. They’ve got tons of different services. One of my favorites is Firebase, which is one of the easiest ways to spin up backend services for your app like a DB, authentication, etc.
No more having to update versions of your server… you’re always up to date!
One of the biggest reasons that servers get hacked is being behind on updates and patches. Often, patches for vulnerabilities are available, but people have yet to install them because it’s no easy feat to stay up to date with the constant stream of security fixes.
With static sites, however, because you don’t need to manage a server, you also don’t need to worry about updates, patches, etc. No more updating PHP. No more updating WordPress. No more updating Node. You’re always up to date!
This security concern is especially valid for different CMSes, most notably WordPress. WordPress is incredibly popular (I’ve several WordPress sites myself), which, in turn, makes it heavily targeted. There are many obvious benefits to working with a CMS like WordPress, but having to stay up to date for security purposes is certainly a hassle!
After setting up continuous deployment, just write code and push!
Developer Workflow/Experience is probably underrated when considering new technologies, frameworks, and ideas. With static sites, the experience is one of the most important benefits. After a bit of initial setup, the workflow is seamless. Here’s what the typical flow looks like.
As a developer of static sites, you’ll typically follow these steps in your workflow.
In addition to the general workflow being straightforward, there are lots of Static Site Generators/Frameworks that make it even easier. These generators have tools built into them.
For a list of Static Site Generators, you can check out Static Gen, but, here are a few of the more popular ones in the Web Development community.
With any new technology, framework, etc. there are always downsides, and static sites are no exception. So, as you go forward, keep these things in mind.
The idea of static sites is not new (all sites were static originally), but what they have evolved into is. There are lots of options for static site generators and lots of great hosts out there. At the very least, I would recommend taking a look at one of your sites and see if it makes sense to convert it to a static site. Obviously, there are some benefits to be gained.
I would love to know what your experience is with static sites. What hosts do you use? Which static site generators? Comment below or find me on Twitter at @jamesqquick.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.