What's All This Fuss About Static Site Generators?
As a web developer, it has been impossible not to notice all of the excitement on the internet around static site generators and JAMStack. Static Site Generators are used to create static sites, usually by leveraging a templating engine, which allows the developer to create site content quickly in formats like markdown. Some of the benefits of these types of websites in production are that they're incredibly fast, and can be served by CDN's instead of traditional servers, which means little to no hosting costs.
So to sum up, we can update the content faster; the site itself performs faster, and the costs are lower.
But Clients Want Wordpress! Right?
As a freelance web developer, most of my work revolves around WordPress websites. I'm not much of a fan of WordPress, but almost all small business clients I meet, want or have a WordPress website. When I ask them why they chose WordPress, the answers usually boil down to "I want to be able to update the website myself." Well, the reality is that out of the 40 clients I've worked with during the last couple of years, not a single one does their own updates.
Wordpress is slooooowww. Wordpress is bulky. I want out!
And then I read this post.
Article No Longer Available
OMG, he's right. Clients hardly care about how I make the website, they just come to me yelling "WORDPRESS" because they don't know of anything else. It's just a buzz word to them. Plus, he managed to drop Wordpress for static site generators on these simple sites. AMAZING!
The Idea
What if I started making the sites with a static site generator? The updates would be faster. I wouldn't have to mess around with servers and hosting anymore. The site is static, so no more Wordpress updates, plugin updates, etc. I could keep things simple ... wait... NO MORE WORDPRESS PUGINS AND PHP?!?!? Sign me up.
The Plan
So the concept is there - I should be able to create simple business and professional "brochure" sites with a static site generator. So no e-commerce or anything that needs dynamic logic, but more the simple "hey, this is what we do, please contact us" kind of websites.
There are still a few problems to sort out.
I don't know how to use a static site generator. I don't even know which one I want to use.
I still have to convince my clients to let go of Wordpress.
I need to show some portfolio projects built with static site generators.
I plan to crush all of these problems at once. I can learn how to use static site generators, and I can create portfolio projects simultaneously. I'll try out several different static site generators, and the sites I build I can use as part of my portfolio to show clients that A) I can do nice work, & B) Performance difference between a Wordpress site and Static Site. I think once I breakdown the cost difference just in maintenance (hosting, updating, de-bugging Wordpress vs Static Site) -- convincing my small business clients may not be too difficult.
So What's Next?
Well, I'll be doing a bit of research and choose 3-5 different options for static site generators to try out. Once I've built a website with each of them - I'll do a head to head comparison and I'll make a choice to stick with for client work.
I'd love some recommendations on where to start and which to try, please leave your suggestions for best static site generators below! I will be writing about my experience with each one and posting it here on Dev.to as part of a series.
Top comments (47)
I am all for trying new things but your premise that you are doing it because WordPress is slow is wrong. WordPress, just like any other framework or platform can be slow and problematic if not setup correctly. That's all.
Fair enough. Just looking for a better solution for simple sites, and I personally haven't had any good experiences with WordPress. I assume others may feel the same way. :)
I can relate, it took me a while to understand enough about WordPress in order to make it work the way I wanted. And I cannot argue with you about looking for better solutions for simple sites, WP is definitely not what you want to use for a simple site or better said, a site without the need of a CMS. Cheers.
The 2 that I have used so far are Jekyll and Gatsby. Jekyll is great to set up a blog and handle all of the content that would need to be uploaded for a blog. Gatsby was very customizable and everything runs in React, which I am familiar with. When I created my portfolio site for myself I used Gatsby. It was great to get up and running and easy to deploy with Netlify.
For my next move I am going to try to create some Nuxt sites (once I am done with the current hackathon). I chose to learn Vue during my time in the hackathon and want to expand on that with Nuxt.
Thanks Jacob!
Gatsby is definitely pretty popular. It's on the list! Jekyll as well. Nuxt seems to be quite popular as well! I remember your hackathon post, I hope that project is going well for you!
If your learning Vue and like it, have you considered Gridsome? I haven't heard much about it yet but I like that's it's based in Vue.
Gridsome (and Gatsby) is only alive because of plugins, IMO. Otherwise, writing codes for scratch is hard. And the availability of plugins depends on its popularity. That's why Gatsby is much better than Gridsome. Also, the documentation.
I myself currently try to learn Next.js, though. which encourages barebone-ness; unlike Nuxt where there are a lot of boilerplate to edit.
I'm going to read up on Gridsome now. This is the first I've been hearing about it, but it would be interesting to learn something new to compliment Vue. I've been really enjoying learning Vue so I hope to expand my knowledge of it overall.
I'm with Jekyll on my first static site playground, because it's easily deployed on GitHub Pages. But the build and deploy time is going slower when articles going huge.
When my articles almost thousands, I moved my site to the current fastest static site generator, Hugo. It won't be wrong when choose Hugo for huge articles. Also, I try Eleventy for my new learn and backup too.
Next, Nuxt, Gatsby, Gridsome, etc, they are great because it's instant reload feature that feels like modern apps. But if the main focus is about creating so many content continually, just choose the fastest static site generator.
Thanks for the info! That's a great point to keep in mind. I've been playing with Hugo a bit, so far it's pretty nice!
I've used Nuxt.js for a few projects and it's been a breeze. The docs are well-written too, and it comes with some pretty cool features like nuxt generate. If I am asked to make a static website, I will probably continue making it in Nuxt. You can also use Netlify or Vercel to instantly deploy websites via a git push for free.
I've also heard good things about Metalsmith and Hugo but I haven't personally used these yet.
I also use Jekyll to maintain a community blog, but I find it a little outdated now (it uses the Liquid templating language, and handlebars are a far better solution).
Nuxt generate is currently problematic -- Full static generated mode
But for my current website, I am being lazy, using SSR instead of generated. That's why it is bad for SEO.
Thank you for the link to the Github issue. I have only used Nuxt to create offline web-apps or fully static websites (no API linking whatsoever), so I guess I am in the clear for now. But I will definitely hold off on using it for projects that might integrate with a Headless CMS.
Thanks for the suggestion! I'll add Nuxt.js to the list, and take a look at the others.
I use Hugo, it's great and fast and all is in markdown. Put HAproxy in front of it to handle TLS and you're good to go! Everything in docker too ;)
Do you use hugo to serve pages? (just running hugo in docker?)
Im using hugo to build page with Gitlab-Ci and then its hosted with gitlab pages / nginx or pushed to custom hosing if clients have one.
Yes hugo server is serving the pages and HAproxy is taking care of terminating TLS.
I've been playing with Hugo a bit! I like it so far. :) Thanks for the recommendation.
I agree that Wordpress Sucks nowadays. But i dont think static site generators can replace it yet. Wordpress sold and idea of freedom to customers. Even if its true or not, in a practical manner, they wont expect nothing less. With this in mind its just too hard to explain a static site generator for customers. What we can say when they ask "cool, so where is my dashboard?".
Your right if the clients are actually logging into the dashboard. Mine say they will but never do. I think it won't be hard to convince them to make the switch, and sell them on a low maintenance retainer for updates instead of server hosting.
yeah, you are totally right. customers are attached to that "sensation of freedom" (created by wordpress) which its also a trap. They wont/cannot/dont want to use it, even when this freedom actually exists (mostly i see devs tuning wordpress sites as manainers of a frankenstein). Its a freedom that customers dont use, but also dont want to let it go. Its paradoxical man S:
Thanks! You hit the nail on the head. Thats my biggest pet peeve, WordPress Frankensteins.
In an ideal world, customers would let me build them a static site for the info/ brochure need, and code a purpose built application for their business logic / e-commerce needs. This whole idea of franken-plugin WordPress to do everything is just a nightmare.
Client should login to their dashboard mostly for update article purpose, not for updating core, themes, plugins, etc. Also, this is the big advantages about static site generator, because we don't have to worry about being hacked when we forget to click update. Fortunately, there are so many CMS such Forestry, Prismic, Contentful, etc. Just connect the static site to those CMS for client dashboard, and it's more than enough.
Great point! Thanks! :)
You dont need to remove Wordpress, Use Wordpress as a source for a CMS. Alot of dev use thins kind of setup. the customer gets Wordpress which is an really good admin for customers and the users get a fast static site :D Soon will there be a Gatsby plugin which handle everything from preview to images which will be dope :D
Being a blog writer myself, I'd say a CMS is eventually needed, whether headful or headless. Also, SEO is hard. WordPress can fix it with certain plugins (like Yoast and WP Compress) (sry, not that good as it should be. WP is by default bad for SEO.)
I don't think fast build is that important. Also for developer's convenience, I would also look for SSG incremental build, which is a relatively new feature even in Gatsby. I wouldn't want to see slow build times. Still, SSG (with some SSR features) is definitely the future.
Actually, for what I have heard,
Thanks for the notes! These are my own personal, very biased thoughts on it.
For my own situation, my clients do not update the site or post new content frequently. I'd rather just turn the content to markdown and leverage continuous integration on Github to update the sites then manage a CMS for each client.
You're totally right SEO is hard, but for the type of client I have, just adding the metadata to the site and posts in the HTML template and markdown will be simpler, and be enough SEO for them. They're focused on ranking locally, which is easy in my area since no one does SEO well. Off-site optimization is typically where the impact is made for these clients.
I'm new to SSG, so when I read "fast build" I'm not 100% sure what you're referring to the compile-time to generate the static files or the development time to launch the site?
The build I care about is how long it will take me to build the site and launch it for a client. The fewer hours it takes me on a project, the more money I make (I work with fixed rates).
If you mean the time it takes to package the site, I'll stick my neck out and say it's pretty irrelevant to most freelance web developers who work with these types of small clients and brochure style websites. I may be just ignorant of the importance mind you -- happy to be educated on it! :)
In my heart of hearts, I want to kill Wordpress and bury it where none of my clients can find it again. But in this situation, using it as it was meant to be used - a blog CMS - you're right, we can use it and run it headless. I won't, since for me it's left a sour taste in my mouth, but it would be a fine solution for anyone who likes it.
CI hooks and flat file CMS (i.e. no database) is definitely a way, as long as you don't need "relational" database.
Markdown? Actually it is even possible to use an editor that outputs HTML and CSS (like QuillJS). Otherwise, I myself don't use a real Markdown. I use Markdown extended with template engines like LiquidJS -- taking dev.to editor as any inspiration.
One of the best Markdown based editor I know is actually Discourse. It's Markdown mixed with custom codes, somewhat like BB lang.
Some of the reason you might need a backend or database, includes search engine. You can use JS-search, but where would you hold the index for searching?
Agree about default WordPress is bad for SEO. Even their default permalink is ugly one, not readable as title post slug. That's why we have to configure it manually or with plugins help to make it easier.
I'm active on WordPress for long. Though I'm with static site generator for now, but I will not forget WordPress as a hero. Even I'm still active as a moderator at WordPress Indonesia. Enjoy with worldwide community on WordCamp. And more.
Sounds awesome! I think WordPress has been a gateway for developers. You can start making sites with no coding knowledge, then you get more and more familiar and learn more and more coding. Eventually, some of us move on to work with other frameworks and languages, but we would never have gotten there without starting in WordPress. After years of WordPress, I'm just ready to move on to something else. :)
If you have a website project that needs more features then a Static site generator provides (CMS features), OctoberCMS is a really decent static page CMS (No DB needed for content) based on Laravel. On the frontend it supports twig, and It also has an amazing config file (YAML) based backend interface generator plugin called Builder. OctoberCMS is much faster then Wordpress and allows you to create plugins (similar to Wordpress), but every public plugin requires a code review (coding best practices) before being published. So you don't have to deal with messy code. The community is growing everyday and everything is fully documented.
I use Pelican because I'm familiar with Python and the templating engine, Jinja, already from using Flask. I found it mostly painless so far! It's not a flashy choice, but it suits my purposes
Oh I would love to keep working in Python! I work a lot with Django and have played in Flask as well. I was looking at Pelican but it didn't seem very active, but the idea of using Jinja sounds amazing... I'll give it a try for sure!
When I ask them why they chose WordPress, the answers usually boil down to "I want to be able to update the website myself." Well, the reality is that out of the 40 clients I've worked with during the last couple of years, not a single one does their own updates.
Oh, that part is so relatable until this age.
By the way, the most important part about static site generator is how fast they build the site. So, if you have some top candidates, let's compare how fast they build and deploy on real benchmark.
I can understand what you mean, but even now with everyone in isolation, they call me to update their sites. Most of them are not technical mind you. I find their have good intentions to do their own posts but when it comes to remembering how to log into WordPress and actually finding where to posts, etc... They all get intimidated and just email it to me to take care of it.
I think, comparing how fast static site generator build and deploy in benchmark will get more attention from dynamic based user. Not only about Hugo vs Jekyll. But also another static site generator such Next, Nuxt, Gatsby, Gridsome, Eleventy, etc.
I like this source too ->
willit.build/
Exactly! Everyone of them wants to update theirs websites, but in the end noone actually do it. I can't convince ppl, that they don't need a cms in 99% of time and that 1% with some news or blog can be done by simple but effective custom cms.
I asked one client of our company when he wants web page if he will update content on it (if he will be posting new articles and more)... An he tell yes so he wants classic cms even though i told him he will not need it because most of changes of his page was some cnages like new documment (barely 1 time per year - when new year started).
So long story short -> he choose another company which created him new page in wordpress and now its look like before. He changing pages maybe 1 time per year but paying that company because of updates etc... So its hard to convince people that they not need CMS.
Your right, not every client will be convinced. Some of them will be stubborn, and that's ok. I honestly don't want every client that inquires either - I only want to work with great people who trust in my skills and experience. Sounds like your prospect just wanted a robotic "yes sir" and not real advice from a professional. You may have dodged a bullet there. :)
With pleasure!!!! When someone do a cms for my clients as easy for them as WordPress :/ Developer experience is nothing if your clients aren't happy.
You bet! In my situation, the clients never user the CMS. So even though they ask for WordPress in the discovery meeting, that have no idea what WordPress is, all they want is a fast website that brings them leads. I update everything anyways, so in the end, they're indifferent. In this scenario, dev experience and site performance are king. :)
I completely agree. I also wrote an article about the benefits of static sites.
Why use a static site generator
C.S. Rhymes ・ Feb 17 '19 ・ 4 min read
Just like WordPress themes, there are many themes available for Static Site Generators too. Maybe start with a theme and customise it a bit to see how they work and see which templating engine and build workflow you prefer.
I built a Jekyll theme for my own website and decided to open source it so others could use it too.
I've found that Netlify offers a load of services designed for static sites as well.
Thanks C.S.! I was thinking along the same lines. I've been playing with Hugo today and did just that - loaded a custom theme, added my own content and then edited the theme to make it my own. I learned a lot about how the theme system works and how I could go about building my own. I'd like to incorporate that in the "SSG Saga" - not just an intro to each SSG but also how to edit themes or build your own. I'll try your Jekyll theme when I dive into it!
So far I've tried Gatsby, Next and Hugo for my English blog (Arabic blog still running WP).
Gatsby for some reasons were to buggy and sounded more headache compared to WP, so didn't dive deep and skipped it in the early stages of designing.
Next as amazing and so many features for the more demanding sites, plus the server-side thing. But I thought it's too much for my simple blog.
Hugo is the more straightforward for blogs IMO, very simple to setup and manage and update. for beginner web-developer there are a wide variety of ready to use Templates which you can use them as a starting point in the learning process.
I like how simpler it can manages single pages and blog entries.
Thanks! I'll try it out. :)
I just use GatsbyJS cause it reduces on my cost which I just reinvest the cost saving to get a good email software.
Awesome! I have Gatsby on the list to try. It seems to be very popular, I'm excited to see what the fuss is about ;)