Add Dev.to posts to your static site in 20 lines of code

Context

I'm relatively new to writing for Dev.to, and am continually impressed by both this community and the content available within the site. 👍 Recently, I found the API interface that's available, which lets me access the content I write programmatically - interesting!

I also have an open-sourced personal site 🧑‍💻, where I use 11ty and Tailwind to generate a completely static site that I deploy on 🔥 Firebase Hosting.

So I set out to try and link the two by pulling the last 5 posts from Dev.to and putting them on the homepage of my personal site, in the most straightforward way that I knew how. The process for doing this can be found below, or at the GitHub template repo.

🧰 The Architecture

Note: I use 11ty to generate my static sites, so that's what I have used in the below architecture, but you may replace 11ty with whatever Static Site generator you prefer, just ensure you can pull data with JavaScript into your templates.

📂 Folder Structure

─ _source/
  ├── _data/
  |   └── devtoapi.js
  └── index.liquid
─ package.json

There are only 2 input files for this demo:

1. _data/devtoapi.js - The JavaScript module that calls the Dev.to API using Axios. (10 lines of code to actually pull the data)
2. index.liquid - The liquid template that shows the Dev.to posts on the index page. (10 lines of code to show the posts)

Ensure you have an initialised package.json file (or existing project). We only have 2 npm dependencies: axios and @11ty/eleventy - add them to your package.json file.

🧑‍💻 The Code

I did promise 20 lines of code, so here goes:

↩️ The API calls (10 lines)

_data/devtoapi.js

var axios = require("axios");
var api_url = process.env.DEVTO_APIURL || "https://dev.to/api/articles?username=ndsn";

module.exports = async () => {
  try {
    let response = await axios.get(api_url);
    return { feed: api_url, posts: response.data };
  } catch (e) {
    console.error(e.message);
  }
};

(Yes, there's a new line on line 3 but I'm counting it as 10 total!)

To make the API calls to the Dev.to API we need two key things:

• The JavaScript library Axios
• The correct Dev.to API Endpoint for articles.

From there, we export an asynchronous function that returns the API response as per 11ty's JavaScript Data File docs. At build time, 11ty calls this script and creates a collection object with the returned value(s) with the same name as the JavaScript file name.

🧾 Showing the posts (10 lines)

index.liquid

<ul>
  {% for item in devtoapi.posts limit:5 %}
    <li>
      <h3><a href="{{ item.url }}">{{ item.title }}</a></h3>
      <p>{{ item.description }}</p>
      <p>Categories: {{ item.tag_list | join: ', ' }}</p>
      <p>Published on {{ item.published_timestamp | date: "%A %e %B %Y at %I:%M%P" }}</p>
    </li>
  {% endfor %}
</ul>

Showing the posts is the simple case of creating a wrapper HTML structure (in this case I chose an unordered list), then using Liquid tags to output the data from the devtoapi.posts collection.

This is the collection that is created automatically by 11ty when it runs the devtoapi.js data file.

🎉 That's it!

To build and run:

npm install
npx @11ty/eleventy --input=_source --serve

The built index.html will be saved to the _site directory, and the --serve parameter will start a BrowserSync server to serve that folder.

Note: This will only fetch the posts at build time, therefore if you make a new post, you'll need to re-run the build!

🚀 Next Steps

If you already use 11ty for your static site, just add the above code into any of your templates and you're good to go.

Explore the API response to see which fields you could include in your template.

If you use another Static Site generator, you should be able to create a fairly lightweight wrapper around the API that you can use in your templates.

For the more advanced, you could even use a Dev.to API Key to call the /articles/me endpoint to get additional stats about your posts as well as the raw markdown of the content.

As mentioned above, this will only fetch posts at build time, so if you want to include new posts, you'll need to rebuild and re-deploy your site after the API updates. For the more adventurous, you could explore automating this process using Dev.to webhooks!

👨‍🦰 Let me know what you think!

• Have you used 11ty and JavaScript Data Files before?
• Have you put your Dev.to posts on your own site?
• Would you recommend a different way?

---

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?

Comments

[John "Fitzy" DeLancey]

Very cool! I'm JUST (I'm a bad dev) exploring the static blog/site idea. I typically prefer a ridiculously bloated backend or CMS. 🤣

I'll have to give 11ty a look, too. I'm THINKING I'm gonna start off with the Dev -> Stackbit -> Netlify stack to begin with though. Have you looked at that?

(The geek in me LOVES the idea of writing in MD and git committing my blog posts...)

[Tom Anderson]

I think the native Stackbit <--> Dev.to integration is awesome for those who just want to get up and running with a blog. The only thing that holds me back is not being able to build it from the ground up, which means it may have extra code-bloat that I don't need/want. (I'm a huge fan of the KISS Principle)

It may be useful to check out one of these 11ty tutorials: filamentgroup.com/lab/build-a-blog/ or keepinguptodate.com/pages/2019/06/...

They may give you a bit more of a "from the beginning" view on how 11ty approaches Static Site generation. Once you get to grips with the whole template --> content --> static page concept, adding data into the mix ( template --> data --> content --> static page(s) ) as above becomes a little easier!