dev.to를 백엔드/CMS로 사용하는 개발자 블로그

TLDR

이 저장소github.com/gautemo/blog-devto-backend를 포크하고 dev.to의 script/app.js에서 사용자 이름을 자신의 것으로 변경합니다. 이제 나만의 개발자 블로그가 생겼습니다! 🥳

아이디어

따라서 자신의 개발자 블로그가 필요합니다. 그 이유는 많습니다.

지식을 공유하고 다른 사람을 돕습니다

미래의 자신이 되돌아볼 수 있도록 배운 내용을 문서화하십시오

.

당신은 주제를 더 잘 배울 것입니다

경력을 쌓고 자신을 마케팅하십시오

어디에서 시작합니까?

많은 옵션이 있으며 모두 다른 시간, 학습 기술 또는 투자 비용이 필요합니다.

모든 기사를 HTML로 작성할 수 있습니다. 이것이 내가 시작한 방법입니다. 이것은 잘 작동하며 문서에 필요한 경우 추가 코드를 작성하여 기능을 추가할 수 있습니다. this one처럼 어두운 모드로 전환할 수 있습니다. 하지만 시간이 지나면 블로그 글을 수정하고 관리하는 것이 번거롭다는 점은 말씀드릴 수 있습니다.

Wordpress 또는 기타 콘텐츠 관리 시스템은 또 다른 간단한 솔루션입니다. 하지만 원하는 대로 사이트를 사용자 지정하고 코드 스니펫을 표시할 수 있습니까? 무료 요금제로 충분합니까, 아니면 돈을 지불해야 합니까?

Gridsome , Gatsby , Sanity 및/또는 Strapi 과 같은 제품으로 헤드리스 콘텐츠 관리 시스템을 만드십니까? 이것은 매우 좋은 옵션일 수 있지만 어떤 제품을 선택해야 하는지에 대해 많은 작업과 조사가 필요한 것 같습니다.

자신의 데이터베이스로 처음부터 모든 것을 만드시겠습니까? 그것은 아마도 당신의 목표를 달성하기 위한 가장 많은 노력일 것입니다.

기사를 만들고 자신의 블로그에 기사를 표시하는 데 사용합니다. 이것은 이 기사에서 다루게 될 간단하면서도 매우 좋은 옵션입니다. dev.to는 개발자 글을 작성하기 위해 만들어졌기 때문에 쉽게 편집하고 이미지와 코드 블록을 추가할 수 있습니다. 코드 블록은 중요하므로 코드가 강조 표시되고 독자가 코드를 복사할 수 있습니다.

시작하자

먼저, 우리가 작성한 모든 블로그를 나열하는 홈 페이지를 만들 것입니다.

끝점을 사용합니다.

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

index.html 파일에는 템플릿을 사용하여 블로그 항목으로 채울 ul 요소가 있습니다.

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

그런 다음 app.js은 API를 가져오고 기사를 반복하여 DOM의 목록에 추가합니다. (Vue.js 과 같은 일부 프레임워크로 코드를 단순화할 수 있지만 필요한 코드가 거의 없을 때 필요하다고 생각하지 않습니다.)

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);
}

몇 가지 스타일링으로 랜딩 페이지가 완성되었습니다! 전체 코드는 index.html , app.js , style.css 및 home.css 에 있습니다.


기사 페이지로 이동합니다. 특정 기사를 얻기 위해 엔드포인트를 사용합니다.

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

article.html 파일에는 표지 이미지, 제목 및 기사 본문에 대한 요소가 있습니다.

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

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;

하지만 이제 dev.to에서 코드 강조 표시가 누락되었습니다.
다음과 같이 세 개의 백틱 뒤에 파일 확장자를 추가하여 dev.to 기사에서 코드 강조 표시를 추가할 수 있습니다.

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

우리 사이트에서 동일한 강조 표시를 얻으려면 github에서 dev.to가 사용하는 css를 가져옵니다. Sass로 프로젝트를 설정하지 않았으므로 온라인Sass compiler을 사용하여 css를 가져올 수 있습니다.

좀 더 스타일을 지정하면 기사 페이지가 완성됩니다. 완전한 코드는 article.html , article.js , style.css , article.css 및 devto.css 입니다.

결론

이렇게 하면 관리하기 쉬운 자체 개발자 블로그를 신속하게 시작하고 실행할 수 있습니다. 물론 귀하의 기사는 dev.to에 게시되고 귀하는 그들의 API에 의존하므로 불확실성이 될 수 있습니다.

내 GitHub repository 를 포크하고, app.js에서 사용자 이름으로 변경하고, 기사를 작성하고 블로그를 호스팅하기만 하면 됩니다. 즉, GitHub Pages 또는 . 또한 나만의 테마를 원할 경우 스타일을 변경할 수 있습니다.

dev.to 또는 내 블로그에서 이 글을 읽고 있는지 모르겠습니다. 그러나 설명을 위해 이 두 곳에서 동일한 기사를 볼 수 있습니다.
그리고
gautemo.github.io/blog-devto-backend/article.html?id=276324 .