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

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

ugglr profile image Carl-W ・3 min read

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'

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)
  }
}

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

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!

Posted on May 19 by:

ugglr profile

Carl-W

@ugglr

React / React Native Software Engineer, former Senior Robotics Hardware Engineer.

Discussion

markdown guide
 

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

 

Thanks for reading XD