Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xprilion/gatsby-hashnode-headless
https://github.com/xprilion/gatsby-hashnode-headless
blog gatsby gql graph graphql hashnode hashnode-headless headless minimal typescript
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/xprilion/gatsby-hashnode-headless
- Owner: xprilion
- License: mit
- Created: 2024-02-02T04:09:39.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-03T05:56:36.000Z (12 months ago)
- Last Synced: 2024-11-04T01:41:58.190Z (3 months ago)
- Topics: blog, gatsby, gql, graph, graphql, hashnode, hashnode-headless, headless, minimal, typescript
- Language: TypeScript
- Homepage: http://gatsby-hashnode-headless.xprilion.com/
- Size: 2.93 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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.
```shell
# 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.
```shell
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](https://www.gatsbyjs.com/docs/)
- [Hashnode Headless CMS](https://hashnode.com/headless)
- [TypeScript in Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
### 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`).
```js
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`.
```shell
yarn build -- --prefix-paths
```
3. **Deploy to GitHub Pages**
Use the `gh-pages` package to deploy your site to GitHub Pages.
```shell
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](https://github.com/xprilion/gatsby-hashnode-headless/issues).
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](https://github.com/xprilion/gatsby-hashnode-headless/pulls) directly.
## 📚 Resources
- **APIs and Custom Development**: Leverage [Hashnode's public GraphQL APIs](https://gql.hashnode.com/) for advanced customizations.
- **Support and Community**: Join the Hashnode community on [Discord](https://discord.gg/hashnode) 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.