Coding a Custom CMS: Connecting Dev.To and Astro

#webdev #astro #showdev #api

Writing articles is a massive boost for your networking and becomes a strong competitive edge. You get to prove your experience while materializing and sharing the knowledge you have acquired. It is undoubtedly an effort that brings great results. For these and many other reasons, I have always really enjoyed crafting well elaborated posts here.

Recently I finally built my personal blog (which was always a dream of mine) in my very own style. I quickly realized that manually copying and pasting posts violated one of the golden rules of programming: Don't Repeat Yourself (DRY). Plus, it would be boring manual effort that I would have to do every single time a new post came out.

After doing a bit of research, I saw it was possible to use Dev.To as a sort of backend. The correct technical term for this is Headless CMS (Content Management System). Their public API allows you to pull everything automatically during the build time of my static site. I want to share a bit of this process with you guys (already excited knowing this very post will be automatically mirrored on my site too hehe).

I need to quickly mention Astro. It is an amazing framework that helps build page interfaces by delivering pure and absurdly fast static HTML from markdown files.

I will tell you right now that the result was incredible. But what is even more amazing is how simple the API approach actually is. You do not need a token or any complex authentication to list public articles. I thought this was brilliant. Thinking about it, it almost feels like it was all architected specifically for this.

Astro makes consuming external APIs directly at build time incredibly easy. I even set aside a code snippet to illustrate how we do the fetch call (which is the on-demand search for posts). Notice that I created a little tag system. Articles made exclusively for the site receive the [LOCAL] tag, while imported texts get the [DEV.TO] badge.

---
// Astro magic: this code only runs at build time (server-side)
const devToEndpoint = 'https://dev.to/api/articles?username=patrocinioluisf&per_page=30';
const responseData = await fetch(devToEndpoint);
const externalArticles = await responseData.json();

function renderOriginTag(isExternal) {
    return isExternal ? '[DEV.TO]' : '[LOCAL]';
}
---

<!-- And right below, the HTML consumes the data natively -->
<section class="brutalistContainer">
  <h2>My Articles</h2>
  <ul class="articleList">
    {externalArticles.map((article) => (
      <li class="articleItem">
        <span class="sourceTag">{renderOriginTag(true)}</span>
        <a href={article.url} target="_blank">
          {article.title}
        </a>
      </li>
    ))}
  </ul>
</section>

It's... Magic!

The coolest part for me is that once this mechanism is set up, you can simply keep writing posts on Dev.To without a single worry. The published texts will beautifully appear on my site without me having to do anything else.

This is one of the greatest beauties of programming in my opinion. Developing an automation for repetitive tasks might consume time and effort upfront. However, in the long run, it gives us way more time to focus on what truly matters (creating games, delivering quality classes, and writing articles hehe).

Now I bet you are curious. Do you want to see how this code transformed into a lightning-fast and distraction-free interface? Access my new Personal Hub at patrodev.com and check out the development logs in the Blog tab. Feel free to explore!

DEV Community

Coding a Custom CMS: Connecting Dev.To and Astro

Top comments (0)