생산성/옵시디언(Obsidian)

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

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

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

준비하기 GitHub 계정이 필요합니다. GitHub 계정이 없다면 여기에서 계정을 생성할 수 있습니다. Cloudflare 계정 또한 필요합니다. Cloudflare 계정이 없다면 여기 에서 계정을 생성할 수 있습니다. GitHub

anpigon.tistory.com

 

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

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

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

시작하기

Github에 리포지토리 생성하기

  1. 아래 Github URL에 접속합니다.
  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를 설정할 수 있습니다. 

 

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

Digital Garden 플러그인 설치하기

  1. 옵시디언에서 Digital Garden 플러그인을 검색하고 설치합니다. 
  2. 그 다음 Digital Garden Settings으로 이동합니다. 
    • Github repo name에 방금 생성한 리포지토리 이름(예. digitalgarden)을 입력합니다.
    • Github Username에 깃헙 유저 이름을 입력합니다.
    • GitHub token에는 깃헙 액세스 토큰을 입력합니다. 깃헙 액세스 토큰을 발급 받는 방법은 아래에서 다시 설명합니다.

 

깃헙 엑세스 토큰 발급하기

  1. 아래 URL에 접속하여 Github personal access token을 발급합니다.
  2. Expiration는 No expiration를 선택합니다. Select scopes에서 repo를 선택합니다. 
  3. 발급 받은 깃헙 액세스 토큰을 Digital Garden Settings에 복사&붙여넣기합니다.

 

메모 작성하고 발행하기

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

---
dg-publish: true
---

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

반응형