Alejandro Martinez

09 July, 2018NetlifyGatsbyJSMetaWeb DevelopmentπŸ• 4min read

Using Netlify for static site hosting and deployment

On every new iteration of my website I'm always happy to have taken the decision of using a static site generator instead of a big and fat CMS. This gives me the freedom to change the hosting easily and now I'm taking the opportunity to move to Netlify.

Netlify static without limits

Netlify is a modern hosting provider that allows you to quickly deploy modern websites. It supports many static site generators and Gatsby is one of them. Thanks to this, moving to it has been a work of just a couple of hours!

Up until now I've been using Digital Ocean to have my own private server and serve my site with nginx. I always wanted to have my own server to be able to play with some server side projects and have a place that I controlled to deploy them. But in the end I really didn't use it that much. For the small pet projects that I worked on something like Heroku was more than enough.

But the main advantage of Netlify is not the hosting part, but the automatic deployment infrastructure. One of the main drawbacks of static sites is that you need to generate them and usually that is done on your local machine, like a proper nerd πŸ’ͺ🏻.

That's usually fine but sometimes you want to write a post while you're not in your computer. Up until now I was able to write posts from everywhere by simply having my content in Dropbox, but there was no way to deploy them until I arrived home.

With the new setup, Netlify can connect to a private repo in Gitlab (that you can get for free), generate the site using Gatsby and deploy it to production on EVERY COMMIT. This reduces the friction to publish posts, as now, the generation happens in the server and triggering it is as easy as pushing to a remote git repo.

A CMS for markdown files, the best of both worlds

But you don't even need to have a machine with Git configured!

There are a couple of workaround for this. The first one is use Gitlab web IDE, you can create and edit posts, commit them and Netlify will deploy it automatically. Pretty cool.

Gitlab editor

The second option is to use NetlifyCMS. This becomes part of your static site and it can connect to your git repo to detect commit changes. This was the most important part for me. There are a lot of headless CMS but all of them manage the content by themselves, in their own databases. What I want is to manage the content myself with simple Markdown files in a folder. With NetlifyCMS I have the best of both worlds as I can use a fancy UI from any browser but also pull the git changes in my local machine and work with plain text and the file system.

The content is still mine.

NetlifyCMS

Static Site with super powers

Having this site in such an awesome infrastructure unlocks many cool possibilities thanks to some Netlify features.

With deployment previous I can see how things would like in production without merging the content in the main branch. Every Pull Request, or even every branch, gets a unique and permanent URL.

Support for serverless functions means that you can add dynamic behaviour easily in a static site. And if you need to get some information from your visitors you can use Forms that are loaded in Javascript and hosted by Netlify itself.

This is how a static site with super powers looks like!

Conclusion

For now I'm really happy with the decision. I still have to move my domain and try to setup HTTPS but by the looks of it seems that Netlify also makes this easy.

I'm still trying to setup NetlifyCMS properly. The editor works but the preview fails for some reason, I will need to learn more web stuff to debug that ^^

All in all this decision seems like the best tradeoff between wanting a CMS service (Wordpress, Squarespace) and rolling everything by yourself (locally generate the site and have my own droplet). A tradeoff that is usually hard to get right for people like me.

Right now my setup makes it easier than ever to write so I hope I bring more content to my blog really soon :)

πŸ‘‰πŸ» If you have any feedback you can reach me at alexito4

Alejandro Martinez
alexito4@gmail.com

Buka pintu