What is a static website?
Not the type of static I’m talking about
This is the beginning of a series of posts on posting a website using a React framework called Gatsby. This series of posts is scoped so that someone with limited experience can put a simple website and host it on Azure. We’re going to be focused on rebuilding and customizing the same blog that I’m currently running on this website.
Static websites are great because they remind me of simpler times when websites didn’t have a ton of server calls. You basically have:
- HTML: To markup your content
- CSS: To style your pages
- JavaScript: For dynamic content
- And that’s it.
Now wait a second: Didn’t I just say that these were static websites? What is this dynamic content stuff? In my opinion, static website is a bit of a misnomer.
I really think of static websites as websites without a ton of backend server calls or a database. When I wrote my first website by hand when I was a teenager, it was just some HTML, CSS, and (maybe) JavaScript and some rel: links. Static websites are basically that.
For a live example - the website you’re on right now is a static website.
Why would I want a static website?
Speed - Without a ton of backend overhead, your browser can spend more time rendering content and less time waiting for backend responses.
Cost - Depending on your hosting provider and how popular your website is, you could save a ton of money with the lack of the costs of backend.
Flexibility - Static websites don’t have to be basic. You can set up and run stores, blogs, and many other types of interactive websites with a static web app.
Easy to Setup - If you’re thinking hand coding HTML, CSS, and JavaScript is a massive hassle, you’re absolutely correct. When I said static sites reminded me of simpler times, I didn’t mean I loved handcoding HTML. There are static site generators out there that you can use to handle most of that magic for you - and you can just focus on creating your content in markdown files.
Security - Because of the simplicity of a static website (for example, no database) - your website will be more secure by default.
Things you’ll need
- Static Site Generator: Prevents you from having to hand code your HTML, CSS, & JavaScript (in many cases). Though there are quite a few out there to choose from, this tutorial will use Gatsby
- Text Editor: Any will do. I’m using Visual Studio Code in my examples.
- Hosting Provider: I find cloud hosting providers to be the cheapest. I’m using Microsoft Azure and GitHub here.
- Costs: If you have an MSDN Subscription, running a basic website will certainly be free with your recurring credits. (Visual Studio Dev Essentials also gives you a starting amount of credits that should last you a really long time.)
In my next post, we’ll start setting up!