This article is part one in an ongoing series on creating this very blog site! It is an introduction to the decisions I made when deciding on the overall structure.
For Part 2 which covers the code frameworks, see Chosen frameworks
As we progress through our careers in software development, it’s really easy to focus on work and life and almost forget that we’re a part of a bigger community except when we need help. This community is full of developers who are just getting started with new technology or just want to get better at it. I recently found myself in this position after being a developer for over twenty years. Enough! It’s time to give more back back to the community that’s been so instrumental in getting me where I am today than the occasionally answer on Stack Overflow.
Now, how do I do that? What? Write a blog you say? Great idea! Hmm, now how do I do that?
It’s time to create my own blog. I’ve tried before but tended to get bogged down and distracted by, you guessed it, work and life. Not this time!
First off, I should summarize the main goals.
This may be a lot to ask but let’s do our best.
The easy answer would be to do the usual and fire up an existing CMS like Wordpress or Blogger or just start posting on something like Medium or DZone. But that’s no fun! I’m a developer so why not build something myself and learn along the way? Besides, I’ve always wanted to have a site where I could build small development tools to convert data, etc. This is a lot tougher to do in one of the mentioned existing platforms.
For me, clearly, custom is the only way to go. I’ll have the flexibility I want and likely learn a ton along the way. As there are tons of open-source tools out there, doing things for free won’t be an issue here.
There are several approaches to take and things to consider when building a site. Here are some of my top considerations:
Once again, SPAs are good but don’t have the lightning speed I want from this site. And again, static websites to the rescue. I’m starting to sense a pattern.
The clear winner of my first two criteria are static websites. For the flexibility item, I want to use a modern framework. Fortunately for me, there are several static website frameworks built around the popular UI frameworks. For example, Gatsby.js for React, Nuxt.js and Gridsome for Vue, and many others. What these frameworks do is allow you to build you app in React, Vue, etc. and then pre-process each page to generate the static pages they would produce. These static pages are then what is retrieved when a user visits your site. Voila! Blazing speed and most of the functionality of your favourite UI framework. And once again thanks to all the great open-source tools out there, free is not a challenge.
Here's a great list of static site generator options
When creating content for a blog, the last thing you want to worry about is code (unless it’s in the content of course). The one thing the existing blogging tools like Wordpress have, is easy to use editors for content. There are a few popular ways to deal with blog content in a static site.
In the last year or two, headless CMS systems have become hugely popular. They provide the data handling of a CMS while leaving the display portion totally up to you. You create your content in their portal and then retrieve it via AJAX or GraphQL in your site. Then you display it however you want. An upside to this is the headless CMS provider deals with storing images, etc. for you. The downside is that your content is controlled by a third party.
Here's a great list of the popular headless CMS systems
Another option is to use a Markdown editor to create your content using the popular Markdown syntax and store that data in your site. Your app would then read these Markdown files and display them appropriately. On the plus side, you have full control of your content. On the down side, you have to deal with storing and serving any images, videos, or other files.
A third option is a combination of the first two. It's a headless CMS that integrates into your project code and uses GIT to store the posts and images. The upsides are that you still get a nice CMS interface for creating posts and maintain full control of your content since the GIT repository is under your control! And it's complete free!
In my case, I’m not worried about my content being controlled externally as long as it’s a solid company and I would rather get things going quicker. So headless CMS it is! The only concern here is my “free” requirement but we’ll talk about that in a later section.
Now that I’ve decided to build a statically generated site with a blog powered by a headless CMS, the next decisions are to determine what framework, site-generator, and headless CMS to use! We’ll talk about that in Part 2 which will be coming very soon!