DEV Community

Cover image for Developer blog with dev.to as your backend/CMS

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 ...
Collapse
 
rhymes profile image
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:

Collapse
 
gautemeekolsen profile image
Gaute Meek Olsen

Thank you!

I did not know, thanks for sharing this 😃

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

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

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

Collapse
 
tegvr profile image
Tegar

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

Collapse
 
gautemeekolsen profile image
Gaute Meek Olsen

Happy to be able to help 🤗

Collapse
 
alidhuniya profile image
Ali Hussain Dhuniya

great post. Thanks

Collapse
 
spiritupbro profile image
spiritupbro

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

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

Collapse
 
wilmarques profile image
Wiley Marques

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

Thanks for sharing!