When the “World Wide Web” was first revealed to the public in 1991, all websites were collections of static HTML documents — each file containing the markup required to render a complete page in a web browser. Almost immediately, the web’s pioneering developers got to work on ways to generate websites dynamically, assembled by code running on web servers and extracting content from database systems.
Although static websites didn’t wholly disappear while CMSs came to dominate, a modern approach to the static-site concept is now popular among those who prize speed and security.
On Kinsta’s Static Site Hosting platform, websites are indeed fast and secure. They’re also free.
Let’s take a closer look at static sites and how Kinsta can help you deploy yours to edge servers worldwide.
Is a Static Site Right for Your Web Project?
A static site serves pre-built HTML, CSS, JavaScript, and media files.
“The advantage of having static content is that it’s fast and efficient,” says Michael Fuller, a JavaScript developer at Kinsta and a member of the team that helped launch Kinsta’s Static Site Hosting platform. “Rather than a server having to construct the page by talking to the database, it just sends users your pre-made files.”
“Instead of hand-crafting static files entirely, there are a number of static site generators,” he says. “These are kits that help make the creation and update process of a static site easier by turning the files you provide into a working website.”
What kind of projects can be deployed as static sites?
“If you have no pages that require someone to log in, no database or anything else that would require dynamic content, then it’s probably a good candidate to be a static site,” Fuller says. “This can include things such as portfolios, marketing pages, or even a blog if you’re happy writing new posts using a static site generator.”
And when a site doesn’t have a server or database to connect to, it offers fewer pathways for security breaches.
“For more advanced cases, you can have a mixed approach,” Fuller says. “You can create a static site that uses a JavaScript framework to talk to a server managed separately. This way, you get the speed benefits in your initial load times, combined with the flexibility of a dynamic site.”
An Overview of Static Site Hosting at Kinsta
Here’s what you get for free on Kinsta’s Static Site Hosting platform:
- 100 static sites per company
- 1 concurrent build per site
- 1 GB build image size per site
- 600 build minutes per month per company
- 100 GB bandwidth per month per company
And, as with Kinsta’s Application Hosting and Managed WordPress Hosting platforms, there are free SSL certificates, support for custom domain names, and an optional API for site management.
Kinsta builds and pushes static site content to the 260+ data centers in the Cloudflare global network — the same platform that backs the Kinsta CDN and edge caching for WordPress sites.
Deploying a Static Site at Kinsta
The first step in deploying a static site at Kinsta is connecting your preferred Git host to your account in MyKinsta.
“We currently support three of the leading Git providers, BitBucket, GitHub, and GitLab,” Fuller says. “This means that, on top of the benefits of us serving your site, you can use their version tracking and tools.”
After authorizing MyKinsta’s access to your Git provider, you can begin to add your first static site by selecting its repository and branch:
Above, we’ve selected Automatic deployment on commit, which means Kinsta will redeploy the site when changes are pushed to the branch on the Git host.
Next, MyKinsta will attempt to determine the build settings required for your project:
“If we’re able to detect the generator and package manager you’re using, we’ll pre-fill these with the standard conventions used for them,” Fuller says. “For example, the command for Node.js-powered builds is usually yarn build or npm run build, and the publish directory is usually something like build, dist, public or out.”
“You can also specify your own environment variables if your build process makes use of them.”
“For the initial release of Static Site Hosting, we only support Node.js for building sites,” Fuller says, “but we’re working to bring you more platforms in the future.”
However, you can still deploy many static sites that don’t rely on Node.js tools for building. As examples, we’ve described how to deploy a Jekyll site and a Hugo site — neither of which has builds powered by Node.js. In both cases, website assets are built outside of the Kinsta platform and then added to a folder or branch in a Git repository for deployment as a static site.
You can also deploy static assets that have no build step at all, for example, plain HTML sites.
“If you’re not using a generator, no build command needs to be specified and we assume your repository contains pre-made files,” Fuller says.
Once a deployment is triggered, it is added to the site’s build queue.
“When the deployment starts, we create a build instance in Google Cloud Platform and pull the code from your repository,” Fuller says. “If a build command was specified, we use an image based on your specified platform — Node.js for now — to run that command. After this, we check the file size of everything in the publish directory to confirm it’s within our limits.”
“The final step is the upload, where we push your files to a Cloudflare R2 bucket.”
Maximizing Speed With Incremental Deployments
The Static Site Hosting deployment process optimizes build times by uploading to the Cloudflare servers only files that have actually changed.
“We retain previously uploaded files over multiple deployments, so if you choose to redeploy a previous version, the number of files that need to be re-uploaded are few-to-none,” Fuller says. “To do this, we rename the files to the hash value of their contents and keep a record of the original paths. We store these in a map file for that deployment, with the path as the key and the new name as the value.”
“When a request is sent to the site, we use the map of the current deployment to route to the correct version of the file.”
Summary
Kinsta’s Static Site Hosting platform offers lightning-fast content delivery on a world-class network of edge servers backed by the MyKinsta dashboard that makes deployment a snap.
And it’s all free.
Get up and running quickly with Static Site Hosting at Kinsta by checking out our library of quick-start examples covering a number of static site generators. The examples include Git repositories you can copy to start your own projects.
Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.
Leave a Reply