Add Dev.to posts to your static site in 20 lines of code
Tags: webdev, eleventy, tutorial, jamstack
Published: 2020-08-02 18:14:57

---
description: Add your latest Dev.to posts 🧾 to your own site using 11ty and JavaScript Data Files in just 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 🧑‍💻](https://github.com/Driminary/thomas-anderson.net), 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](https://github.com/Driminary/devto.ndsn.io).

## 🧰 The Architecture

> *Note: I use [11ty](https://11ty.dev) 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.*

![Architecture](https://i.ibb.co/6n6j5nG/devto-architecture.png)

### 📂 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`
```JavaScript
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](https://github.com/axios/axios) 
* The correct Dev.to [API Endpoint for articles](https://docs.dev.to/api/#tag/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`
```html
<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](https://shopify.github.io/liquid) 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:

```bash
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](https://dev.to/api/articles?username=ndsn) 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](https://docs.dev.to/api/#operation/createWebhook)!

## 👨‍🦰 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](https://www.thomas-anderson.net/?utm_source=devto)
*Liked something I did and want to help me out?*
[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-orange?logo=Buy%20Me%20A%20Coffee&logoColor=white)](https://www.buymeacoffee.com/ndsn)