The million dollar question on any techie's lips today is: how do I host a static website? If you're replying by SMS or extremely busy. Your seven-letter answer is Netlify.
For tech-savy readers, however, a succinct answer won't do. Nothing less than an in-depth guide with all the ins and outs is the order of the day, then. Grab a Snickers 'n' a Coke, and let's do an Andy Ruiz on the whole static-site-generator hosting game. Forget sparring, we're going in for the kill. You'll be ready to attack Netlify like a seasoned pro.
That's the plan anyway... kill or be killed. Roast or be roasted. Host or be, erm, hoasted.
I'll cut to the chase. The hottest two players in the whole static site space are Netlify, for the serverless backend hosting, and Gatsby for static site creation.
Netlify also has a content managment system, which you can use with or without their hosting. It aligns itself nicely with plenty of website platforms such as WordPress, Hugo, Gridsome, Drupal, et al.
Then there's my personal favourite - Gridsome, which I used to build this blog.
So who the heck is Netlify? It's a company co-owned by Matt Billman and Christian Bach. Matt was the dude who coined the term JAMstack to give static sites a trendy name boost. A shrewd idea, I must say.
Now I know what the Jamstack is, how do I get started?
While there are endless static site generators and hosting companies. I think it's only right that we concentate on Netlify for this one. Not because you can get started for free or they have their own CMS... or they sync up with Github and deploy automatically.
It's because Netlify are a thoroughly decent company run by people who care. They're doing a lot for the community, and as I mentioned they started this Jamstack stuff. Technically static sites have been around for years, in fact that's what the web started with.
This time, though static sites have been given a turbo boost and brought into the 2020s with a bang.
To get started you first need to sign up with Netlify. Once you've created your free Netlify account, you can simply drag and drop an existing site and that's about it. You're good to go.
From what I read, Vue is easier to use and a lot cooler than React or Angular. Purely because it's not from a big tech company. It's the underground choice, but it's got a massive following behind it.
So head over to Gridsome and check out their Gridsome Netlify Starter Guide. It's easy enough to follow and will get you rolling with Netlify, Netlify CMS and a brilliant static site generator.
My advice is to play around with a starter site to get to grips with Gridsome and the Jamstack in general. I looked on Gridsome's Starter Site page, then you can see all the code on Github to lift into your own site to add functionality.
To save you lots of man hours and hair loss. Ensure you write your filepaths exactly the same, because I couldn't figure out why my site was working locally and wouldn't build on Netlify. Had me baffled...
Turns out that Windows isn't case sensitive, but Linux that Netlify uses to build and deploy your site with is. So once I figured this out everything worked perfectly.
If you sync to Github the correct way it won't be an issue, but this was before I learned my Github ropes and was uploading files, copy and pasting, rather than pushing to Git the proper way. Trial and error, I guess.
Initially, coming from a WordPress background, I thought a CMS was a good choice. It still is if you're building sites for non-techies. Netlify offers you a supremely tweakable CMS of their own. You can add it onto any site independently of whether you host the site with them or not.
My first few test sites did include the Netlify CMS. Its clean interface is easy to master. That being said, I haven't included it with my final build for this blog. Markdown was my final choice.
In any field of computers these days, everything has gotten easier to use. This has enabled us to take on more and more features and programs. We're overloaded with new software functionality to learn and remember. That made me think about Markdown files in a bad way. Not aother thing to learn, I thought. Well I was wrong. It's been a pleasure.
Although you can still use Markdown with Netlify CMS; there's a toggle in the editor. I thought it's one less feature to worry about for the time being and I can write my blog posts in Markdown on my laptop.
Though I still have a lot to learn, this is only my second blog post written in Markdown. It's been a pleasure and nowhere near as hard to learn as first imagined. That's why it was chosen for the Jamstack no doubt.
The next time I write in WordPress, it's going to feel slow as hell saving to the cloud. You can't beat a local drive for speed. The hot loading feature is impressive, too. It can be a pain if your code is funky and it breaks the site, but once it works, it's peace of mind that the code is all good.
There's nothing stoppind me adding a CMS in the future.
For now, though, my plan is to learn more about Markdown. It's so flexible and intuitive and more rewarding to write with than a bog-standard text editor.
While it's true that Gatsby is the most popular of all the static site generators, I prefered Gridsome. You might want to go with numbers on this one, which is a perfectly logical choice. There's nothing wrong with that. You will find more people to converse with if you go for Gatsby over anything else.
There are endless tutorials on YouTube and plenty of Gatsby chatter on the Internet. The nearest I got to it personally was downloading their Gatsby starter kit from Netlify. It's a one-click install. Easiest installation ever!
Other than having a play around with it, my claim to Gatsby fame is adding the featured image box to their Github repository. So now you can have a featured image, in the same way you do on WordPress.
My static site game started out with Netlify, purely because I'd heard about them on YouTube and most people speak highly of them. Things were going great until I added my domain name for this site. It does mention in the Netlify docs that if things aren't configured correctly it can affect the connection speed.
Of course I did my best to aleviate the problem, but being impatient I didn't want to wait another day for the domain settings to time out. Sometimes they are almost instant, other days the can take a while.
With a heavy heart, I decided to delete my site and host it with Hostinger - who I've moved to from Bluehost - where all my WordPress sites now live.
The speed is now back to normal. Though I don't want to knock Netlify, because this was possibly my fault for not configuring the domain records in the best way possible.
Every dog has its day. Does that mean WordPress has had its day, too. Fortunately or unfortunately, depending on which side of the fence you are, I don't think that's the case.
For starters, you can have your cake and eat it. You can use the best of WordPress, the CMS and use it for the backend, then use Gatsby or Gridsome for the front end.
You end up with a tried and tested CMS that most bloggers are happy to use, with all the benefits and speed of static sites.
You would still need regular WordPress hosting, with WP being dynamic rather than static. It's built on the fly from PHP templates. This means you need a proper web server, whereas static sites only need a CDN.
Taking this into account, it only extends the usefulness of CMSs like WordPress and Drupal, as it integrates them nicely into the world of static sites. They're going to be a part of the static site revolution, not a victim of it.
My hope has been to give you an insight into the pros and cons of static sites, along with a few techniques and tips. To finish off here's my hit list of things to do next:
Quickest Hosting Method
Pointers to Consider
Well I hope you've now got the static site bug. Even if you haven't, get yourself over to Netlify and do the one-click install thingy. You won't be disappointed. It's worth it to find out what all the fuss is about. Let's face it - what have you got to lose? It took me a while to be fully convinced by the Jamstack, as I'd only recently bought into all the AMP hype.
It was like I'd moved over to the fasted website tool, after binge watching loads of YouTube videos. Then only to be told, no this is the fastest thing for websites.
Truth is, they are both good in different ways. AMP is only going to get better as it matures, just as the Jamstack will do. On that note, I'm going to call it a day.
Any questions, please hit me up in the comments or ping me an email.
Happy coding, guys.