date: “2024-03-01”
layout: “post”
author: “Nick Frost”
Hello, World!
This is the content of my first blog post.
“`
2. Templating & Partials
SSGs use templating engines like Liquid (Jekyll), Go Templates (Hugo), or Nunjucks (Eleventy) to generate HTML pages.
Layouts provide the HTML structure for your site. You can have a default layout for standard pages, another for blog posts, and one for landing pages.
HTML
“`
<!– Example of a simple layout in Jekyll –>
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<header>
{% include nav.html %}
</header>
<main>
{{ content }}
</main>
<footer>
{% include footer.html %}
</footer>
</body>
</html>
“`
Partials (or components) allow you to break your layout into reusable chunks, such as headers, footers, and sidebars.
3. Build & Deployment
When you trigger the build command, the SSG processes all your content through the templates, applies any plugins or pre-processors (like Sass), and generates a folder of static files (typically named `_site` or `dist`).
These files are completely self-contained and ready to be hosted on any web server or static hosting platform (e.g., GitHub Pages, Netlify, Vercel).
Why I Built a Blog from Scratch with a Static Site Generator
Recently, I created a blog using Jekyll, a Ruby-based static site generator.
I chose to build it from scratch—meaning no themes, no frameworks—just pure HTML, CSS, JavaScript, and Liquid templates.
Here’s why:
1. Full Control and No Bloat
Most platforms come with pre-built themes, bloated code, and unneeded features. By building from scratch, I only added the code I needed:
- Lightweight CSS.
- Zero JavaScript dependencies (vanilla JS only).
- Clean, semantic HTML.
This translates to faster load times and complete control over the design and user experience.
2. Better Understanding of the Build Process
Building from scratch pushed me to understand the core mechanics of static site generators:
- How templates inherit from each other.
- How collections (e.g., posts, projects) work.
- How data is pulled from markdown files into layouts using Liquid.
- How asset pipelines work.
Once you build from scratch, you realize that SSGs aren’t black boxes; they’re just smart templating engines.
3. Extremely Fast Performance
Because there’s no database and very little JavaScript, the site loads almost instantly.
A Google PageSpeed score of 100/100 is easy to achieve with this setup because the browser is just rendering raw HTML and lightweight CSS.
4. Hosted for Free on GitHub Pages
GitHub Pages natively supports Jekyll, so all I have to do is:
1. Write a blog post locally in Markdown.
2. Push the changes to GitHub (`git push`).
3. GitHub automatically runs the build process and deploys the site live.
No servers to manage. No monthly hosting fees.
5. Peace of Mind (Security and Reliability)
With a static site, you don’t have to worry about:
- Database vulnerabilities (e.g., SQL injections).
- Plugin vulnerabilities (which is common in WordPress).
- Server downtime due to database crashes.
It’s just static files. Once they’re built, they’re rock solid.
What is a Headless CMS and When Should You Use One with an SSG?
A Headless CMS is a content management system that decouples the *content* (the body of the website) from the *head* (the front-end presentation layer).
In a traditional CMS like WordPress, the content, database, and front-end theme are tightly integrated.
With a headless CMS, the system provides a user-friendly UI for content creators, but instead of rendering web pages directly, it exposes the content via an API (REST or GraphQL).
“`
Traditional CMS:
[Content & Admin] —> [Built-in Templates/DB] —> [Output HTML to User]
Headless CMS + SSG:
[Content in Headless CMS] —> [API] —> [Static Site Generator (Build Step)] —> [Output Static HTML]
“`
Popular Headless CMS Options:
- Strapi
- Contentful
- Sanity.io
- Ghost (Headless mode)
- Netlify CMS / Decap CMS (Git-based CMS)
Benefits of Using a Headless CMS with an SSG
1. Non-Technical User-Friendly: Your team or clients can write, edit, and publish content without ever touching Markdown or Git.
2. Omnichannel Content: The same content from your headless CMS can feed a website, a mobile app, or an email newsletter.
3. Keep Static Site Benefits: You still get the speed, security, and hosting benefits of a static site because the SSG fetches the data at build time and compiles it into static HTML.
Summary
Static site generators are a great middle-ground between complex CMSs and raw HTML:
- They allow you to write content in simple Markdown.
- They compile pages quickly without database lookups.
- They’re cheap (or free) to host.
- They’re ultra-fast and secure.
- Paired with a Headless CMS, they allow non-technical users to manage content without sacrificing speed or security.
Building a static site from scratch gives you a clean codebase and total control over your design, performance, and features.
`
}
]
}
]
export const POSTS = [
{
slug: “introduction-to-react-hooks”,
date: “2023-01-15”,
summary: “Learn the basics of React Hooks and how they can simplify your state management in functional components.”,
readingTime: 3,
tag: “REACT”,
draft: false
},
{
slug: “mastering-css-grid”,
date: “2023-02-20”,
summary: “A comprehensive guide to CSS Grid, from basic concepts to advanced layout techniques.”,
readingTime: 4,
tag: “CSS”,
draft: false
},
{
slug: “getting-started-with-nextjs”,
date: “2023-03-10”,
summary: “Discover the power of Next.js for server-side rendering, static site generation, and building fast React applications.”,
readingTime: 5,
tag: “NEXT.JS”,
draft: false
},
{
slug: “deep-dive-into-typescript”,
date: “2023-04-05”,
summary: “Explore the advanced features of TypeScript and how it can help you write more robust code.”,
readingTime: 6,
tag: “TYPESCRIPT”,
draft: false
},
{
slug: “web-accessibility-best-practices”,
date: “2023-05-12”,
summary: “Make your web applications accessible to all users with these best practices and guidelines.”,
readingTime: 4,
tag: “ACCESSIBILITY”,
draft: false
},
{
slug: “state-management-with-redux-toolkit”,
date: “2023-06-18”,
summary: “Simplify your Redux state management logic with Redux Toolkit’s powerful utilities.”,
readingTime: 5,
tag: “REDUX”,
draft: false
},
{
slug: “modern-authentication-oauth-jwt”,
date: “2023-07-22”,
summary: “Understand the fundamentals of OAuth 2.0 and JSON Web Tokens (JWT) for securing web applications.”,
readingTime: 6,
tag: “SECURITY”,
draft: false
},
{
slug: “building-microservices-nodejs-docker”,
date: “2023-08-30”,
summary: “Learn how to build scalable microservices using Node.js and deploy them with Docker containers.”,
readingTime: 7,
tag: “MICROSERVICES”,
draft: false
},
{
slug: “progressive-web-apps-from-scratch”,
date: “2023-09-14”,
summary: “Turn your web app into an installable, offline-capable Progressive Web App with service workers and web manifests.”,
readingTime: 5,
tag: “PWA”,
draft: false
},
{
slug: “optimizing-web-performance”,
date: “2023-10-01”,
summary: “Speed up your website by optimizing images, leveraging caching, minimizing JavaScript bundles, and more.”,
readingTime: 6,
tag: “PERFORMANCE”,
draft: false
},
{
slug: “demystifying-graphql”,
date: “2023-10-25”,
summary: “Understand how GraphQL simplifies API queries, resolves over-fetching, and compares with REST.”,
readingTime: 4,
tag: “GRAPHQL”,
draft: false
},
{
slug: “complete-guide-to-webpack”,
date: “2023-11-15”,
summary: “Demystify Webpack concepts like entry, output, loaders, and plugins to bundle your front-end assets.”,
readingTime: 5,
tag: “WEBPACK”,
draft: false
},
{
slug: “introduction-to-docker”,
date: “2023-12-05”,
summary: “Learn the basics of containerization, creating Dockerfiles, and managing multi-container setups with Docker Compose.”,
readingTime: 5,
tag: “DOCKER”,
draft: false
},
{
slug: “understanding-serverless-architecture”,
date: “2024-01-10”,
summary: “Explore the pros, cons, and use cases of serverless computing with AWS Lambda, Vercel, and Netlify.”,
readingTime: 4,
tag: “SERVERLESS”,
draft: false
},
{
slug: “power-of-tailwind-css”,
date: “2024-02-01”,
summary: “How utility-first CSS frameworks like Tailwind can speed up your styling workflow and maintain consistency.”,
readingTime: 3,
tag: “CSS”,
draft: false
},
{
slug: “introduction-to-cicd”,
date: “2024-02-28”,
summary: “Automate testing and deployment pipelines using GitHub Actions to ship web apps faster and more reliably.”,
readingTime: 5,
tag: “DEVOPS”,
draft: false
},
{
slug: “database-indexing-explained”,
date: “2024-03-20”,
summary: “Understand how B-trees, hash indexes, and execution plans work to drastically speed up database queries.”,
readingTime: 6,
tag: “DATABASE”,
draft: false
},
{
slug: “state-machines-with-xstate”,
date: “2024-04-12”,
summary: “Model complex UI states reliably and prevent impossible application states using finite state machines.”,
readingTime: 5,
tag: “JAVASCRIPT”,
draft: false
},
{
slug: “mastering-git-advanced-workflows”,
date: “2024-05-02”,
summary: “Level up your Git skills with interactive rebasing, cherry-picking, bisecting, and managing submodules.”,
readingTime: 6,
tag: “GIT”,
draft: false
},
{
slug: “websockets-vs-sse”,
date: “2024-05-25”,
summary: “Compare real-time communication protocols to choose the right technology for your chat apps, feeds, or dashboards.”,
readingTime: 4,
tag: “NETWORKING”,
draft: false
},
{
slug: “why-i-built-a-blog-with-a-static-site-generator”,
date: “2024-06-15”,
summary: “Exploring the reasons behind building a personal blog from scratch using a static site generator like Jekyll instead of a CMS or full-stack framework.”,
readingTime: 4,
tag: “STATIC SITES”,
draft: false
}
];
export function getPostBySlug(slug: string) {
return POSTS_CONTENT.find((post) => post.slug === slug);
}