Road to JAMstack blog instead of classic WordPress

Here is a bit of into:

As every person who thinks about creating a blog, the first thing I thought is creating one on WordPress. I even have created one a few years ago, and hosted for free on wordpress.com. I have written one article there, and then the blog got lost.

Then, after my first blogging approach, I have learned quite a lot of programming. Mostly mobile programming (I use Flutter for day-to-day programming and from time to time write some native code), and a bit of web development too. Well, I had taken 2 courses (front-end, back-end) on web development on .NET in university. Still, the only thing that stayed with me is writing back-end code and some Razor while front-end (html, css, js) was nearly forgotten.

In my spare time, I launched a few games build on Flutter to start earning money by creating some “cool” products. Up to the day, I have made only a few bucks but got pretty more profound in development. Unfortunately, I couldn’t live for just a few bucks, so I started thinking about what to create next. Ideas were coming and passing, and I caught myself with the fact that many ideas rely mostly on the web rather than mobile usage. So I started thinking more and more about learning web development ...

As every mobile developer coming to the web world, I got lost. It feels like coming from the hills to dense forest. If you want to develop something for mobile, you would need to make just a few choices: going with native development (Android - Kotlin / Java, iOS - Swift / Object-C) or with some cross-platform frameworks (Flutter, React Native , and some other choices with different degree of wildness). But when you want to do something on the web ... the number of options are nearly countless. Really, there are thousands of languages ​​and tools for writing front-end, back-end or both in the same place ... Angular, React, Vue, Django, PHP, JavaScript, TypeScript, Laravel, Node, Rubys, .Net and thousand others. If you don’t want to drop a coin for few times and see where the chance gonna lead you, you could spend months trying to find some suiting tool for you, and you will still keep finding new and new ones with no end. I was feeling completely lost every time I was trying to understand how to approach the web. Well, there is AngularDart (the Angular with common to me Dart language), but Angular seemed overkill for the tasks I had in my mind. Doing projects on .Net seemed ... strange, it looked that no one on the web doing stuff on .Net. So this stayed in limbo ...

Now let’s get more closer to the topic:

During that time, I understood that I want to make myself a blog. Well, many different people write about their experience, and I liked to read their stories. And I thought that I may also have something to share.

Deciding where to build a blog

So I have dug into CMS solutions. WordPress was eliminated at the beginning since many bad things have been stated about it. You know, the security, hacks, other problems… Yes, there are a huge amount of plugins, tools, resources… But that didn’t buy me. During the research process, I have found many other CMS solution that looked better in my eyes.

In the end, I made a list of the tools to decide on. There were Craft CMS, Ghost, Statamic and Drupal. I really liked the look of Craft CMS, and Statamic also was very good. But after trying a sample of Craft CMS, I left a bit confused. It seemed kind of unintuitive in the way of building pages. And to run it, I needed hosting that cost at least 5$ a month, not a lot, but still money. Actually, I needed money to run any of them. Sad but what to do? Also, during the time of my research, Statamic charged more than 200$ for one site if you wanted to use it, which kindly removed it from the list. Recently Statamic got updated to version 3 with a free tier for personal usage, so it got much better in my eyes now. Additionally, Statamic blog could be generated into static pages now (in the next section you’ll see why this is an excellent addition). Ghost looked decent, it’s open-sourced as all 4 candidates with a good pack of plugins and resources available, while Drupal looked … a bit old … in design, feel … It shouldn’t be a huge problem, by the way, since it provides more plugins, themes, etc. compared to the previous three CMS’s. But, as every aspiring developer, I was looking for something fresh, new, cool …

Finding about static sites

This time, I have caught by Gatsby. Gatsby - I really liked the name for a tool. And the icon was appropriate. I read a bit about it, and also landed on Netlify page. I liked the look of their marketing sites, but it was still unclear how I can use that, so I just closed the tabs.

Later that time, I read something about JAMstack and, in some time, landed on their website. The message was right: fast sites and no need to run servers. So far sound good, and I dug deeper. Everything lives in Git, could be hosted literally for free... I have been bought.

Then I learned that Gatsby is used for making static JAMstack sites and many people host these sites on Netlify. You may think that everything was set. But not really. Something inside me just don’t want to go with React on which Gatsby is based. And after research about React vs Vue, the latest seemed like a better choice due to the easier learning curve. So I continued to search and found Gridsome, which looked like a complete Gatsby clone on Vue. So now he should be set, you may think. Not yet, sorry. I also have found Nuxt, which allows building not only static sites as Gridsome, but pretty standard, server run ones. So I thought that for long term learning Nuxt would be a better go. Now it is set. Partially. I also needed a CMS to operate with the content.

Choosing CMS

Choosing CMS for the static site was even a harder decision than selecting what to use to build a blog. After researching for the tools that are used with the static sites, I singled out several headless hosted CMSs and Git-based ones. For hosted ones, I was looking for those that don’t charge for basic usage, and choices were decent: Prismic, Storyblok, Contentful, ButterCMS. ButterCMS message was merely great: “Headless CMS you’ll melt over” - 15/10 points of greatness. There was also Strapi - it looked the best, but I needed to host it myself, so it didn’t fit.

In the same time, I was wondering if I should leave my content somewhere if I can have it all in my Git. With Netlify CMS, for example. And I really got stuck on this question. I was leaning toward Git-based CMS, but I still could not decide. Finally, I decided to drop a coin. I didn’t find any😂 and took a credit card instead. It worked great, and I got an answer - I need to go with Git-based CMS. I also made a small comparison between Forestry which is also Git-based CMS and Netlify CMS and decided to go with Netlify CMS at the end. The final decision was made mostly on the facts that Netlify CMS go well and fast with Netlify(surprise) that I wanted to use and are open-source. Additionally, I could preview the Netlify CMS admin interface, and I liked it. It was simple, clean, basically everything I needed.

Making it live

To make all this live, I followed setup instructions for Nuxt, Netlify and Netlify CMS, thankfully, they all are quite clear.

Only one thing that took a lot of time - is creating Nuxt project. On set up, you can decide between JavaScript or TypeScript for the primary language. I didn’t want to go with JavaScript, since using dynamically typed language after statically one is really the pain. But I thought that finding tutorials on JavaScript would be easier and went with it. You also may choose some additional modules, plugins which also took time to research what to add. But the biggest pain was selecting a linting package for js. To keep it short, I could not run even Hello World project before I have deleted all the linters.

Luckily, Netlify smoothed out my angry feelings later on since it is really no friction in use. Two clicks and your website is ready - great service. Connecting Netlify CMS also went without problems. Their docs lead through all the steps you may need.

And after some basic styling I, finally, got my website up and running.