Need a portfolio site to showcase your work? Perhaps you want to build a blog from scratch?
Whatever your need, this guide will help you understand if a static website is the right choice for you. We will cover the steps you can take to get your product online for a small cost of a domain registration.
What is a static website?
A static website is a site that is served as statically rendered HTML, instead of dynamically generated by a web server, or constructed by JavaScript in the browser.
Static websites can use JavaScript, but it is generally just used for enhancements and on page interaction not for constructing the entire page.
Why build a static website?
Static sites are known to be lightning fast, which makes them perfect for small businesses, blogs, and more. They work particularly well for pages that have similar structures. Need a more concrete example, the page you’re reading right now is a static website!
Due to their impressive page load times, static sites are a great choice if SEO is important to your project. Not only does a fast-loading page create a better user experience, it’s also been a direct ranking factor for Google Search since 2018 which is likely continue in the future.
It used to be the case that static sites were just for static content, with interactive elements like forms being difficult to handle without significant extra work. But in recent years, advances in cloud computing means you can now do most things with a static site that you can do with a full stack web app.
Different ways to build a static site
There are a couple of general approaches you can take when building a static website. The right one for you will depend on your technical knowledge and experience, and on the type of site you want to build.
Getting started 👨💻
You can either start with a pre-designed template, a bare-bones framework (which you can modify with CSS to add your own styles), or a completely blank HTML page.
If you prefer to start with a pre-made design, there are thousands of templates online, both free and paid. Some popular options are:
- ThemeForest: Discover thousands of themes and templates made by world-class developers.
- Jamstack Themes: A collection of responsive site templates, free and paid.
Use a static site generator
Static site generators are a more advanced option. Unlike writing HTML pages directly, with this option you have data and content (such as Markdown files), and then separate page templates. This is all combined to generate a static HTML website, with the help of a build process. Different SSGs use different programming languages to handle this process, and configure exactly how it works.
A static site generator is somewhere between a hand-coded static site, and a full CMS (like WordPress).
This approach is:
Faster and more lightweight than a CMS (the resulting site is still just static HTML pages) Great for content management—you generally keep content separate from any layout code, so you don’t have to deal with all your text being embedded in HTML, which can be difficult to maintain large sites.
Popular static site generators
- Gatsby
- Hugo
- Next.js
There are hundreds more, some of which may be a better fit for more specific use cases. Jamstack.org has an excellent comparison page of all the top open source SSGs.
Getting your website online
Once you have your site written or generated, you’re ready to put it on the internet.
Buy a domain
The first thing you’ll need is a domain. I like VentraIP because their prices are good, their UI is easy to use, and they have good support if needed.
Deploy your site
The good news is there are a lot of cheap or free hosting options for static websites:
- GitHub Pages: If you use GitHub, this is one of the easiest ways to get a basic static site online.
- Netlify: A much more powerful option: you can also deploy on every code push, but there’s a lot more tooling available if you need it.
- Gatsby Cloud: Similar to Netlify in features, you can also get started with little configuration.
- Amazon S3: Not the most beginner-friendly option, but could be a good choice if you want to integrate with any of the other AWS offerings.
Warp up
I learn best by jumping into a project, and would recommend starting a project with research/spending time to pick the best options for your project. This will save time and money, if you get lost along the way Google and forums will become your best friend. Good luck and keep at it! 🫡