Update 2021: No longer using Gridsome
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.
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.
Now for the glorious unveiling moment, as you might have guessed, I am going with SSG.
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
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">
is equivalent to this inline CSS version
<button style="background-color: #4299e1; color: #fff; border-radius: 0.25rem;">
or in table form
Tailwind can also combine these utility classes into reusable components. Here's an example,
<button class="btn btn-blue">
@apply font-bold py-2 px-4 rounded;
@apply bg-blue-500 text-white;
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.
- 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.
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.