쿼토로 시작하는 블로그

Quarto blog

Blog

Author

Taeyoon Kim

Published

January 10, 2025

Modified

January 14, 2025

블로그는 많은 이유로 훌륭한 글쓰기 도구입니다. 그리고 쿼토(Quarto)는 몇번의 클릭만으로 블로그를 만들 수 있습니다. 게다가 커스터마이징이 쉽기도 합니다. 이 글은 쿼토를 이용한 블로그 만들기 가이드로 여러분의 소중한 시간을 절약하고 멋진 블로그를 시작하는 데 도움을 주기 위해 작성되었습니다.¹

1 쿼토 블로그 시작하기

솔직히 말해서 블로그를 처음 시작하는 단계에서 블로그 툴을 다루는데 많은 시간을 쓰는 것은 좋은 생각이 아닙니다. 중요한 것은 꾸준히 글을 쓰는 것이지 블로그를 화려하게 꾸미는 것이 아닙니다. 따라서 처음에는 기본 제공되는 테마와 랜딩 페이지를 사용하세요.

1.1 당신이 블로그를 해야하는 이유

블로그를 시작하는 이유가 명확하지 않다면 몇 가지 예시를 제공하겠습니다.

배우기: 글쓰기는 얕은 지식을 막아줍니다. 블로그 글을 작성하는 과정에서 종종 제가 틀렸다는 사실을 깨닫곤 합니다. 글쓰기가 효과적인 학습 도구인 이유가 바로 이 때문이죠.
다른 사람에 도움주기: 자기가 아는 것을 공유하면서 비슷한 문제에 봉착한 다른 이들을 도와줄 수 있습니다. 전문가가 아니더라도 걱정하지는 마세요. 사실 사람들은 보통 전문가보다는 다른 학습자, 즉 자신보다 단계만 조금 앞선 사람에게서 배우는 것을 더 선호합니다. 왜냐하면 전문가들은 초심자들이 겪는 어려움을 간과하는 경향이 있기 때문이죠.
포트폴리오 및 취업 기회: 인터넷에 콘텐츠를 게시하면 누구든지 볼 수 있습니다. 이는 자신의 기술을 과시하는 데 유용합니다. 또한 개인적인 경험을 이야기하자면 공개적으로 글을 쓰는 것은 새로운 직업 기회로 연결될 수도 있습니다. 누가 당신의 블로그를 읽고 함께 일하기를 원할 수도 있으니까요.

1.2 블로그 초기 설정하기

쿼토를 로컬에 설치했다면 블로그를 만드는 것은 정말 간단합니다. 터미널에 다음 입력어를 입력합니다.

quarto create-project myblog --type website:blog

더 자세한 것은 Beatriz Milz가 작성한 10 단계로 쿼토 블로그를 시작하는 방법을 참고하세요.

1.3 간단한 설정하기

루트 폴더에 있는 _quarto.yml 파일에는 쿼토 블로그에 대한 여러가지 설정이 존재합니다. 아래 예시 파일을 참고하세요.

_quarto.yml

project:
  type: website

website:
  title: "Quarto blog" # 블로그 제목 설정
  site-url: https://quarto-blog.com # 블로그 URL 설정 (나중에 RSS 피드에 중요)
  description: "This is personal Blog." # 블로그 설명
  navbar: # 메뉴바 설정
    right:
      - text: Blog
        href: index.qmd 
      - icon: github
        href: https://github.com/[xxxx]
      - icon: twitter
        href: https://twitter.com/[xxx]
      - icon: youtube
        href: https://www.youtube.com/user/[xxx]

# You can ignore this part in the first step
      - icon: rss
        href: blog.xml
      - text: Ressources
        menu: 
          - text: DataViz Portfolio
            href: dataviz_portfolio.html
          - text: YARDS
            href: https://yards.albert-rapp.de/
          - text: R Weekly
            href: https://rweekly.org/
          - text: R Bloggers
            href: https://www.r-bloggers.com/
      - text: Archive
        href: archive.qmd
  google-analytics: <Insert your ID here>
  cookie-consent: true
  twitter-card: 
    image: thumbnail_blog.png
    card-style: summary_large_image
    creator: "@rappa753"

filters:
  - code-filename


format:
  html:
    theme: theme.scss

1.4 첫 번째 게시물 쓰기

블로그 게시물은 posts 디렉토리에 파일을 생성해서 만듭니다. 간단하게 qmd 파일을 만들어 시작해보세요.

1.4.1 메타데이터

게시물에 대한 설정에 대한 것은 posts/_metadata.yml 파일이 처리합니다. 제가 사용하는 설정은 아래 파일을 참고하세요.

posts/_metadata.yml

# Options specified here will apply to all posts in this folder

# freeze computational output
freeze: true

# Enable banner style title blocks
title-block-banner: false

# Author name of all blog posts
author: 'Albert Rapp'

# Table of content settings
toc: true
toc-depth: 3

page-layout: article

1.5 목록 페이지 (RSS 피드 포함)

블로그 글에 대한 목록 페이지를 만들어보죠. blog.qmd 파일을 만들고 YAML 헤더에다음과 같이 작성합니다.

blog.qmd

---
listing:
  contents: posts/**/*.qmd # posts 디렉토리 (및 하위 디렉토리) 에 있는 모든 .qmd 파일을 이 목록 페이지에 포함한다는 의미
  sort: "date desc" # 날짜순으로 정렬 및 필터링 기능
  type: default 
  categories: true
  sort-ui: true
  filter-ui: true
  fields: [date, title, reading-time, description, categories] # 자세한 것은 쿼토 공식 페이지를 참조
  feed: true # 이 목록 페이지가 RSS 페이지를 생성
page-layout: full
title-block-banner: false # 배너를 보여주지 않음
---

1.6 아카이브 만들기

모든 글을 나열하는 아카이브 페이지도 만들어 보겠습니다. 루트 디렉토리에 새로운 파일 archive.qmd 를 만들고 다음과 같은 내용을 채웠습니다.

archive.qmd

---
title: "Archive"
page-layout: full # 좌우 여백을 제거
listing:
  contents: posts/**/*.qmd
  type: default
  fields: [date, title]
  sort: 'date desc'
---

1.7 댓글 기능 추가하기

이제 댓글 기능을 추가해 보겠습니다. 이 기능을 통해 독자들은 훌륭한 콘텐츠에 대한 댓글을 달 수 있습니다. 제가 주로 사용하는 도구는 utterances 입니다. 이 도구는 GitHub 를 통해 작동하기 때문에 GitHub 에서 별도의 공개 저장소를 만들어야 합니다. 이 저장소는 블로그의 댓글을 저장하는 공간이 될 것입니다. 하지만 먼저 새로 생성한 저장소에 utterances 를 설치해야 합니다. 설치 방법은 공식 페이지를 참고하세요.

블로그 게시글 하단에만 댓글을 보여주기 위해 posts/_metadata.yml파일에 아래 내용을 추가합니다.

posts/_metadata.yml

comments: 
  utterances: 
    repo:  [repo]/blogComments

1.8 뉴스레터

정기적으로 구독자에게 새로운 콘텐츠 알림을 주기 위해서 뉴스레터를 발송하기 위해 서비스 제공 업체들의 코드를 원하는 위치에 배치하세요.

<iframe id="beehiiv-form" src="https://embeds.beehiiv.com/9232d2a2-6e85-4beb-b8ed-1de94e9e4f01?slim=true" data-test-id="beehiiv-embed" frameborder="0" scrolling="no" style="margin: 0; border-radius: 0px !important; background-color: transparent; height: 75px; width: 90%;"></iframe>

블로그 목록 페이지 상단에 해당 코드를 추가하는 방법은 아래와 같습니다.

blog.qmd

---
listing:
  contents: posts/**/*.qmd
  sort: "date desc"
  type: default
  categories: true
  sort-ui: true
  filter-ui: true
  fields: [date, title, reading-time, description, categories]
  feed: true
page-layout: full
title-block-banner: false
---

:::: {.columns}

::: {.column width="40%"}
# Series
##### [ggplot2-series](ggplot-series.html)
This series contains a great deal of tips, tricks and packages 
that you can use to level up your ggplot game.
:::

::: {.column width="60%"}
# Subscribe
<iframe id="beehiiv-form" src="https://embeds.beehiiv.com/9232d2a2-6e85-4beb-b8ed-1de94e9e4f01?slim=true" data-test-id="beehiiv-embed" frameborder="0" scrolling="no" style="margin: 0; border-radius: 0px !important; background-color: transparent; height: 75px; width: 90%;"></iframe>
:::

::::

1.9 바닥글 추가

posts/_metadata.yml

format:
  html:
    include-after-body: ../footer.html

2 Reference

Footnotes

https://albert-rapp.de/posts/13_quarto_blog_writing_guide/13_quarto_blog_writing_guide.html#create-your-own-series↩︎

--- title: "쿼토로 시작하는 블로그" author: "Taeyoon Kim" draft: false date: "2025-01-10" date-modified: last-modified categories: [Quarto blog, Blog] --- ![](Quarto_blog.png){width=50% fig-align="center"} 블로그는 많은 이유로 훌륭한 글쓰기 도구입니다. 그리고 쿼토(Quarto)는 몇번의 클릭만으로 블로그를 만들 수 있습니다. 게다가 커스터마이징이 쉽기도 합니다. 이 글은 쿼토를 이용한 블로그 만들기 가이드로 여러분의 소중한 시간을 절약하고 멋진 블로그를 시작하는 데 도움을 주기 위해 작성되었습니다.[^1] # 쿼토 블로그 시작하기 솔직히 말해서 블로그를 처음 시작하는 단계에서 블로그 툴을 다루는데 많은 시간을 쓰는 것은 좋은 생각이 아닙니다. 중요한 것은 **꾸준히 글을 쓰는 것**이지 블로그를 화려하게 꾸미는 것이 아닙니다. 따라서 처음에는 기본 제공되는 테마와 랜딩 페이지를 사용하세요. ## 당신이 블로그를 해야하는 이유 블로그를 시작하는 이유가 명확하지 않다면 몇 가지 예시를 제공하겠습니다. 1. 배우기: 글쓰기는 얕은 지식을 막아줍니다. 블로그 글을 작성하는 과정에서 종종 제가 틀렸다는 사실을 깨닫곤 합니다. 글쓰기가 효과적인 학습 도구인 이유가 바로 이 때문이죠. 2. 다른 사람에 도움주기: 자기가 아는 것을 공유하면서 비슷한 문제에 봉착한 다른 이들을 도와줄 수 있습니다. 전문가가 아니더라도 걱정하지는 마세요. 사실 사람들은 보통 전문가보다는 다른 학습자, 즉 자신보다 단계만 조금 앞선 사람에게서 배우는 것을 더 선호합니다. 왜냐하면 전문가들은 초심자들이 겪는 어려움을 간과하는 경향이 있기 때문이죠. 3. 포트폴리오 및 취업 기회: 인터넷에 콘텐츠를 게시하면 누구든지 볼 수 있습니다. 이는 자신의 기술을 과시하는 데 유용합니다. 또한 개인적인 경험을 이야기하자면 공개적으로 글을 쓰는 것은 새로운 직업 기회로 연결될 수도 있습니다. 누가 당신의 블로그를 읽고 함께 일하기를 원할 수도 있으니까요. ## 블로그 초기 설정하기 쿼토를 로컬에 설치했다면 블로그를 만드는 것은 정말 간단합니다. 터미널에 다음 입력어를 입력합니다. ```bash quarto create-project myblog --type website:blog ``` 더 자세한 것은 Beatriz Milz가 작성한 [10 단계로 쿼토 블로그를 시작하는 방법](https://beamilz.com/posts/2022-06-05-creating-a-blog-with-quarto/en/)을 참고하세요. ## 간단한 설정하기 루트 폴더에 있는 `_quarto.yml` 파일에는 쿼토 블로그에 대한 여러가지 설정이 존재합니다. 아래 예시 파일을 참고하세요. ```{.yml filename="_quarto.yml"} project: type: website website: title: "Quarto blog" # 블로그 제목 설정 site-url: https://quarto-blog.com # 블로그 URL 설정 (나중에 RSS 피드에 중요) description: "This is personal Blog." # 블로그 설명 navbar: # 메뉴바 설정 right: - text: Blog href: index.qmd - icon: github href: https://github.com/[xxxx] - icon: twitter href: https://twitter.com/[xxx] - icon: youtube href: https://www.youtube.com/user/[xxx] # You can ignore this part in the first step - icon: rss href: blog.xml - text: Ressources menu: - text: DataViz Portfolio href: dataviz_portfolio.html - text: YARDS href: https://yards.albert-rapp.de/ - text: R Weekly href: https://rweekly.org/ - text: R Bloggers href: https://www.r-bloggers.com/ - text: Archive href: archive.qmd google-analytics: <Insert your ID here> cookie-consent: true twitter-card: image: thumbnail_blog.png card-style: summary_large_image creator: "@rappa753" filters: - code-filename format: html: theme: theme.scss ``` ## 첫 번째 게시물 쓰기 블로그 게시물은 `posts` 디렉토리에 파일을 생성해서 만듭니다. 간단하게 `qmd` 파일을 만들어 시작해보세요. ### 메타데이터 게시물에 대한 설정에 대한 것은 `posts/_metadata.yml` 파일이 처리합니다. 제가 사용하는 설정은 아래 파일을 참고하세요. ```{.yml filename="posts/_metadata.yml"} # Options specified here will apply to all posts in this folder # freeze computational output freeze: true # Enable banner style title blocks title-block-banner: false # Author name of all blog posts author: 'Albert Rapp' # Table of content settings toc: true toc-depth: 3 page-layout: article ``` ## 목록 페이지 (RSS 피드 포함) 블로그 글에 대한 목록 페이지를 만들어보죠. `blog.qmd` 파일을 만들고 YAML 헤더에다음과 같이 작성합니다. ```{.yml filename="blog.qmd"} --- listing: contents: posts/**/*.qmd # posts 디렉토리 (및 하위 디렉토리) 에 있는 모든 .qmd 파일을 이 목록 페이지에 포함한다는 의미 sort: "date desc" # 날짜순으로 정렬 및 필터링 기능 type: default categories: true sort-ui: true filter-ui: true fields: [date, title, reading-time, description, categories] # 자세한 것은 쿼토 공식 페이지를 참조 feed: true # 이 목록 페이지가 RSS 페이지를 생성 page-layout: full title-block-banner: false # 배너를 보여주지 않음 --- ``` ## 아카이브 만들기 모든 글을 나열하는 아카이브 페이지도 만들어 보겠습니다. 루트 디렉토리에 새로운 파일 `archive.qmd` 를 만들고 다음과 같은 내용을 채웠습니다. ```{.yml filename="archive.qmd"} --- title: "Archive" page-layout: full # 좌우 여백을 제거 listing: contents: posts/**/*.qmd type: default fields: [date, title] sort: 'date desc' --- ``` ## 댓글 기능 추가하기 이제 댓글 기능을 추가해 보겠습니다. 이 기능을 통해 독자들은 훌륭한 콘텐츠에 대한 댓글을 달 수 있습니다. 제가 주로 사용하는 도구는 utterances 입니다. 이 도구는 GitHub 를 통해 작동하기 때문에 GitHub 에서 별도의 공개 저장소를 만들어야 합니다. 이 저장소는 블로그의 댓글을 저장하는 공간이 될 것입니다. 하지만 먼저 새로 생성한 저장소에 utterances 를 설치해야 합니다. 설치 방법은 공식 페이지를 참고하세요. 블로그 게시글 하단에만 댓글을 보여주기 위해 `posts/_metadata.yml`파일에 아래 내용을 추가합니다. ```{.yml filename="posts/_metadata.yml"} comments: utterances: repo: [repo]/blogComments ``` ## 뉴스레터 정기적으로 구독자에게 새로운 콘텐츠 알림을 주기 위해서 뉴스레터를 발송하기 위해 서비스 제공 업체들의 코드를 원하는 위치에 배치하세요. ```html <iframe id="beehiiv-form" src="https://embeds.beehiiv.com/9232d2a2-6e85-4beb-b8ed-1de94e9e4f01?slim=true" data-test-id="beehiiv-embed" frameborder="0" scrolling="no" style="margin: 0; border-radius: 0px !important; background-color: transparent; height: 75px; width: 90%;"></iframe> ``` 블로그 목록 페이지 상단에 해당 코드를 추가하는 방법은 아래와 같습니다. ```{.yml filename="blog.qmd"} --- listing: contents: posts/**/*.qmd sort: "date desc" type: default categories: true sort-ui: true filter-ui: true fields: [date, title, reading-time, description, categories] feed: true page-layout: full title-block-banner: false --- :::: {.columns} ::: {.column width="40%"} # Series ##### [ggplot2-series](ggplot-series.html) This series contains a great deal of tips, tricks and packages that you can use to level up your ggplot game. ::: ::: {.column width="60%"} # Subscribe <iframe id="beehiiv-form" src="https://embeds.beehiiv.com/9232d2a2-6e85-4beb-b8ed-1de94e9e4f01?slim=true" data-test-id="beehiiv-embed" frameborder="0" scrolling="no" style="margin: 0; border-radius: 0px !important; background-color: transparent; height: 75px; width: 90%;"></iframe> ::: :::: ``` ## 바닥글 추가 ```{.yml filename="posts/_metadata.yml"} format: html: include-after-body: ../footer.html ``` # Reference [^1]: https://albert-rapp.de/posts/13_quarto_blog_writing_guide/13_quarto_blog_writing_guide.html#create-your-own-series