DEV Community

Cover image for Developer blog with as your backend/CMS
Gaute Meek Olsen
Gaute Meek Olsen

Posted on • Updated on • Originally published at

Developer blog with as your backend/CMS


Fork this repo and change the username to yours on 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 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. 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:

Enter fullscreen mode Exit fullscreen mode

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">
        <a class="url">
            <img class="cover" alt="cover image">
            <h3 class="title"></h3>
Enter fullscreen mode Exit fullscreen mode

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(`${username}`);
    const data = await response.json();
    for(article of data){

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=${}`;
    clone.querySelector('.cover').src = article.cover_image;
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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

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

Which are populated from the article.js

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

const response = await fetch(`${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;
Enter fullscreen mode Exit fullscreen mode

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

console.log('hi friend');

To get the same highlighting on our site, we will take the css is using from their github 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.
Alt Text


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 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 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 or on my blog. But to demonstrate you can see the same article in these two places; and

Top comments (12)

rhymes profile image

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

For a lot of detail you can check this post:

gautemeekolsen profile image
Gaute Meek Olsen

Thank you!

I did not know, thanks for sharing this 😃

iamkalai profile image
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 profile, article page is breaking and is only displaying article titles when clicked.

gautemeekolsen profile image
Gaute Meek Olsen

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

gautemeekolsen profile image
Gaute Meek Olsen

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

        <img :src="coverImg" alt="cover image" v-if="coverImg">
        <div v-html="bodyHtml" class="content"></div>

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

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,

alidhuniya profile image
Ali Hussain Dhuniya

great post. Thanks

tegvr profile image

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

gautemeekolsen profile image
Gaute Meek Olsen

Happy to be able to help 🤗

spiritupbro profile image

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

gautemeekolsen profile image
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.

safbalili profile image
Josafe Balili

Was thinking on separating my personal and technical blogs, then I saw your post. This will be a great help. Thank you.

wilmarques profile image
Wiley Marques

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

Thanks for sharing!