Skip to content

saadpasta/react-blog-github

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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
βœ… View Comments
βœ… 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

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

# Clone this repository
$ git clone https://github.com/saadpasta/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. Create a GitHub App

Go on the following URL: https://github.com/settings/apps/new

There are a few fields to fill carefully:

In permissions & events, set Read & Write on Issues In "Install App", install the app on your user and select your repository

4. 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 To Know How To Get Your Token Look at Readme.md
  githubConvertedToken: "Your token here",

  // Your Github UserName
  githubUserName: "Your username here",

  // Your Github Repo Name Where You Have your issues as Blog
  githubRepo: "Your repo's name here",

  // Set it to true if you have a Github app to add to this project
  // and fill the client ID & secret
  enableOAuth: true,
  OAuthClientID: 'Github App Client ID',
  OAuthSecret: 'Github App Secret',

  // Your Personal Blog Title
  title : "Title of your blog" ,

  // Your Personal Blog Subtitle
  subtitle : "Subtitle of your blog",

  // Header customization
  header: {
    backgroundColor: '#f1f6f8', // can be a CSS gradient
    titleColor: '#ff5252',
    subtitleColor: '#37474f',
  },
};

5. 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.

6. Start Your React App.

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

# Run
$ npm start

πŸ› οΈ Technologies used

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

🌱 Inspiration

This project is inspired from many other similar projects.

🀝 Contributing

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!

πŸ’₯ Todo

  • Add Comment From Github
  • Authentication using Github
  • Footer
  • Header
  • Social Media Sharing

πŸ“„ License

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):


SyedMuhammadHammadGhani

πŸ“–

Saad Pasta

πŸ’» πŸ“– 🎨 🚧

Jason Van Malder

πŸ’» πŸš‡

Slim Coder

πŸ’»

waleed345

πŸ’»

Abhishek Kashyap

πŸ’»

Zebra

πŸ’» πŸ€”

Jaeyeon Kim

πŸ’»

Parthiv

πŸ“–

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