gatsby-starter-hoodie

gatsby-starter-hoodie is an open-source Gatsby starter created by developer devHudi for building developer-focused tech blogs that render Markdown posts with code highlighting, KaTeX math, and Giscus comments.

What is gatsby-starter-hoodie?

gatsby-starter-hoodie is a Gatsby 5 starter template (migrated to Gatsby 5 on 2023-06-30) that takes Markdown files as content and produces a static blog site with tag and series categorization. It is built to run on Node.js 20 and requires the Gatsby CLI to scaffold a new project. The starter is inspired by the Korean blogging platform velog and includes a live demo hosted on Netlify.

Key Features

• Markdown support — Write posts as Markdown files in the contents/posts directory; the starter renders them with syntax highlighting for multiple programming languages.
• KaTeX math syntax — Render LaTeX-style mathematics inline and in display mode inside Markdown.
• Dark mode — Automatically responds to the operating system's color scheme settings.
• Tag and series categorization — Organize articles into tags and multi-part series from front matter or config.
• Giscus comments — Adds GitHub Discussion-based comments by configuring the giscus block in blog-config.js.
• Responsive web design — Layout adapts to desktop and mobile viewports.
• SEO support — Includes built-in metadata handling for search engines.
• Deployment scripts — Ships with npm run deploy-gh and npm run deploy-gh-prefix-paths for GitHub Pages deployment, and works with Netlify or any static host via npm run build.

Who is it for?

• Developers who write technical blog posts — publish tutorials and notes with code blocks and math formulas without building a blog from scratch.
• Open-source maintainers — document projects in a Markdown-driven blog and add Giscus-based GitHub discussions for community feedback.
• Students and researchers — share study notes containing LaTeX math (KaTeX) and code examples with dark mode for late-night reading.

What can you do with it?

• Publish a personal tech blog: create a new Gatsby site with npx gatsby new my-hoodie-blog https://github.com/devHudi/gatsby-starter-hoodie, then edit blog-config.js for title, description, author, social links, and Giscus settings.
• Deploy to GitHub Pages: run npm run deploy-gh when the repository name is yourname.github.io; otherwise run npm run deploy-gh-prefix-paths after setting pathPrefix in gatsby-config.js.
• Deploy to Netlify or any static host: connect the repository and it auto-deploys on push, or run npm run build and host the /public output directory.

How does it work?

The README walks through seven steps: create a Gatsby site with the starter, start the dev server with npm run start, create a GitHub repository for Giscus, write blog-config.js with blog and comment settings, add Markdown content to contents/posts, deploy, and optionally customize the theme and components in src/assets/theme, src/components, and src/templates.

Pricing

Free — gatsby-starter-hoodie is an open-source GitHub project with no paid tiers or premium features listed in its README.

Alternatives

• gatsby-starter-lumen — another Gatsby starter that appears in the README's Netlify one-click deploy button URL, aimed at minimalist blogs.

FAQ

Does gatsby-starter-hoodie support dark mode?

Yes. Dark mode is a built-in feature that activates automatically based on the operating system's color scheme settings (light or dark), so no manual toggle is required.

What comment system does gatsby-starter-hoodie use?

It uses Giscus, which is a comments widget powered by GitHub Discussions. You must provide your own GitHub repository and configure its repo, repoId, category, and categoryId in the giscus block of blog-config.js.

Which version of Gatsby does it use?

As of 2023-06-30, gatsby-starter-hoodie was migrated to Gatsby 5. The starter also requires Node.js 20 to run.

How do I deploy to GitHub Pages?

Run npm run deploy-gh if your repository is named yourname.github.io. For any other repository name, run npm run deploy-gh-prefix-paths and first set the pathPrefix in gatsby-config.js to your repository name.

Does it support math formulas?

Yes, KaTeX syntax is supported, so you can write and render LaTeX-style math expressions directly in your Markdown posts.