Hello World

01 Aug 2019 | 5 min read

Update 2021: No longer using Gridsome

Hello World!

I have been wanting to setup my own blog for the longest time and now it's finally ready.

Being a tech-savvy person, with greater awareness and appreciation for the deeper aspects like security, speed, etc, I have a more stringent set of criteria in mind when evaluating the possible options powering my blog, so it's not going to be just another WordPress site.

After much exploration and trying out the suitable options, I have finally settled on something that I am quite satisfied with, which I will go into details later.

Overview of the options available

From a technical perspective, blogs can be classified into three broad categories.

SaaS (Software as a Service) products like Blogger. Easiest way to get up and running, minimal technical knowledge required, which also means least control.
CMS (Content Management System) like WordPress. Slight learning curve, more customisable, able to extend functionality by installing plugins.
Static Site. A much overlooked option these days as powerful CMS are easily available, but still, it can be an excellent choice for some use cases.

Static Sites offer the best security and performance because no server-side processing is involved. The server is only hosting static files (HTML, CSS, JavaScript, images, etc), so software like Apache, SQL databases, PHP Interpreter, etc, are not necessary, thus the attack surface is drastically reduced. So overall, it's much more secure, and also easier to maintain, without having to worry about server misconfiguration and keeping software up to date.

The setup process can be as simple as uploading the static files into an Amazon S3 bucket. Which means for tiny, low traffic sites, cost can be almost free, unlike the typical web hosting setup (e.g. LAMP Stack, etc), which can cost at least $100+ per annum for a decent one.

Static Sites can be created using software such as Adobe Dreamweaver, or even handcrafted with just a text editor.

Instead of starting from scratch, a quick way to get something up quickly is to download or purchase HTML templates online. With some edits and tweaks, a decent site can be produced without spending too much time and money.

Static Site Generators

Besides these 3, there is also SSG (Static Site Generators), a lesser known category that lies somewhere in between a CMS and a Static Site.

SSG (Static Site Generators) are frameworks/tools that takes a more structured approach in managing content, similar to CMS. Files are organised into data/content and templates, and the generator combines both to produce the final static site.

These tools are driven by the command-line interface (CLI), so it remains primarily in the realm of developers.

Some strengths of SSG

It's easy to get started. Just install the tools, learn the key concepts, and you are good to go.
Being ultra lightweight, it's possible to understand every part of it, which means more ownership and control over every aspect, which is a sharp contrast from complex CMS which are usually treated as blackboxes.
Despite being a niche use case, the popular ones do have a strong community. Lots of themes and plugins available without having to reinvent the wheel.

Having said all these, like everything else, nothing is perfect. While SSG can be an excellent choice for Web 1.0 style, passive reading sites, supporting two-way interactions like commenting requires integration with external services. For such use cases, CMS is usually the preferred choice for being able to provide an All-in-One solution.

StaticGen contains a listing of SSG, go have a look if you are interested.

My Setup

Now for the glorious unveiling moment, as you might have guessed, I am going with SSG.

SSG: Gridsome, Vue.js
CSS: Tailwind CSS
Hosting: Amazon S3 Bucket, Cloudflare CDN

Why Gridsome?

Gridsome is based on Vue.js, which is the best JavaScript framework that I have ever tried. I enjoy trying out frameworks and programming languages, and I find the design of Vue to be very elegant, the first JavaScript framework to feel right in every way. So it has been my default JavaScript framework since I discovered it many years back, when React and Angular were the most popular choices. By now, Vue seems to have overtaken both, looking at the number of stars it has on GitHub.

As mobile devices account for roughly half of all web traffic, I prefer to have a modern, SPA (Single Page Application) site that can deliver an optimised experience for them. I also do not want to sacrifice SEO for SPA, so I examined the output, and I am glad to say modern SSG like Gridsome, Gatsby, have it well taken care of. They do generate pre-rendered HTML files, just like traditional static sites, so even without JavaScript, it still works perfectly fine by falling back to the pre-rendered HTML pages.

One fundamental difference between the various SSG is the templating language. While they are easy to pick up and not a dealbreaker, it's more satisfying to have cleaner, more elegant looking codes. Both Gatsby and Gridsome are able to do the job, and despite Gatsby being a much more mature project, I have decided to go with Gridsome mainly because Vue codes are just more pleasant to look at than React. Afterall, it's my own personal blog, so as much as possible, I would like something that I can be proud of. Although Gridsome is still at v0.7, I find it good enough with no issues so far.

For people who just want to put things together quickly without bothering about the finer details, it's simply just a matter about selecting the suitable themes and plugins among the SSG. Both Gatsby and Gridsome come with a wide selection of free starter themes, and being much more mature, Gatsby has much more. Here are the links for both

Gatsby Starters
Gridsome Starters

For content, Markdown is the standard format. It's the default format for Gatsby, Gridsome and pretty much everything else supports it. This means content are portable, so choosing the wrong SSG is not fatal and there are plenty of opportunities to repent.

Why Tailwind CSS?

Tailwind doesn't really fit into the typical definition of a CSS framework. Unlike Bootstrap, Bulma, and most other CSS frameworks, it doesn't comes with any predefined components, but it does provide the building blocks (utility classes) to create these.

To explain how tailwind works in a succinct manner, think of it as a concise version of inline CSS, each utility class maps onto one CSS property.

For example, this Tailwind version

<button class="bg-blue-500 text-white rounded">
  Button
</button>

is equivalent to this inline CSS version

<button style="background-color: #4299e1; color: #fff; border-radius: 0.25rem;">
  Button
</button>

or in table form

Class	Properties
.bg-blue-500	background-color: #4299e1;
.text-white	color: #fff;
.rounded	border-radius: 0.25rem;
.px-4	padding-left: 1rem; padding-right: 1rem;
.py-2	padding-top: 0.5rem; padding-bottom: 0.5rem;

Tailwind can also combine these utility classes into reusable components. Here's an example,

<button class="btn btn-blue">
  Button
</button>

<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
</style>

Although Tailwind covers a very comprehensive list of CSS properties, the unused CSS can be purged so it doesn't add any unnecessary bloat.

So what's the use of a CSS framework without component libraries, aren't we just wasting reinventing the wheel?

One man's meat is another man's poison. Using component libraries is a great way to build things fast, but for projects that require a more custom look, it's much neater to start from scratch than to hack around existing component libraries.

Some benefits

Working mainly with utility classes within HTML means less context switching between writing HTML and CSS codes, so it can be a more pleasant and smoother experience
CSS codes tends to be repetitive and long, so shortening leads to reduction in code size
Not necessary to have split panes in editor to show HTML and CSS side by side, so less screen estate needed, useful for smaller screens like laptops
Not necessary to invent class names for div, so no more writing long ugly class names

Not saying the conventional way is bad, there are many approaches to keep them organised, here are some

Tailwind UI is a collection of professionally designed, pre-built, fully responsive HTML snippets. It's still in early access but looks promising.

Why Amazon S3 Bucket / Cloudflare CDN?

I just want to use something simple for this blog, so just a simple S3 bucket. Pairing it with Cloudflare's generous free plan for the hassle-free HTTPS, CDN and DDoS Protection.

There are lots of other options available, one noteworthy one is Netlify, it is pretty cool, and they do provide a basic free plan good enough for personal projects.

Bye World

That's all for now, hope you enjoy reading. This is just the beginning and I will be writing more on various other topics that interest me whenever I find time.

← PREVIOUS