Guido van Tricht

A new JAMstack based website

A while ago I decided to move my site away from Azure, or at least away from my by Valtech provided Visual Studio Subscription and budget. (No, recruiters, this does not mean I am searching for something else)

My old site was hosted on a simple setup of one WebApp and a MySql database server hosting WordPress. Although I do like WordPress for its easiness in creating new pages/blog posts and having a ton of free themes I can use, I was open for something else.

So a couple of options were available:

  1. Create my own Azure Subscription and host the same setup there
  2. Move to another hosting party which can host WordPress cheaper
  3. Get my own server to host anything on
  4. Something called Netlify?

The first option I researched was getting my own server. This could be either a hosted VM somewhere in a datacenter or a self hosted server at home(I don’t generate that much traffic so that should be possible).
The only issue is, what other things am I going to host on this server? The costs for hosting either a VM somewhere or a server at home are pretty steep for just a simple blog, so I would really be able to use it for hosting other stuff as well. But I couldn’t really think of a reason to justify the use of a full blown server.

JAMstack

Another option which sounded interesting was Netlify. I didn’t know what it was exactly, but did read about it quite a couple of times on Twitter and other blogs. So I decided to check it out.

Netlify turned out to be a great and FREE hosting solution. The only drawback is that it can only host static files and doesn’t allow for hosting a database.
The option Netlify offered was hosting a JAMstack based website. JAMstack was a term I had come across quite a couple of times in the past few years, but I always thought it was some kind of random buzzword. Although, I think, that is still the case, it is also something I have actually been working with a few times as well. Plus, there are different ‘stacks’ I have been working with a lot over the year it seemed. Some nice articles which explain what JAMstack is:

Netlify

Reading everything about JAMstack begged the question whether or not I really needed a database for my blog. There are quite a couple of ‘headless’ CMS options out there which would do the trick as well. One offered by Netlify as well, Netlify CMS.

So I decided to setup a Netlify website based on Netlify CMS. The easiest approach was just to use a starter kit, but then again there are a couple of options available around which frontend framework to use. In this case I looked at both Nuxt.js and Gatsby and eventually chose for NuxtJS based on Vue and TypeScript(I would later regret the TypeScript option…).

Interested in other options? Check out these helpful sites:

Netlify CMS uses Git as kind of the storage for your pages. The master branch is always deployed to the Netlify CI/CD and feature branches are being used for creating new pages and creating a simple publishing workflow. All pages are then stored as JSON files inside your repository. You can define different fields and types of fields, but eventually all of them are stored inside one JSON file which will then be read out to create/generate your website.

Learnings

So the stack I ended up with is as follows:

It is a very easy to setup stack and easy to get started with hosting it in Netlify, however I did hit some bumps along the way.

One thing that really took me some time is understand TypeScript and how to use VueJS(NuxtJS is based on VueJS) with TypeScript. There is very little documentation on how to setup your VueJS app with TypeScript. Everything is described in much detail for JavaScript, but for TypeScript you basically have to figure it out yourself.

So if you are not a seasoned TypeScript developer, I would suggest going with JavaScript if you are going to work with VueJS.