DEV Community

Cover image for Add blog posts to personal site using DEV.to API, React and React hooks.
Carl-W
Carl-W

Posted on

Add blog posts to personal site using DEV.to API, React and React hooks.

I have recently been thinking of doing more blogging and with that also comes decisions around the technology which I want to power the endeavour.

I came up with a few points that was important to me:

  • Write posts in markdown.

If I want to move the content, then I don't want to spend time on formatting it.

  • One platform to distribute the content.

To extend my reach I want the content to be published at one or more, platforms which has traffic from developers. But, I also want the content available on my personal site. That means I want to publish to a platform that has an open API (bye bye medium)

  • As little effort as possible.

I don't want to handle hosting WP, or a full featured headless CMS somewhere. And I want writing the posts in a web interface without thinking about weird quirks.

Enter dev.to

  • The DEV.to API is open, which means If I post an article here I can get that content into my site without much effort.
  • Posts are written in markdown & handles images for me.
  • Already have heavy traffic from other developers.
  • It's free.

TLDR: The code

After visiting the docs site of dev.to I learned that getting the posts of a certain user was as easy as doing a GET request with a query parameter of the user.

Below is a curl command:



curl --request GET \
  --url 'https://dev.to/api/articles?username=ugglr'



Enter fullscreen mode Exit fullscreen mode

If you paste this link into a curl enabled terminal and switch out the username parameter you'll get the posts of that user.

I have implemented a function that does this in Javascript and using superagent. You could just as easy use Fetch or Axios, I just like superagent.

Get Posts Function



// function for getting my blog posts from dev.to.
const getPosts = async () => {
  const DEV_TO_URL = "https://dev.to/api/articles"

  try {
    const result = superagent
      .get(DEV_TO_URL)
      .query({ username: "ugglr" })
      .then(res => {
        return res.body
      })
    return result
  } catch (error) {
    console.log("WE HAVE FETCH POST ERROR", error)
  }
}


Enter fullscreen mode Exit fullscreen mode

You could store that in a file and export the function to share between components, or just keep it in the same file as the consuming component.

Adding the posts to your site

I have just done the most simple version where I link to the post and redirect the user if they want to read more.



################## React Blog Component ###################

const Blog = () => {

  /* initialising the state which will hold the posts information
     and the loading state, so we can have a loading placeholder on
  */ our site.

  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)

  /*
     Use effect is the old lifecycle equivalent of ComponentDidMount()
     With the added empty array in the second parameter, this will run
     once when the component mounts. 
  */ 

  useEffect(() => {
    getPosts().then(res => {
      // I like to print so I know where things are happening
      console.log("IN USE-EFFECT", res)
      // Set the state using hooks syntax 
      setPosts(res)

      // Set loading to false
      setLoading(false)
    })
  }, [])

  // Print the data for easy debugging
  console.log("Posts state", posts)

  return (
      <div>
        {/* If we are loading, show loading placeholder */}
        {loading && <h1>loading posts...</h1>}

        {/* If we have loaded the posts display them */}
        {!loading &&
          posts.map(post => {
            return (
              <Card
                imageSrcPath={post.cover_image}
                title={post.title}
                date={post.published_at.slice(0, 10)}
                description={post.description}
                leftButtonText="Read More"
                sourceURL={post.canonical_url}
              />
            )
          })}
      </div>
  )
}

export default Blog


Enter fullscreen mode Exit fullscreen mode

Here's how it looks on my site.

Alt Text

In my opinion this method is hard to beat for a small personal devloper portfolio page. It's like a headless CMS, it's free, and offers more exposure.

Hope someone will find it useful, thanks for reading!

Top comments (5)

Collapse
 
harshitself profile image
Harshit Bhardwaj

Hey #carl-w i want to make a portfolio website where i want to add a blog section to write some blog .
But i got some questions like:-
1.)do we need to build an API to manage our blogs.
2.) Can i make a dashboard which is only accessible to me which provides a good interface to write blogs and adds automatically new data to my api.

Collapse
 
ugglr profile image
Carl-W
  1. It depends. You can use markdown files and a static site generator like Gatsby or Next.js for this as well. If I was building my own blog thats probably what I would do.
  2. Yes you can build this if you want, or you can manage it some other way, the sky is the limit here.

My general recommendation is to figure out your goals. Are you trying to deepen your techincal skills by building, or are you more interested in shipping the product. Those are questions only you can answer and when you have a clear picture of what you want to acomplish you can pick the correct technical solution for you.

Collapse
 
harshitself profile image
Harshit Bhardwaj

Thank you so much..

Collapse
 
bolt04 profile image
David Pereira

Great post Carl 👍, it's a very good idea to have your own personal website and post your blog post in both places.

Collapse
 
ugglr profile image
Carl-W

Thanks for reading XD