These amazing tools will allow you to build your own static HTML websites.
Most sites you visit on the web are probably generated dynamically. That is, rather than having all their content encoded into the HTML stored on the server, they retrieve content from a database and construct pages to serve to you on the fly.
Many also provide user interactivity through logins, forms and so on. Think of Facebook for an example of both of these things. To build this type of functionality yourself, you might look to a CMS such as WordPress.
21 best WordPress themes
For some use cases, however, this is overkill. Simple pages, such as a personal profile, information about a business or even a blog, really don’t need this sort of overhead or complexity. You could of course just build static HTML yourself in a text editor. And indeed many years ago this was how all sites were built, but this rapidly becomes cumbersome to maintain when you want to scale up or make changes. gjstatic Static site generators offer a solution to this, by enabling you to build static HTML pages using templates.
Essentially, static site generators are command-line tools that shift the creation of the final HTML page forward from the point the user requests it to the point you write the content. When you make an update, you build the new page, which can then be served as-is to every user who requests it.
RECOMMENDED VIDEOS FOR YOU…
This offers several advantages. Performance will be greatly improved compared to a dynamic site, since serving static HTML and CSS has a very low footprint. Your server-side setup will be much simpler, which also means fewer security worries. Conversely, however, you’ll lose the opportunity to deliver real-time content or receive user input.
Static site generators have exploded in popularity in recent years, so navigating the wide range of choice can be difficult. Here, we’ve taken a look at some of the best options you should be considering.
Jekyll new release page
A first alpha for Jekyll 4.0 has just been released
First released in 2008 by Tom Preston-Werner, the co-founder of GitHub, Jekyll arguably popularised the concept of static sites and remains probably the most widely used static site generator. With Jekyll, you’ll typically work with content in Markdown, a lightweight markup language designed for text formatting.
The Liquid templating engine is used to place this Markdown content into a HTML template, and to combine templates representing various parts of a page (say, header, footer and content) in a modular and re-usable manner.
Support for Sass is built in for those with a preference for CSS preprocessing, and it’ll play fine with libraries like Bootstrap. Also included with Jekyll is an HTTP server which can be used to easily deploy and test your static pages locally.
Jekyll showcase page
Jekyll remains one of the most widely used static site generators
One of Jekyll’s key selling points is its wide range of ‘importers’, which enable an existing site to be migrated to Jekyll with relative ease. If you have a WordPress site, for example, you can switch to using Jekyll using one of the importers. It’s also trivial to convert existing static HTML sites to Jekyll, which can be great if you’ve been coding static HTML yourself or see a template you like the look of.
Notably, Jekyll is used to power GitHub pages, a static site hosting service which is provided with GitHub. If you have a GitHub repository, you’re able to create a GitHub pages site for free using Jekyll. This can be a convenient way to give a polished landing page to your GitHub project.
The big downside of Jekyll – and this applies to most generators – is that it can seem complex at first and is a new technology to master. You might not be up and running as quickly as with a CMS. However, it’s very well documented and the learning curve is quickly overcome.
Be sure to write your content in Markdown for Hexo
The Hexo website includes a range of pre-built themes for you to try out, and one especially popular feature of the tool is its support for single-command deployment.
Gatsby can be picked up quickly by developers
Gatsby uses React, which means that everything is built with components, and allows it to benefit from React’s approach to DOM rendering. This means it can be picked up quickly by developers who have worked with React, but for those unfamiliar with it, learning React will be necessary.