GitHub과 Netlify를 사용해서 블로그 만들기 (with Obsidian Digital Garden Plugin)

옵시디언 노트를 무료로 퍼블리싱하는 방법에 대해 최근(2024년 1월 28일)에 새로 작성한 글이 있습니다.
해당 글은 바로 아래 링크에서 확인하실 수 있습니다.

GitHub와 Cloudflare를 이용하여 Obsidian 노트를 온라인에 게시하는 방법 (with Quartz)

 

---

 
최근에 gatsby로 만들어진 블로그를 검색하다가 마음에 드는 템플릿을 발견하였습니다.
바로 gatsby-starter-digital-garden 입니다.

• 템플릿 적용된 사이트: https://mathieudutour.github.io/gatsby-digital-garden/

"옵시디언 무료 퍼블리시하기: 나만의 디지털 가든 만들기"에서 옵시디언 디지털 가든 플러그인을 소개한 적이 있습니다. 이전 글에서 설명했듯이 옵시디언 Digital Garden 플러그인을 사용하면 GitHub에 글을 쉽게 업로드 할 수 있습니다.

이번에는 옵시디언 플러그인과 위 템플릿을 사용하여 개인 블로그를 만드는 방법을 설명합니다.

시작하기

Github에 리포지토리 생성하기

1. 아래 Github URL에 접속합니다.
   • https://github.com/anpigon/gatsby-starter-digital-garden-template
     • 이 리포는 Obsidian Digital Garden Plugin에서 사용할 수 있게 코드를 조금 수정하였습니다.
2. [Use this template] 버튼을 클릭합니다. 

   

3. Repository name를 수정하고, [Create repositiry from template] 버튼을 누릅니다. 

   

   
   
   

폴더 구조

gatsby-starter-digital-garden은 아래와 같은 폴더 구조를 가집니다. (중요하지 않은 파일은 설명에서 제외했습니다.)

gatsby-starter-digital-garden
├── src 
│   └── site
│       └── notes
│           ├── example-dir
│           │   └── hi.mdx
│           └── hello.mdx
└── gatsby-config.js

• /src/site/notes: 해당 폴더에는 샘플 메모가 포함되어 있습니다. 샘플 메모를 삭제하시고 자신의 메모를 작성합니다.
• gatsby-config.js: 설정 파일입니다. 사이트 제목 및 설명, Gatsby 플러그인 등과 같은 사이트(메타데이터)에 대한 정보를 설정할 수 있습니다.

 

개츠비 설정하기

gatsby-config.js 파일에서 rootNote와 title를 수정합니다.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-garden`,
      options: {
        contentPath: `${__dirname}/src/site/notes`,
        rootNote: `/home`, // 웹사이트에서 첫번째로 보여지는 메모 파일 경로입니다.
      },
    },
    `gatsby-plugin-netlify`
  ],
  siteMetadata: {
    title: `Site title`, // 여기에 사이트 명을 입력합니다.
  },
}

 

Netlify 사이트 만들기

1. https://app.netlify.com/ 에 접속합니다.
2. [Add new site] → [Import an exising project] 버튼을 차례로 선택합니다. 

   

3. 방금 Github에 생성한 리포지토리를 검색하고 선택합니다. 

   

4. [Deploy site] 버튼을 선택합니다. 

   

5. [Domain settings]에서 site name을 변경하거나 custom domain를 설정할 수 있습니다. 

   

   • site name에 site-name를 입력하면, 사이트 URL은 https://site-name.netlify.app가 됩니다.

 

옵시디언 디지털 가든 플러그인으로 퍼블리시하기

Digital Garden 플러그인 설치하기

1. 옵시디언에서 Digital Garden 플러그인을 검색하고 설치합니다. 

   

2. 그 다음 Digital Garden Settings으로 이동합니다. 

   

   • Github repo name에 방금 생성한 리포지토리 이름(예. digitalgarden)을 입력합니다.
   • Github Username에 깃헙 유저 이름을 입력합니다.
   • GitHub token에는 깃헙 액세스 토큰을 입력합니다. 깃헙 액세스 토큰을 발급 받는 방법은 아래에서 다시 설명합니다.

 

깃헙 엑세스 토큰 발급하기

1. 아래 URL에 접속하여 Github personal access token을 발급합니다.
   • https://github.com/settings/tokens
2. Expiration는 No expiration를 선택합니다. Select scopes에서 repo를 선택합니다. 

   

3. 발급 받은 깃헙 액세스 토큰을 Digital Garden Settings에 복사&붙여넣기합니다.

 

메모 작성하고 발행하기

옵시디언에서 새 메모를 작성하고, 맨 위에 다음 프론트 매터를 추가합니다. dg-publish가 true인 메모만 GitHub에 업로드 됩니다.

---
dg-publish: true
---

 
그 다음 옵시디언에서 명령어 창을 열고 Publish Single Note 명령어를 선택합니다.