Hosting static websites on netlify

Static sites are the future, obviously, and Netlify are awesome at hosting them with a free plan and some cool features you'll be up and running in no time.

There are a ton of services out there for hosting your static sites which I have not even got close to using so this will be an ignorant post about my choice of hosting for my static site that uses Hugo for its underlying static site generation.

I had been looking at static sites for the last few years after I grew fed up in my development days of the bloated ways of Wordpress to the excess effort of trying to develop something cool with Laravel all while trying to learn PHP which to me just didn’t feel very good to me and then I found my way to Middleman and Spike and finally, due to a random set of events and landing on GoLang I discovered hugo which somehow I managed to overlook at first.

So we’ll get down to the important stuff and work our way through getting this site hosted on Netlify.

A quick introduction to Netlify

Netlify comes with a great free plan that provides more than enough to host our project with, including:

It is highly recommonded to have a look and setting it up is super simple. As stated above, I use Hugo to develop my website, taking advantage of the netlify curated template that can be found on github called victor-hugo which I really enjoy because I like developing my own templates as a one off kind of affair.

I also use asdf for the version management of my nodejs and go runtimes which allows me to easily switch versions and test things work in various setups and this will be a post for another time.

Getting started with Hugo

To get yourself up and running, load up your default development folder, clone the repo, install the packages and load your development environment like so:

cd <code directory>
git clone https://github.com/netlify-templates/victor-hugo <project-name>
cd <project-name>
npm install
npm run start

This will install the required pacakges and then run your development server that has brower reloading for all your changes which is always a neat feature for rapid development.

When you have made the changes and are happy with the result you can can commit the code to your own repository and move on to the next step of setting up Netlify to host your site. Before you take the next steps, make sure you have created a new empty repository, for this example I am using my preferred choice of gitlab.

git init
git remote set-url origin git@gitlab.com:<username>/<repository>
git add .
git commit -am "<commit message>"

Now we can get to explore Netlify in more detail.

Setup and deploying on Netlify

Head over to Netlify and set up an account if you don’t already have one. You’ll then want to click the nice green button saying ‘New site from Git’ which will show you the following where you should select Gitlab for this example but Github and Bitbucket are onbviously ok as well.

Create a new site with Netlify

You’ll be asked to authenticate yourself and then when thats setup you can select the repository you created earlier followed by the deploy settings you require. You can copy the ones I’ve setup in the following image.

Deploy settings for Netlify.jpg

These are the default options you would want on this project. If you were not using the template but instead using just Hugo you would set your build command to hugo and the publish directory would be public. If you wanted you could change the template to match this setup but I’m not a fan.

Now your site is configured you can click “Deploy Site” and Netlify will clone your repository, download the packages, build your site and host it all in one go and any changes you make from now, once you push your commit, will trigger Netlify to rebuild your site automagically.

Beyond the basics

There are a number of features that can be used out of the box with the free plan and I urge you to go and have a good look at them before I write more posts on the subjects. To start with you can preview your deploys depening on branches, you can capture form responses without the need for a way to capture them via PHP, A/B testing on different branches and you get support for LFS which is really handy for your media files and git hosted repos.

There are advanced options also available like password protection, analytics, pre-rendering, 301 redirects and CORS along with multiple 3rd party application.

Not forgetting we can take advantage of Netlify CMS which I use on another site and will write about that experience at a later date.

I hope you enjoyed my first attempt at a helpful blog post.

comments powered by Disqus