loading...
Cover image for I Created My Blog Using DevTo api and React Js๐Ÿ’›, Here is how to...

I Created My Blog Using DevTo api and React Js๐Ÿ’›, Here is how to...

hemant profile image Hemant Joshi ๐Ÿ˜ผ Updated on ใƒป2 min read
Hii๐Ÿ‘‹

I created my Blog using Dev.to API and React with Redux, which fetched the blog posts.


Recently I thought of creating a blog for me and I was already in Dev.to, so I thought of making custom changes to my blog and got to know of Dev.to APIs and built a Simple but Cool Blog.

https://hemant-blogs.netlify.app/

Here is the blog preview that I created but still, the blog is under progress and working on adding some cool features.

  1. Here is the Home Page for the blog app. Alt Text
  2. Here is the article banner which on click loads the Article. Alt Text
  3. The final one, the article screen. Alt Text

About the API Key.

https://dev.to/api/articles?username=hemant
The about API key fetches the articles home, which is shown in image 1


https://dev.to/api/articles/id
simply pick your article id from the home API key and replace the id in the articles API
example
https://dev.to/api/articles/397108

This is how the API Is used in this App.


Mention

The Article page is still under development.

Link To Blog App.
https://hemant-blog.netlify.app/

Also, the page is still not ready for mobile devices but works a bit fine on mobile devices.

Help?

I am currently looking if someone could help me with the styling or any kind of positive changes.

Feel free to make a Pull Request.

Below is the GitHub Repository

GitHub logo 8bithemant / Dev-Blogs

Hii, This is a blog Designed in React-Js, with Javascript and Love. App Fetches Your Blogs from Dev.to using Dev.to Api

Dev Blogs

Dev Blogs is built in React and Redux which is used to publish your Dev.to Blogs on a custom page.

GitHub pull requests

Deploy Netlify

Preview hemant-blog.netlify.app

To customize the blog according to your Dev user id simply follow the Readme (The Steps Below)

Getting Started?

Star the Repo and click the button here &gt Deploy to Netlify Button

Click on the above button and config with you Github in Netlify.

After successful netlify config.

Simply go to your profile which would have new Repo, and clone it to your local system

Visit the following folder after clone.

src/DevtoConfig.js

Then change the each section to your details Don't forget the https:// that is used for redirects

In your terminal

Run the following command in you terminal.

npm i && npm start or yarn && yarn start

Cheers You Blog is live on your System. And on localhost.

If you have any issues with already existing remotes, inโ€ฆ


How to create your Blog with this Module?

If you like to import and create your own blog, all you need to fork and star Dev.to Blog Repository, link below:

https://github.com/8bithemant/Dev-Blogs

After you fork, clone it to your system and type following command npm i or yarn

Below is the Folder you need to visit after forking.

src/action/homeAction.js

Which would look something like this.

Alt Text

Here, you just need to update line 11, with you Dev.to Username.

After a successful edit, it would look like.

https://dev.to/api/articles?username=Your_USERNAME

YAY
You are done, so simple? Just type the following command in your terminal
npm start or yarn start.

Cheers Your Own Dev.to Api Blog is live and can host it on Dev.to

Please go with the Readme.md too...

Contribution?

Hi, Thanks a lot to visit and showing interest please help me with the Blog, even a single word contribution is really appreciated and helpful, feel free to make a PR or make the issue,

About me?

Hii, I am Hemant Joshi an 18-year-old MERN stack developer.

Join the most helpful discord community for programmers -

Nlogn Community

Do follow me on twitter:๐Ÿ™‹โ€โ™‚๏ธ

Posted on by:

Discussion

markdown guide
 

You might be able to get some ideas/design cues from the stackbit Dev.to integration. The stackbit Devs have been really helpful, and you can find out how I did it from an article I wrote a little while ago :)

 

Hmm, would be helpful cause I am facing a bit of problems in my application๐Ÿ˜

 

I like the use case. I'm currently also writing a wrapper to the dev.to API in R, so you could use that for problem solving maybe too ๐Ÿ˜

Good work on your current project, and good luck on it's future ๐Ÿ˜€

Hmm, currently into your awesome Post๐Ÿ˜

 
 

Ohh sorry for that issue Zen,

I already mentioned above that the Article page is not ready yet but working on this, and this is a new issue I tacked
Thanks for bringing it to my sight.

Also if you have a way to fix this, feel free to make PR.

Thank you.

 

What if change URL from site.com/slug to site.com/#/slug? Like my blog mzaini30.js.org/#/install-aplikasi...

I don't know React. But, In Vue Router, I only set mode from history to hash.

Hmm, this would be a good one and will try to integrate GET with slug...

Thanks a lot, ZEN, fixed with requesting from slug and the article issue is hopefully resolved

Wow this is what I was trying from last 2 days and today I motivated to fix that and finally fixed

 

It's Really Useful. I am new to react and dev.to both.

 

Glad it help you๐Ÿ˜, feel free to open issue/ PR

Thank You.

 
 

I was actually looking for something like this. Great work.

 

Glad you fount it helpful ๐Ÿ˜
Thank you

 

I think when I clicked your link I got error like not found.