Gatsby + Hashnode Headless CMS Blog Starter

Dive into the world of modern web development with this Gatsby-Hashnode-Headless Blog Starter Kit. Built on Gatsby and TypeScript, this starter kit integrates seamlessly with Hashnode's Headless CMS, enabling developers to leverage Hashnode's blogging platform for content management while customizing the blog's frontend with Gatsby.

Features

This starter kit comes with some amazing features -

• Auto deploy from Hashnode CMS
• Newsletter (third party)
• Minimal theme
• Deploy to any static site hosting - Github Pages, Netlify, S3, anything!
• Great SEO score on Chrome Devtools
• Generate Codelabs from markdown blogs
• Generate presentations from markdown blogs
• Publish the same file as a blog or a codelab or a presentation at one go!
• Much more to come!

🚀 Quick Start Guide

Creating Your Gatsby-Hashnode Blog

1. Initialize Your Gatsby Site

   Clone the starter kit and install dependencies to set up your Gatsby site integrated with Hashnode's Headless CMS.

   # Clone the Gatsby-Hashnode-Headless starter kit
   git clone https://github.com/xprilion/gatsby-hashnode-headless.git
   cd gatsby-hashnode-headless/
   yarn

2. Start Developing

   Launch your site's development server and begin crafting your blog.

   yarn dev

   Your blog is now running at http://localhost:8000! Navigate there to see your blog live. Edit src/pages/index.tsx to customize your site and watch updates in real-time.

3. Learn More

   Dive deeper into Gatsby and Hashnode to enhance your blog further:

   • Gatsby Documentation
   • Hashnode Headless CMS
   • TypeScript in Gatsby

Deploying on GitHub Pages

Prefer GitHub Pages for hosting? Follow these steps to deploy your Gatsby-Hashnode blog:

1. Prepare Your Site for GitHub Pages

   Adjust your gatsby-config.js to include the pathPrefix option set to your GitHub Pages URL segment (e.g., /blog for username.github.io/blog).

   module.exports = {
     // Other config options
     pathPrefix: `/blog`, // Adjust based on your GitHub Pages URL
   };

2. Build Your Site

   Generate a production build of your site, considering the pathPrefix.

   yarn build -- --prefix-paths

3. Deploy to GitHub Pages

   Use the gh-pages package to deploy your site to GitHub Pages.

   yarn add gh-pages --dev
   yarn deploy

   This command will build your site and push the generated files to the gh-pages branch of your repository.

Congratulations 🎉! You've successfully set up and deployed your Gatsby-Hashnode blog on GitHub Pages. Visit your GitHub Pages URL to see your blog live.

Found an issue?

If you have found an issue or bug, please create an issue.

If it's a quick fix, such as a misspelled word or a broken link, feel free to skip creating an issue. You can create a pull request directly.

📚 Resources

• APIs and Custom Development: Leverage Hashnode's public GraphQL APIs for advanced customizations.
• Support and Community: Join the Hashnode community on Discord for discussions, support, and to connect with other bloggers.

Embark on your blogging journey with the Gatsby-Hashnode-Headless Blog Starter Kit, and unlock the full potential of modern web development for your blogging platform.