Concept: Including dev.to Posts in a Static Hugo Site

André Buse — Mon, 30 Oct 2023 19:25:27 +0000

Edit: I found a way more elegant solution. I will leave this post up for reference, but I won't actually implement this. Instead, I'll do it the other way round. I found out that dev.to can automatically import posts from RSS feeds, and Hugo can generate RSS feeds. So that feels way more natural and involves less code.

I am currently building a small personal website with Hugo and want to include a blog on it. However, just a static blog on my site won't allow people to comment or otherwise interact with it.

Idea and Motivation 💡

There are some awesome (self-hosted) open source blog systems that do allow interactions, but I don't want to go this route. I want to be able to connect with other developers easily, and also have better discoverability than just a website. This is where dev.to comes into play: It has an awesome community of developers! 🎉

So the plan is: Use my personal site to embed posts from dev.to (with linking back between them). This will achieve a few things that I find important:

I can use dev.to to connect with other developers
visitors of my website can easily see my content without having to leave the site
people that want to further engage can follow the link to the dev.to post

I personally don't mind that this will duplicate content. I think it's a good idea to have a mirror anyway. But I can see why some people wouldn't want that.

Planned Implementation 📝

I already have an idea on how to implement this. My personal website is made using Hugo, so the solution should neatly integrate into this.

Forem API

As you might know, dev.to is a Forem instance. Forem exposes a JSON API that can be used to query posts. For me the important endpoint is GET /api/articles which will give you published posts, optionally filtered by a given username parameter. Perfect!

Hugo Integration

How will I get this data into my static site? I sure could add some JavaScript to load the posts dynamically, but to be honest I prefer them to be static too. So instead, I will use Hugo to fetch the content automatically for me.

Hugo has a getJSON function which can fetch external data. When the static site is built, those resources are fetched so that the result can be used in the website templates.

This should be enough for my usecase. For more advanced scenarios I would use a Hugo Module.

GitHub Action

With the posts included in my static site, the only thing missing is some way to easily rebuild and deploy the static site whenever I create a new dev.to post. Therefore I will create a GitHub Action that does exactly this.

I won't automate this in the beginning since I want to keep track if everything works as expected. This will change once I'm sure that my code is running stable. GitHub has an API endpoint that allows triggering a Workflow, so I can use a dev.to webhook which triggers the CI for every new post. 🪄

Thanks for reading! ❤️

I hope you found this concept/idea interesting. The implementation will follow, however I needed a first post here on dev.to to test the API. So I thought, why not share the idea? That way I have a post to test my code with, plus other people can see what I'm working on!

I will probably post a new article once this project is working, including anything I learned along the way. ✨