If you’re not a technical person, the concept static website might sound extremely daunting to you. You might think that to build a static site you need to be an expert in the holy web trinity HTML, CSS & JavaScript.
What if I told you that building a static site is no easier or harder than building a WordPress website? What if I told you there’ll be virtually zero maintenance on your site once it’s been built? What if I topped it off with free hosting on top? Intrigued? I thought so.
In our article covering dynamic vs static websites we talked about the advantages and disadvantages of static websites and also cleared up one common misconception. If you’re not aware of the main differences between both we recommend you check it out first before reading this article any further.
If you’re already aware of both types, let’s explain to you how someone with limited technical knowledge can set up their own static website. As we often say, we are not a technical website, we won’t go full into the technical details, we merely want to make you aware of the topic and help you get started.
Jamstack
Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.
Source: jamstack.org
Translated to plain English, Jamstack is on approach that separates the actual (static) site (as in page or blog text) from dynamic functionality (as in forms, login).
By separating functionality it allows for bloggers to focus on creating content while using external services for dynamic functionality like forms.
Using a Jamstack approach also rids you of the need to maintain, update, scale and optimize speed on your website, this is now outsourced to thrid parties specialized in this.
The idea behind it is since you’re a writer, not a system administrator, why would you waste time and money on things like maintenance, updates, scaling and optimizing? You’ll never be as good at it as a full-time system administrator. Why not put 100% of your energy in creating content and letters worry about infrastructure?
Static Site Generators
While you could perfectly build your own website from scratch using just HTML, CSS & JavaScript should you want to, it would either look very basic or take ages to build completely.
This is were static site generators (or SSGs) come in. Just like how WordPress provides you a framework to build upon so you can get a dynamic website quickly, SSGs will do the same for static websites.
Just like your favorite CMS, a SSG allows for you to use existing themes or plugins as your building blocks to get a working website in a couple hours.
The main difference is that, where a dynamic site will generate pages dynamically (hence, the name dynamic site) based on stored data, the SSG will generate a static website (hence, the name static site generator) to be uploaded to any online host or cloud.
The upload process can be done manually using protocols like FTP (file transfer protocol) or SCP (secure copy) or can be completely automated using a GIT repo, for example (more on this later).
While we don’t want to get too technical, some of the best known SSGs are Next.js, Hugo, Gatsby & Jekyll. Check out any of theire websites for a basic introduction.
We recommend using one of the big names because they have plenty of contributors, documentation and are in general more stable. You want to be the process to be as hassle-free as possible so you can focus on writing great content and not on debugging your software tools.
GIT Repo
Your data needs to live somewhere, for a dynamic site your source end destination are the same, since all changes are made directly on your website and from there they are published when ready.
For static sites, the process is different. While you can save all source files on your local computer (don’t forget backups!) and upload manually, a preferred way is to locate your files in what’s called a repo (short from repository).
The best way to look at a repo is as an online storage folder specifically designed to handle computer source code. This could be code for a software application or a video game but it can just as easily be used to host the source files for your website.
This has many advantages, like making it easy to use by multiple persons at the same time and you also no longer have to worry about backups but the biggest advantage is that it makes it easy to automate your whole process. You can now make a change on your local computer (like adding a new article), push said change to the repo and have your host check automatically for new changes (or commits) in the repo and when it finds one, automatically build a new version of the website and publish it immediately. All automated!
Some of the better known GIT hosts are GitHub (owned by Microsoft), Bitbucket (by Atlassian) or Gitlab.
Cloud Hosts
This brings is to the last part of the static website machine, the cloud (web-)host.
As we talked about in the previous part, when we use a repo, we want to give access to a cloud host to check for changes and build and publish them automatically.
While there are many hosts available to publish static files on (basically every file storage service), only a few of them support this option. Our favorite one of these is Netlify. If your website is not commercial than a great alternative could be GitHub Pages, which was created by GitHub and, as you might expect, integrates perfectly with GitHub.
Netlify offers free hosting for static websites with up to 100GB monthly bandwith (more than enough to get started).
You can also easily link your domain name to any website hosted on Netlify or just purchase a domain name directly from them.
Your cloud host is the final piece of the puzzle to set up your static site. Now you’ve completely built your machine, no more maintenance, no hackers, just focus on writing great content.
Adding Forms
Since static sites can only serve static files, they’re not able to handle dynamic features like forms on their own. The solution for this (following Jamstack logic) is to handle them externally.
A great external form service we like is Jotform, although Google Forms will also do just great. The best part of using an external service is that you no longer have to worry about spam (and that means both spammers spamming you and your e-mails sent from your host ending up in other people’s spam folder).
Summary
Your static site can work just as easily as a dynamic website once it’s been set up. It’s even more hassle free because you no longer need to worry about updates.
To have it working the best for you: get a great static site generator to create your website, keep your site in an online repo and have a cloud host build and publish your static site every change you make. Happy writing!
Setting it all up still too daunting for you? We’re looking to help more non technical people interested in static sites to set up their blog or content site. Contact us to work together.
