옵시디언과 GitHub 연동해서 블로그 만들기(옵시디언 무료 퍼블리시Publish) - GitHub + Netlify + Obsidian Digital Garden Plugin 연동
최근에 gatsby로 만들어진 블로그를 검색하다가 마음에 드는 템플릿을 발견하였습니다.
바로 gatsby-starter-digital-garden 입니다.
"옵시디언 무료 퍼블리시하기: 나만의 디지털 가든 만들기"에서 옵시디언 디지털 가든 플러그인을 소개한 적이 있습니다. 이전 글에서 설명했듯이 옵시디언 Digital Garden 플러그인을 사용하면 GitHub에 글을 쉽게 업로드 할 수 있습니다.
이번에는 옵시디언 플러그인과 위 템플릿을 사용하여 개인 블로그를 만드는 방법을 설명합니다.
시작하기
Github에 리포지토리 생성하기
- 아래 Github URL에 접속합니다.
- https://github.com/anpigon/gatsby-starter-digital-garden-template
- 이 리포는 Obsidian Digital Garden Plugin에서 사용할 수 있게 코드를 조금 수정하였습니다.
- https://github.com/anpigon/gatsby-starter-digital-garden-template
- [Use this template] 버튼을 클릭합니다.
- 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 사이트 만들기
- https://app.netlify.com/ 에 접속합니다.
- [Add new site] → [Import an exising project] 버튼을 차례로 선택합니다.
- 방금 Github에 생성한 리포지토리를 검색하고 선택합니다.
- [Deploy site] 버튼을 선택합니다.
- [Domain settings]에서 site name을 변경하거나 custom domain를 설정할 수 있습니다.
- site name에 site-name를 입력하면, 사이트 URL은
https://site-name.netlify.app
가 됩니다.
- site name에 site-name를 입력하면, 사이트 URL은
옵시디언 디지털 가든 플러그인으로 퍼블리시하기
Digital Garden 플러그인 설치하기
- 옵시디언에서 Digital Garden 플러그인을 검색하고 설치합니다.
- 그 다음 Digital Garden Settings으로 이동합니다.
- Github repo name에 방금 생성한 리포지토리 이름(예.
digitalgarden
)을 입력합니다. - Github Username에 깃헙 유저 이름을 입력합니다.
- GitHub token에는 깃헙 액세스 토큰을 입력합니다. 깃헙 액세스 토큰을 발급 받는 방법은 아래에서 다시 설명합니다.
- Github repo name에 방금 생성한 리포지토리 이름(예.
깃헙 엑세스 토큰 발급하기
- 아래 URL에 접속하여 Github personal access token을 발급합니다.
Expiration
는No expiration
를 선택합니다.Select scopes
에서repo
를 선택합니다.- 발급 받은 깃헙 액세스 토큰을 Digital Garden Settings에 복사&붙여넣기합니다.
메모 작성하고 발행하기
옵시디언에서 새 메모를 작성하고, 맨 위에 다음 프론트 매터를 추가합니다. dg-publish
가 true인 메모만 GitHub에 업로드 됩니다.
---
dg-publish: true
---
그 다음 옵시디언에서 명령어 창을 열고 Publish Single Note
명령어를 선택합니다.
END.
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.
Upvoted! Thank you for supporting witness @jswit.
Please check my new project, STEEM.NFT. Thank you!