SITE NAME CHANGE: Hi there, this is just a quick note to explain why the site name seems to have changed. I've decided that my personal domain of Gecko8 wasn't nearly descriptive enough. I want to cover not just code, but how to make our lives better as developers. With that goal in mind, I feel Life And Code is a better choice. I hope you agree!

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

Update: I've recently come across an issue in Nuxt that makes it very difficult to static generate blog post page headers for SEO. Basically the headers generate fine but then queries are still issued when the page is run live. There doesn't seem to be a good solution for this so I've done a drastic restructuring. I'll add notes as we go along (only affects first two parts of the series).

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!

The Goals

First off, I should summarize the main goals.

1. Easy to use blog platform. Clearly, this is the immediate goal, to give me somewhere to post things I’ve learned.
2. Flexibility. I’m always having random thoughts about tools I’d like to build and have online somewhere.
3. Last but not least, I want to try and do this for free. Yes, free. That means no hosting costs and no third-party service costs.

This may be a lot to ask but let’s do our best.

Decision 1 - Canned or Custom?

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.

The Decision

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.

Decision 2 - What Type of Site?

There are several approaches to take and things to consider when building a site. Here are some of my top considerations:

• Needs to be good for SEO. It’s a blog, so I want people to be able to find it easily.
• Needs to be fast. I really don’t like how sluggish the pre-existing platforms feel.
• Needs to be flexible. As mentioned earlier, I want to be able to expand it with custom tools and whatever else my wild imagination can think of!

Good for SEO

Most of my website and mobile experience has been writing single page applications or SPAs. They’re great for flexibility but unfortunately, not the greatest for SEO. What is good for SEO? Static websites. If you’re not familiar with static websites, they’re basically simple sites built strictly with HTML, Javascript, and CSS. Most importantly, each page is a single HTML file with no dynamic content.

Needs to be Fast

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.

Needs to be Flexible

Of course, I could create the site in pure HTML with some Javascript and call it a day. But that would be a lot of work and really wouldn’t be a lot of fun. I want all the cool tools and patterns offered by the latest UI frameworks such as React, Vue, Angular, etc.!

The Decision

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

Question 3 - How to Deal with the Blog Content?

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.

Headless CMS

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

Markdown Files in Your Code Repository

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.

GIT-based Headless CMS

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!

The Decision

Update: After running into some issues integrating my chosen headless CMS with my static site generator, I've changed directions in favor of a GIT-based headless CMS

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.

What's Next?

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!