React Blog

React + Github Issues 👉 Your Personal Blog 🔥

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

🔥 Features

✅ 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

🔗 Live Demo

Here's a live demo

Github Issues / Blogs

🚀 Get Up and Running in 10 Minutes

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

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

1. From your command line, clone and run react-blog-github:

# 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

2. Generate a Github Personal Access Token.

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

3. Change `/src/config.js`.

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"
  
};

4. Write A 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.