1import{_ as a,c as e,l as o,o as n}from"./chunks/framework.24cd38f4.js";const l="/images/dev-blog/developer-blog-with-devto/home.png",t="/images/dev-blog/developer-blog-with-devto/article.png",d=JSON.parse('{"title":"Developer blog with dev.to as your backend/CMS","description":"How to create your own developer blog using dev.to as your CMS.","frontmatter":{"title":"Developer blog with dev.to as your backend/CMS","date":"2020-03-08T00:00:00.000Z","description":"How to create your own developer blog using dev.to as your CMS."},"headers":[],"relativePath":"dev-blog/developer-blog-with-devto.md"}'),p={name:"dev-blog/developer-blog-with-devto.md"};function r(c,s,y,i,D,F){return n(),e("div",null,[...s[0]||(s[0]=[o(`<h2 id="tldr" tabindex="-1">TLDR <a class="header-anchor" href="#tldr" aria-label="Permalink to "TLDR"">â</a></h2><p>Fork this repo <a href="https://github.com/gautemo/blog-devto-backend" target="_blank" rel="noreferrer">github.com/gautemo/blog-devto-backend</a> and change the username to yours on dev.to in script/app.js. Now you got your very own developer blog! ð¥³</p><h2 id="the-idea" tabindex="-1">The idea <a class="header-anchor" href="#the-idea" aria-label="Permalink to "The idea"">â</a></h2><p>So you want your own developer blog. The reasons are many;</p><ul><li>Share your knowledge, help other</li><li>Document what you learn for your future self to look back on</li><li>You will learn the subject better</li><li>Boost your career and market yourself</li></ul><h2 id="where-do-you-start" tabindex="-1">Where do you start? <a class="header-anchor" href="#where-do-you-start" aria-label="Permalink to "Where do you start?"">â</a></h2><p>There are so many options and they all require different time, skills to learn, or money put into it.</p><p>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 <a href="https://gaute.dev/dev-blog/css-variables" target="_blank" rel="noreferrer">this one</a> 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.</p><p><a href="https://wordpress.com/" target="_blank" rel="noreferrer">Wordpress</a> 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?</p><p>Do you create a headless content management system with products such as <a href="https://gridsome.org/" target="_blank" rel="noreferrer">Gridsome</a>, <a href="https://www.gatsbyjs.org/" target="_blank" rel="noreferrer">Gatsby</a>, <a href="https://www.sanity.io/" target="_blank" rel="noreferrer">Sanity</a> and/or <a href="https://strapi.io/" target="_blank" rel="noreferrer">Strapi</a>? This might be a very good option, but it sounds like a lot of work and investigation on which products to choose.</p><p>Create everything from scratch with your own database? That's probably the most work to reach your goal.</p><p>Use <a href="https://dev.to/" target="_blank" rel="noreferrer">dev.to</a> to create articles and use their <a href="https://docs.dev.to/api/" target="_blank" rel="noreferrer">API</a> 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.</p><h2 id="let-s-get-started" tabindex="-1">Let's get started <a class="header-anchor" href="#let-s-get-started" aria-label="Permalink to "Let's get started"">â</a></h2><p>First, we are going to create a home page, which lists out every blog we have written.</p><p>We will use the endpoint:</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">
1curl</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">https://dev.to/api/articles?username=gautemeekolsen</span></span> 2<span class="line"></span></code></pre></div><p>In our <a href="https://github.com/gautemo/blog-devto-backend/blob/master/index.html" target="_blank" rel="noreferrer">index.html</a> file, we have a <code>ul</code> element which we will populate with our blog items using the template.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">blog-list</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span> 3<span class="line"></span> 4<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">blog-item</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span> 5<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span> 6<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span> 7<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">cover image</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 8<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">title</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">></span></span> 9<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">></span></span> 10<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span> 11<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span> 12<span class="line"></span></code></pre></div><p>Then the <a href="https://github.com/gautemo/blog-devto-backend/blob/master/script/app.js" target="_blank" rel="noreferrer">app.js</a> 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 <a href="https://vuejs.org/" target="_blank" rel="noreferrer">Vue.js</a>, but I don't feel it's necessary when so little code is needed.)</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
12<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> username </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">gautemeekolsen</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">//change this to your own</span></span> 13<span class="line"></span> 14<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> getArticles </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 15<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">response</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">fetch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">https://dev.to/api/articles?username=</span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">username</span><span style="color:#89DDFF;">}\`</span><span style="color:#F07178;">)</span></span> 16<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">data</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">json</span><span style="color:#F07178;">()</span></span> 17<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">article</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">of</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">data</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span> 18<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">addArticle</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">article</span><span style="color:#F07178;">)</span></span> 19<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 20<span class="line"><span style="color:#89DDFF;">}</span></span> 21<span class="line"></span> 22<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> addArticle </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">article</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 23<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">template</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#blog-item</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 24<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">clone</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">template</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">content</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">
24cloneNode</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span></span> 25<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">clone</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.title</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">article</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">title</span></span> 26<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">clone</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.url</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">href</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">article.html?id=</span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">article</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">}\`</span></span> 27<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">clone</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.cover</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">article</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">cover_image</span></span> 28<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#blog-list</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">clone</span><span style="color:#F07178;">)</span></span> 29<span class="line"><span style="color:#89DDFF;">}</span></span> 30<span class="line"></span></code></pre></div><p>With some styling our landing page is now done! Complete code is at <a href="https://github.com/gautemo/blog-devto-backend/blob/master/index.html" target="_blank" rel="noreferrer">index.html</a>, <a href="https://github.com/gautemo/blog-devto-backend/blob/master/script/app.js" target="_blank" rel="noreferrer">app.js</a>, <a href="https://github.com/gautemo/blog-devto-backend/blob/master/style/style.css" target="_blank" rel="noreferrer">style.css</a>, and <a href="https://github.com/gautemo/blog-devto-backend/blob/master/style/home.css" target="_blank" rel="noreferrer">home.css</a>.</p><p><img src="`+l+`" alt="Home page"></p><p>On to the article page. To get a specific article we will use the endpoint:</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">curl</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">https://dev.to/api/articles/259798</span></span> 31<span class="line"></span></code></pre></div><p>The <a href="https://github.com/gautemo/blog-devto-backend/blob/master/article.html" target="_blank" rel="noreferrer">article.html</a> file will have the elements for the cover image, title, and article body.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">article</span><span style="color:#89DDFF;">></span></span> 32<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">cover image</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 33<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">title</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span> 34<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">article-body</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span> 35<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">article</span><span style="color:#89DDFF;">></span></span> 36<span class="line"></span></code></pre></div><p>Which are populated from the <a href="https://github.com/gautemo/blog-devto-backend/blob/master/script/article.js" target="_blank" rel="noreferrer">article.js</a></p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
36<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> searchParams </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">new</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">URLSearchParams</span><span style="color:#BABED8;">(location</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">search)</span></span> 37<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> id </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> searchParams</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">id</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 38<span class="line"></span> 39<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> response </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">fetch</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">https://dev.to/api/articles/</span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">}\`</span><span style="color:#BABED8;">)</span></span> 40<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> data </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#BABED8;"> response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">json</span><span style="color:#BABED8;">()</span></span> 41<span class="line"></span> 42<span class="line"><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#title</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> data</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">title</span></span> 43<span class="line"><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#cover</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">src </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> data</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">cover_image</span></span> 44<span class="line"><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#article-body</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">innerHTML </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> data</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">body_html</span></span> 45<span class="line"></span></code></pre></div><p>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</p><pre>\`\`\`js 46console.log('hi friend'); 47\`\`\` 48</pre><p>To get the same highlighting on our site, we will take the CSS dev.to is using from their github <a href="https://github.com/thepracticaldev/dev.to/blob/master/app/assets/stylesheets/syntax.scss" target="_blank" rel="noreferrer">github.com/thepracticaldev/dev.to</a>. You could use an online <a href="https://www.sassmeister.com/" target="_blank" rel="noreferrer">Sass compiler</a> to get the CSS since we have not set up our project with Sass.</p><p>With some more styling, our article page is now done. Complete code is here <a href="https://github.com/gautemo/blog-devto-backend/blob/master/article.html" target="_blank" rel="noreferrer">article.html</a>, <a href="https://github.com/gautemo/blog-devto-backend/blob/master/script/article.js" target="_blank" rel="noreferrer">article.js</a>, <a href="https://github.com/gautemo/blog-devto-backend/blob/master/style/style.css" target="_blank" rel="noreferrer">style.css</a>, <a href="https://github.com/gautemo/blog-devto-backend/blob/master/style/article.css" target="_blank" rel="noreferrer">article.css</a>, and <a href="https://github.com/gautemo/blog-devto-backend/blob/master/style/devto.css" target="_blank" rel="noreferrer">devto.css</a>.</p><p><img src="`+t+'" alt="Article"></p><h2 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="#conclusion" aria-label="Permalink to "Conclusion"">â</a></h2><p>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.</p><p>All you need to do is fork my <a href="https://github.com/gautemo/blog-devto-backend/" target="_blank" rel="noreferrer">GitHub repository</a>, change it to your username in app.js, write articles on <a href="https://dev.to/" target="_blank" rel="noreferrer">dev.to</a> and host your blog on e.g. <a href="https://pages.github.com/" target="_blank" rel="noreferrer">GitHub Pages</a>, <a href="https://dev.to/gautemeekolsen/hosting-your-website-with-netlify-2ojk" target="_blank" rel="noreferrer">Netlify</a> or <a href="https://dev.to/gautemeekolsen/hosting-your-website-with-firebase-21ni" target="_blank" rel="noreferrer">Firebase</a>. Also, maybe change the styling if you want your own theme.</p><p>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; <a href="https://dev.to/gautemeekolsen/developer-blog-with-dev-to-as-your-backend-cms-542n" target="_blank" rel="noreferrer">dev.to/gautemeekolsen/developer-blog-with-dev-to-as-your-backend-cms-542n</a> and <a href="https://gautemo.github.io/blog-devto-backend/article.html?id=276324" target="_blank" rel="noreferrer">gautemo.github.io/blog-devto-backend/article.html?id=276324</a>.</p>',37)])])}const g=a(p,[["render",r]]);export{d as __pageData,g as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.