Developer blog with dev.to as your backend/CMS

TLDR

Fork this repo github.com/gautemo/blog-devto-backend and change the username to yours on dev.to in script/app.js. Now you got your very own developer blog! 🥳

The idea

So you want your own developer blog. The reasons are many;

• Share your knowledge, help other
• Document what you learn for your future self to look back on
• You will learn the subject better
• Boost your career and market yourself

Where do you start?

There are so many options and they all require different time, skills to learn or money put into it.

You could write every article in HTML. This is the way I started. This works fine and you can write extra code to add functionality if an article requires it. Like this one where you can switch to dark mode. But I can tell you, it is cumbersome to edit and manage your blog articles after a while.

Wordpress or other content management systems is another simple solution. But can you customize the site to how you like it and show code snippets? Is the free plan enough for you or would you need to pay money?

Do you create a headless content management system with products such as Gridsome, Gatsby, Sanity and/or Strapi? This might be a very good option, but it sounds like a lot of work and investigation on which products to choose.

Create everything from scratch with your own database? That's probably the most work to reach your goal.

Use dev.to to create articles and use their API to show the articles on your own blog. This is a simple, yet very good option which this article will be about. dev.to is created to write developer articles, so it's easy to edit, add images and code blocks. Code blocks are important, so the code is highlighted and readers can copy the code.

Let's get started

First, we are going to create a home page, which lists out every blog we have written.

We will use the endpoint:

curl https://dev.to/api/articles?username=gautemeekolsen

In our index.html file, we have a ul element which we will populate with our blog items using the template.

<ul id="blog-list"></ul>

<template id="blog-item">
    <li>
        <a class="url">
            <img class="cover" alt="cover image">
            <h3 class="title"></h3>
        </a>
    </li>
</template>

Then the app.js will fetch the API and loop over the articles to add them to the list in the DOM. (You could simplify the code with some framework, such as Vue.js, but I don't feel it's necessary when so little code is needed.)

const username = 'gautemeekolsen' //change this to your own

const getArticles = async () => {
    const response = await fetch(`https://dev.to/api/articles?username=${username}`);
    const data = await response.json();
    for(article of data){
        addArticle(article);
    }
}

const addArticle = article => {
    const template = document.querySelector('#blog-item');
    const clone = template.content.cloneNode(true);
    clone.querySelector('.title').textContent = article.title;
    clone.querySelector('.url').href = `article.html?id=${article.id}`;
    clone.querySelector('.cover').src = article.cover_image;
    document.querySelector('#blog-list').appendChild(clone);
}

With some styling our landing page is now done! Complete code is at index.html, app.js, style.css, and home.css.

On to the article page. To get a specific article we will use the endpoint:

curl https://dev.to/api/articles/259798

The article.html file will have the elements for the cover image, title and article body.

<article>
    <img id="cover" alt="cover image">
    <h1 id="title"></h1>
    <div id="article-body"></div>
</article>

Which are populated from the article.js

const searchParams = new URLSearchParams(location.search);
const id = searchParams.get('id');

const response = await fetch(`https://dev.to/api/articles/${id}`);
const data = await response.json();

document.querySelector('#title').textContent = data.title;
document.querySelector('#cover').src = data.cover_image;
document.querySelector('#article-body').innerHTML = data.body_html;

But now we are missing the code highlighting from dev.to.
You can add code highlighting in dev.to articles by adding the file extension after three backticks like this

```js
console.log('hi friend');
```

To get the same highlighting on our site, we will take the css dev.to is using from their github github.com/thepracticaldev/dev.to. You could use an online Sass compiler to get the css, since we have not set up our project with Sass.

With some more styling, our article page is now done. Complete code is here article.html, article.js, style.css, article.css, and devto.css.

Conclusion

That's how quickly you can have your own developer blog up and running, which is easy to manage. Of course, your articles will be posted on dev.to and you rely on their API, which could be an uncertainty.

All you need to do is fork my GitHub repository, change it to your username in app.js, write articles on dev.to and host your blog on i.e. GitHub Pages, Netlify or Firebase. Also, maybe change the styling if you want your own theme.

I don't know if you are reading this on dev.to or on my blog. But to demonstrate you can see the same article in these two places;
dev.to/gautemeekolsen/developer-blog-with-dev-to-as-your-backend-cms-542n and
gautemo.github.io/blog-devto-backend/article.html?id=276324.

Comments

[rhymes]

Nice work Gaute! Love all the approaches of taking advantage of DEV's API :)
Also love the resulting UI you coded :)

You might also be interested in knowing that we have a partnership with Stackbit to generate a blog from a user DEV's posts, you can start from dev.to/settings/integrations

For a lot of detail you can check this post:

You can now generate self-hostable static blogs right from your DEV content via Stackbit

Ben Halpern ・ Sep 26 '19 ・ 4 min read

#meta #projectbenatar #webdev #changelog

[Gaute Meek Olsen]

Thank you!

I did not know, thanks for sharing this 😃

[Kalaiarasan Pushpanathan]

I forked the repo today and this is great as it has no dependencies with any external tool as such to maintain. FYI - If the person is not having website URL in the dev.to profile, article page is breaking and is only displaying article titles when clicked.

[Gaute Meek Olsen]

Thank you for the comment and thank you so much for letting me know :) The GitHub repo is updated now.

[Gaute Meek Olsen]

This is how you can do it with Vue. Just look at how simple this component is:

<template>
    <article>
        <h1>{{title}}</h1>
        <img :src="coverImg" alt="cover image" v-if="coverImg">
        <div v-html="bodyHtml" class="content"></div>
    </article>
</template>

<script>
export default {
    data: () => ({
        title: '',
        coverImg: '',
        bodyHtml: '',
    }),
    async created(){
        const response = await fetch(`https://dev.to/api/articles/${this.articleId}`)
        const data = await response.json();
        this.title = data.title;
        this.coverImg = data.cover_image;
        this.bodyHtml = data.body_html;
    },
    props: { articleId: String }
}
</script>

If you are using scoped css, remember to use >>> to break scoped css. Like this:

.content >>> .highlight {
  background: #29292e;
  color: #f8f8f2;
}

This is how I did it hosting my article here as well, gaute.dev/dev-blog/developer-blog-...

[Tegar]

thank you. i've been looking for a simple way to add blog to my site.

[Gaute Meek Olsen]

Happy to be able to help 🤗

[Ali Hussain Dhuniya]

great post. Thanks

[spiritupbro]

would be cool if you add medium also so we can have benefit of both world but very cool work btw

[Gaute Meek Olsen]

Yes, thank you for the suggestion! Maybe I will look into that in the future. Their API looks a little more complicated though, needing an access token to acquire the authorId.

[Wiley Marques]

I'd use some framework to help with SEO, but the idea is awesome!

Thanks for sharing!