DEV Community

Developer blog with dev.to as your backend/CMS

Gaute Meek Olsen on March 07, 2020

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 ...

Read full post

rhymes • Mar 16 '20

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 • Mar 17 '20

Thank you!

I did not know, thanks for sharing this 😃

Kalaiarasan Pushpanathan • Apr 4 '20

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 • Apr 4 '20

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

Gaute Meek Olsen • Mar 18 '20

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-...

spiritupbro • May 9 '20

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

Gaute Meek Olsen • May 10 '20

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.