How do I Host a Static Website?

July 21, 2019

Netlify is a supremely popular website hosting and CMS company

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.

Who the Heck is Netlify?

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.

JavaScript, APIs, Markdown = JAMstack = Security, Speed, Scalability.

Now I know what the Jamstack is, how do I get started?

Starting a Static Site?

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.

Gridsome is the New Kid on the Block

If you're like me and not a JavaScript kingpin, you might prefer Gridsome to Gatsby. The former was inspired by the later, so they perform more or less identically. Though Gridsome uses Vue.js rather than React.js.

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.

Gridsome static site generator using the Jamstack

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.

A HUGE Netlify Deployment Tip!

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.

Do You Need a CMS with Static Sites?

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.

Markdown is a Great Blogging Tool

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.

Netlify's Gatsby Starter is the Easiest Option

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.

Gatsby the most popular static site generator

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.

Hosting a Static Site with a Regular Hosting Provider

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.

One thing I don't have at the moment is automatic deployment. Hostinger do connect to Github, but from what I can gather they won't build your site in the same way Netlify do. It's not a deal breaker, but a minor inconvenience for now till I resolve the matter. It seems like there is something called Composer that I can possibly use? It uses PHP rather than JavaScript, though.

The Static Site Revolution

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.

Static site revolution

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.

Static Site Hosting Summary

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

  • Netlify's one-click installs, without a doubt.
  • You not only get instant deployment of a static site, but instant Github as well.
  • You're good to go in less than a minute!

Pointers to Consider

  • Do you need a CMS? If you love WordPress then I'd highly suggest you opt for Netlify CMS, bolt it onto your static site. It's super cool how configurable it is.
  • Static HTML is highly configurable, compared to WordPress themes. If you like bespoke creations it's the sensible choice.
  • Thankfully, static site's tend to be performance oriented from day one. You don't need to be a performance expert.

Github

  • It seems like Github is a part of every web developers life these days.
  • While it isn't necessarily important for tracking version control. It is awesome for syncronising with Netlify to get the automatic build and deploy features.
  • Most traditional hosting providers let you sync with Github, auto-deployment might not be as straightforward.

Form Handling

  • Static sites don't do complex stuff as well as dynamic sites, because they don't typically have a backend. That's why hooking up a headless CMS is a great option. WordPress + Gatsby + Netlify.
  • Netlify enable you to add the 'Netlify' attribute to a form and it should get parsed with the HTML at build time. It took a bit of fiddling for me to get it to work. It wasn't as simple as the guide suggested.
  • PostMail is a great service if you're struggling to get your static forms to work. They give you some copy and paste options, but I could only get my own forms to work by making some hidden fields that matched their examples.

Comments

  • You can either code your own comment section... or go for an add-on like Disqus. That's what I went for. Even though it was a reluctant choice, because my Facebook comments were always laggy with WordPress. Disqus has been rapid with Gridsome.
  • It's worth trying out Facebook comments as an alternative to Facebook. Most seasoned bloggers are probably signed up with Disqus anyway, even though it's not as popular as Facebook.

Markdown Guides

  • Github Markdown Guide is a good place to start for some quick examples if you want to learn Markdown.
  • More Detailed Markdown Guide by Adam P is also hosted on Github, but delves much deeper into Markdown. It also has a section of other Markdown tools.

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.

David :)