Static site generators have quickly grown to become the preferred way to create documentation and simple websites.
Unlike dynamic websites, static sites do not require any server-side programming and come with minimal server-side maintenance. Also, static site hosting services such as GitHub pages [↗] and Netlify [↗] make it easy to host and manage them.
This is because static sites are mainly made up of HTML, CSS, and rarely Javascript.
Static Site Generators (SSG)
The browser is only able to parse HTML, CSS, and Javascript. Even with dynamic websites, the backend code acts as a templating tool (somewhat like a mixer) that puts content into an HTML structure and then sends it over to the browser to be rendered.
With a static site generator, this process is done once during a build process and the HTML and CSS assets are stored which are then sent to the browser whenever a request is made.
Hugo [↗], Jeklly [↗] and Next.JS [↗] are examples of static site generators. You usually end up picking one based on your programming language preference or ease of use.
One of the challenges with picking any static site generator is that you have to structure your content and HTML template to suit the format of the tool. Not to mention the fact that there is a learning curve for each one. Some static site generators come with very limited features as well.
One of the beauties of a dynamic website is you have the option to create a web-based editor or admin section where a non-technical editor can write their content. Most static site generators however require some level of technical know-how to work with them.
Creating your own static site generator
We already established that dynamic sites, in the end, generate static assets to be sent to the browser, what if we can crawl our dynamic website once and then save all the assets to later be served to the browser?
This is not even a new concept, CDNs use this technique to cache dynamic websites and there are many tools out there to convert a dynamic website to a static one.
So what if you just create a dynamic website with a nice admin editor area where anyone can edit and then run a tool like wget to download the static assets to be hosted on a server?
You get the benefit of working in whatever framework and programming language you love or choose. You can create whatever feature you desire and even better, should you need to revert to running a dynamic version of your website may be because you now need a contact form in there or a comment section well you already have it. If you had started with a statically generated website and ended up needing some dynamic element you either have to rely on APIs or rebuild your site into a dynamic one.
This truly frees you from having to decide as to which static site generator to use and being locked in for better or for worse. It also eliminates the need to introduce a new tool to your workflow.
My site https://eddymens.com [↗] is currently built using this approach. It's a Laravel app that I have on my local machine with a beautiful admin area and all. When am done with a post I just run the command below then upload the generated HTML files onto Netlify and am done!
$ wget -mpEk -nH -P eddymens-static http://localhost:8000 -e use_proxy=yes -e http_proxy=http://localhost:8000Here is a link to explainshell [↗] detailing what each option flag does.
You might still need static site generators but at least now you know you have a second option 😊.
Here is another article you might like 😊 How to find broken external links on your website