DEV Community

loading...
Cover image for 🔥 Create your YOUR Personal Blog 📜  using Reactjs  ⚛️ & Github Issues in less than 10 min 🕐

🔥 Create your YOUR Personal Blog 📜 using Reactjs ⚛️ & Github Issues in less than 10 min 🕐

mrsaeeddev profile image Saeed Ahmad ・3 min read

This post features the work from my friend @saadpasta

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

Personal blog


Link : https://github.com/saadpasta/react-blog-github

🔥 Features

✅ Own your content
✅ Write using Markdown On Github Issues
✅ Syntax/Code Highlighting
✅ Fully customizable
✅ Tags - Topics

✅ Links
✅ Reaction
✅ Images
✅ Minutes Read
✅ Beautiful UI Like Medium
✅ Easy deployment: Using Github Pages
✅ 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/saadpasta/react-blog-github.git

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

# Install dependencies
$ npm install

2. Genrate a Github Personal Access Token.

Genrate 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 genrated 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.

5. 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
  • Add Loader
  • Authentication using Github
  • Seo using React helmet
  • Footer
  • Header
  • Social Media Sharing

📄 License

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

⭐ Also star my repo on GitHub to motivate me to do more open source Work...

👍 Thank you so much for reading this...

Discussion (18)

pic
Editor guide
Collapse
rodiongork profile image
Rodion Gorkovenko

That's cool idea!

To use issues as storage - very clever! :)

And free!

But it seems everyone can create issues - and thus add stuff to your personal blog? May I try?

Collapse
nombrekeff profile image
Keff

I'm developing something similar, and what I thought for this was, that the posts shown are just ones with a specified label, so even if people create issues, they will not appear in the Blog.

Collapse
rodiongork profile image
Rodion Gorkovenko • Edited

Is it correct that only repo owner can assign labels? Then it's solution, yes!

UPD, it also seems that now GitHub allows limitations on who can "interact with repository" - probably this also includes issues.

Thread Thread
nombrekeff profile image
Keff

Yup, definitely only owners and collaborators can add labels.

Collapse
joro550 profile image
Mark Davies • Edited

Hey, just mentioning that your clone link seems to be pointing to the wrong place :D

https://github.com/username/react-blog-github.git

otherwise, nice project you have there :P

Collapse
nombrekeff profile image
Keff

I was doing something similar man. You won me to it :P

Collapse
crycx profile image
crycx

I really like the fonts and the overall design :)

Collapse
jinglescode profile image
Jingles (Hong Jing)

Wow. Never thought of that. Make me wanna try it too.

Any downside to this as compared to the Jeykll way.

Collapse
jinglescode profile image
Jingles (Hong Jing) • Edited

Any idea if we can beautify the URL?
Particularly:

  • remove the "#"
  • form URL using regex remove non-alphanumeric, and replace space with dash, append issue ID at the end (e.g. react-blog-github-test-issue-3--2)

And how about SEO? Would there be any issues?

Collapse
codeprototype profile image
Kevin Le

This is great.

Collapse
ducdang profile image
Danny Dang

Wow that great idea!

Collapse
mzaini30 profile image
Zen

Comment system? Try using Disqus

Collapse
zenulabidin profile image
Ali Sherief

Nice library. Do you know if there is a React CMS that works with Github Pages, something like Wordpress?

Collapse
nombrekeff profile image
Keff

I suggest checking utteranc.es/ for the comments thread. It's already done for you ;)

Collapse
deepu105 profile image
Deepu K Sasidharan

Nice idea. Just a suggestion, don't put your personal access token on the repo, base64 can be decoded and it's not safe.

Collapse
jinglescode profile image
Jingles (Hong Jing) • Edited

If not, what another way?

And since theres no scope, it is fine right? Just read only, is it?

Collapse
phuocding profile image
phuocding

And how to deploy without push folder "build" on github pages?

Collapse
phuocding profile image