React Blog is a personal blog system build on React that helps you create your own personal blog using Github Issues

✅ Own your content
✅ Write using Markdown On Github Issues
✅ Syntax/Code Highlighting
✅ Fully customizable
✅ Tags - Topics
✅ Links
✅ Reactions
✅ Images
✅ Minutes Read
✅ Beautiful UI Like Medium
✅ Easy deployment: Using Github Pages
✅ Instant Effects on Blog when changing github issues
✅ Beautiful blockquote

Here's a live demo

Github Issues / Blogs

You can get a react-blog site up and running on your local dev environment in 10 minutes with these five steps:

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer

[email protected] or higher
[email protected] or higher
[email protected] or higher

# Clone this repository
$ git clone https://github.com/username/react-blog-github.git

# Go into the repository
$ cd react-blog-github

# Install dependencies
$ npm install

Generate a Github personal access token using these Instructions Make sure you don't select any scope just generate a simple token without any scope

After that copy your generated token and then encode your token into base 64 using this Website

Copy your base64 converted token

Go to your cloned repository and make the following changes in /src/config.js

export const config = {

  // Your Github Converted Token
  githubConvertedToken: "Github Converted Token",

  //   Your Github User Name
  githubUserName: "saadpasta",

  //   Your Github Repo Name Where You Have your issues as Blog

  githubRepo: "react-blog-github",

  // Your Personal Blog Title 

  title : "Saad Pasta" , 

  // Your Personal Blog Subtitle 

  subtitle : "Front End Developer Blog"
  
};

After doing following changes now you just need to write a blog on repository issues that you have mentioned in your config.js

• Open your repository github issues
• Create a new issue
• Now write your blog in github issue in markdown. You can also use slack edit to write your markdown
• Add a label blog on your github issue to make it different from other standard issues. Keep in mind blog label is mandatory otherwise it won't show on your website.

That's it now you just need to start your react application From your command line run .

# Run
$ npm start

This project is only possible thanks to the awesomeness of the following projects:

• React
• graphql
• apollo-boost
• GitHub
• markdown-to-jsx
• React Syntax Highlighter
• react-reactions

This project is inspired from many other similar projects.

• gatsby-theme-blog-with-github
• utterances

Any idea on how we can make this more awesome ? Open a new issue! We need all the help we can get to make this project awesome!

• Add Comment From Github
• Add Loader
• Authentication using Github
• Seo using React helmet
• Footer
• Header
• Social Media Sharing

This project is licensed under the MIT License - see the LICENSE.md file for details

Thanks goes to these wonderful people (emoji key):

SyedMuhammadHammadGhani 📖

Saad Pasta 💻 📖 🎨 🚧

Jason Van Malder 💻 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!