All Hail The JAM Stack!

I was having troubles with my website. I got it settled up just to be a landing page. A website with a high bounce rate and low retention yikes!

With leaving social media, I needed a new home to settle down my thoughts and have all my creations in one place instead of relying on other sites. Time to make the web personal again!

What’s a stack?

A stack is simply the selection of software that you use to run an application. My first website ran on LAMP Which was Linux, Apache, Mysql and PHP. It wasn’t cool to have a /static website those days.

Then What’s with the JAM?

Gone are the days of bulky server bootstrapping to get a simple website off the ground. JAM stack made it simple, it stands for,

• Javascript.
• APIs.
• Markup.

The JAM stack is not really about the technologies used as some even totally drop the J from the stack. But it’s a way to approach building websites.

Instead of having bulky databases and web-servers, sites are to be pre-rendered using the APIs and Markup.

So what’s my JAM Stack & Why?

My old website ran on Hugo which was technically JAM, but I never filled it with content as I was just lazy to read the docs.

Javscript: This time I opted to use Next.js and wrote my own CMS and rendered the UI with the Bulma CSS framework.

APIs: As said before I use my own custom one file Typescript CMS that reads off files. I call my API the _grail which has all the data to generate this blog.

_grail
├── categories
│   ├── fintech.md
│   ├── life.md
│   ├── projects.md
│   └── web-dev.md
├── microblog
│   ├── 2020-06-07T14:50:49+0000.md
│   └── 2020-06-07T15:21:14+00:00.md
├── pages
│   ├── page_about.md
│   ├── page_contact.md
│   └── page_home.md
└── posts
    ├── 2019-06-08_All-Hail-The-JAM-Stack.md
    ...
    └── 2020-05-08_Putting-the-past-on-disk-a077e62019eb.md

4 directories, 24 files

Markup: Good old markup with frontmatter to annotate metadata for each of the markdown posts

---
slug: "1591541449"
date: "2020-06-07T14:50:49+0000"
---
Hello World! It's my lonely *micro-blog*

Current Workflow

Current workflow requires me to write markdown on my text-editor and push it to a private github repository and afterwards it’s deployed instantly(Thanks to Netlify), but there are a couple of pain-points.

• Quickly generate Content Templates - Currently I copy and old post markdown file and edit it, need some CLI.
• Static file management - There is none, I currently just convert the images using IM and dump the images into the /static directories.

Conclusion

It’s not the best, I have to do my own styling and content structure. This allows me total control over the site and be able to expand it, which I will certainly do. Thanks for hanging on folks.