Gatsby Snyung Starter

Gatsby Snyung Starter is a Gatsby blog starter template, built on the official gatsby-starter-blog, that produces a static blog site with SCSS styling, automated post scaffolding, and GitHub-linked comments.

What is Gatsby Snyung Starter?

Gatsby Snyung Starter is a static blog starter for Gatsby that takes markdown content and metadata and generates a deployable blog site. It runs on the Gatsby framework and is maintained by SeonHyungJo (sNyung). It extends the official gatsby-starter-blog with SASS/SCSS, Utterances comments, pagination, React Helmet SEO, and a name-card metadata system.

Key Features

• SASS/SCSS styling — The template uses SASS/SCSS for styling instead of plain CSS, giving you variables, mixins, and nested rules out of the box.
• Utterances comments — Adds the Utterances widget, which stores comments as GitHub issues on your repository.
• Pagination — Includes built-in pagination for blog post listings, so you don't need a plugin.
• React Helmet — Comes with React Helmet for managing document head metadata like title, description, and Open Graph tags.
• Name card system — A meta-data directory with nameCard.json and tabList.json lets you edit your profile card and navigation tabs in one place.
• Automated post generation — Running npm run generate starts an interactive CLI that prompts for a title, post type (post or article), and comma-separated tags to scaffold a new post.
• Resume page — A dedicated resume directory at contents/aboutme is included for an about-me/resume page.

Who is it for?

• Developers starting a personal blog — use the starter to get a Gatsby blog with SCSS and SEO running in a few commands.
• Writers who want comment support — benefit from Utterances, which ties comments to GitHub issues without a third-party service.
• Portfolio/resume seekers — use the included contents/aboutme resume page and name card JSON to present a profile.
• Gatsby learners — can study a small, real-world starter built on the official gatsby-starter-blog.

What can you do with Gatsby Snyung Starter?

• Quickly scaffold a blog — run npx gatsby new my-blog-starter https://github.com/seonhyungjo/gatsby-snyung-starter to create a site.
• Generate posts from the terminal — run npm run generate and answer prompts for title, type, and tags to create new markdown posts.
• Customize your profile card — edit nameCard.json and tabList.json in the meta-data directory to change the displayed name, links, and navigation.
• Deploy to Netlify — the demo site runs on Netlify and the README links to a Netlify deploy status badge.

How does Gatsby Snyung Starter work?

The template is installed with the Gatsby CLI, then you add content and metadata. After installation, you run npm run generate to interactively create a new post, or write markdown files, and edit the JSON files in meta-data for site-wide info. The Gatsby build outputs a static site ready to deploy to any static host.

FAQ

Is Gatsby Snyung Starter free?

Yes, it is released under the MIT license, so you can use and modify it freely. The starter is open source on GitHub.

How do I create a new post?

Run npm run generate in the project directory. The CLI asks for a blog post title, the type (post or article), and comma-separated tags, then creates the post file for you.

Does it support comments?

Yes, it integrates Utterances, which loads comments from GitHub issues. You will need a public GitHub repository for Utterances to work.

Can I deploy it to Netlify?

Yes. The demo site is hosted on Netlify, and the README includes a Netlify deploy status badge, so you can deploy via the Netlify CLI or GitHub integration.