블로그 만들기

개요

Quarto 웹사이트는 블로깅을 위한 통합 지원을 제공합니다. 블로그는 게시물을 모아 역순(최신순)으로 나열하는 내비게이션 페이지와 게시물 모음으로 구성됩니다. 블로그에는 사용자 정의 소개 페이지, RSS 피드, 다양한 테마를 사용할 수 있습니다.

단일 블로그로만 구성된 웹사이트를 만들 수도 있고, 여러 블로그가 있는 웹사이트를 만들 수도 있으며, 다른 콘텐츠가 있는 웹사이트에 블로그를 추가할 수도 있습니다.

빠른 시작

사용하는 도구의 빠른 시작을 따라 간단한 블로그를 만들어 보세요. 기본을 익힌 뒤에는 더 고급 블로그 기능을 알아보세요.

Positron에서 새 블로그 프로젝트를 만들려면 명령 팔레트에서 Quarto: Create Project 명령을 실행합니다:

그 다음 Blog Project를 선택합니다:

프로젝트를 생성할 상위 디렉터리를 선택하라는 안내가 나오며, 이어서 블로그 프로젝트의 디렉터리 이름을 입력합니다:

새 블로그 프로젝트가 생성되어 Positron에서 열립니다. Preview 버튼(Preview iconPreview icon)을 눌러 블로그를 미리봅니다:

미리보기는 소스 파일 오른쪽에 표시됩니다. index.qmd를 다시 렌더링하거나 about.qmd 같은 다른 파일을 렌더링하면 미리보기가 자동으로 업데이트됩니다.

VS Code에서 새 블로그 프로젝트를 만들려면 명령 팔레트에서 Quarto: Create Project 명령을 실행합니다:

그 다음 Blog Project를 선택합니다:

프로젝트를 생성할 상위 디렉터리를 선택하라는 안내가 나오며, 이어서 블로그 프로젝트의 디렉터리 이름을 입력합니다:

새 블로그 프로젝트가 생성되어 VS Code에서 열립니다. Preview 버튼(Preview iconPreview icon)을 눌러 블로그를 미리봅니다:

미리보기는 소스 파일 오른쪽에 표시됩니다. index.qmd를 다시 렌더링하거나 about.qmd 같은 다른 파일을 렌더링하면 미리보기가 자동으로 업데이트됩니다.

RStudio에서 새 블로그 프로젝트를 만들려면 New Project 명령을 사용하고 Quarto Blog를 선택합니다:

그 다음 블로그의 디렉터리 이름과 기타 관련 옵션을 제공합니다:

Render 버튼을 눌러 블로그를 미리봅니다:

미리보기는 소스 파일 오른쪽에 표시됩니다. index.qmd를 다시 렌더링하거나 about.qmd 같은 다른 파일을 렌더링하면 미리보기가 자동으로 업데이트됩니다.

터미널에서 새 블로그 프로젝트를 만들려면 quarto create project 명령을 blog와 함께 사용하고, 첫 번째 인자로 새 프로젝트가 들어갈 디렉터리를 지정합니다:

Terminal
quarto create project blog myblog

이 명령은 myblog 하위 디렉터리에 간단한 블로그의 기본 구조를 생성합니다. quarto preview 명령으로 블로그를 렌더링하고 미리봅니다:

Terminal
quarto preview myblog

블로그 미리보기는 새 웹 브라우저에서 열립니다. index.qmd(또는 about.qmd 같은 다른 파일)를 편집하고 저장하면 미리보기가 자동으로 업데이트됩니다.

다음은 스타터 블로그 프로젝트에서 생성되는 주요 파일 요약입니다:

파일 설명
_quarto.yml Quarto 프로젝트 파일.
index.qmd 블로그 홈 페이지.
about.qmd 블로그 소개 페이지.
posts/ 게시물이 들어 있는 디렉터리
posts/_metadata.yml posts 공유 옵션
styles.css 웹사이트용 사용자 CSS

다음 섹션에서 프로젝트의 다양한 구성 요소를 더 자세히 살펴봅니다.

홈 페이지

홈 페이지는 posts 디렉터리의 모든 문서를 위한 listing 페이지입니다:

블로그 페이지 스크린샷. 상단 내비게이션 바에는 왼쪽에 블로그 제목('myblog'), 오른쪽에 'About', GitHub 아이콘, Twitter 아이콘, 검색 아이콘이 있습니다. 본문에는 날짜순으로 정렬된 두 개의 게시물이 제목, 태그, 설명, 미리보기와 함께 표시됩니다. 본문 오른쪽에는 게시물 수가 표시된 카테고리가 있습니다.

홈 페이지의 소스 코드는 다음과 같습니다:

---
title: "myblog"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
---

새 게시물을 렌더링하면 listing 페이지가 자동으로 업데이트되어 가장 최근 게시물이 목록 상단에 추가됩니다.

Warning

블로그 게시물에서 동적 날짜(예: today 또는 last-modified)를 사용하는 것은 권장하지 않습니다. 문서를 렌더링하거나 수정할 때마다 블로그 및 피드의 순서가 변경되기 때문입니다.

기본 레이아웃 대신 그리드 레이아웃을 사용하는 등 listing을 사용자 정의하는 방법은 Listing Pages 문서를 참고하세요.

카테고리

listing 페이지는 카테고리 표시가 활성화되어 있으며, 페이지 오른쪽 여백에 표시됩니다:

---
title: "myblog"
listing:
  # (additional metadata excluded for brevity)
  categories: true
---

카테고리는 listing에 포함된 문서의 프론트매터에서 읽습니다. 예를 들어 카테고리를 포함한 게시물 메타데이터는 다음과 같습니다:

---
title: "Post With Code"
description: "Post description"
author: "Fizz McPhee"
date: "5/22/2021"
categories:
  - news
  - code
  - analysis
---

자세한 내용은 Categories 문서를 참고하세요.

소개 페이지

about.qmd 문서에는 블로그와 작성자에 대한 추가 정보가 들어 있습니다. 예:

소개 페이지 스크린샷. 상단 중앙에 큰 원형 이미지가 있고, 그 아래에 큰 글씨의 이름과 더 작은 본문 텍스트가 있습니다. 하단에는 twitter와 GitHub 버튼이 있습니다.

about.qmd의 소스 코드는 다음과 같이 작성할 수 있습니다:

---
title: "About"
image: profile.jpg
about:
  template: jolla
  links:
    - icon: twitter
      text: Twitter
      href: https://twitter.com
    # (additional links excluded for brevity)
---

## About this blog

This is the contents of the about page for my blog.

페이지 출력 사용자 정의 옵션에 대한 자세한 내용은 About Pages 문서를 참고하세요.

Posts 디렉터리

블로그의 게시물은 posts 디렉터리에 있습니다.

posts 안에 하위 디렉터리를 만들고 index.qmd 파일을 추가하면 새 게시물이 됩니다. 해당 qmd를 렌더링하면 블로그 홈 페이지가 자동으로 업데이트되어 최신 게시물이 목록 상단에 포함됩니다.

초안

문서 옵션에 draft: true를 추가하면 게시물이 초안임을 나타냅니다. 예:

---
title: "My Post"
description: "Post description"
author: "Fizz McPhee"
date: "5/22/2021"
draft: true
---

초안 게시물은 사이트 미리보기에서는 보이지만, 사이트를 렌더링하면 내용이 비어 있고 listing, 내비게이션, 사이트 맵, 사이트 검색에 나타나지 않습니다. 자세한 내용은 Website Drafts 문서를 참고하세요.

게시물이 완성되면 문서 옵션에서 draft: true를 제거하고 렌더링하면 됩니다.

마지막 수정일

원래 발행일을 유지하면서 마지막 수정 날짜를 표시하려면 date-modified 필드를 문서 옵션에 추가합니다. 예:

---
title: "My Post"
description: "Post description"
author: "Fizz McPhee"
date: "5/22/2021"
date-modified: "5/23/2021"
---

게시물 고정

실행 가능한 코드를 포함한 블로그 게시물은 시간이 지나면 렌더링이 실패할 수 있습니다(예: 사용 패키지가 변경됨). 여러 작성자가 있고 모든 사람이 같은 소프트웨어(또는 같은 버전)를 갖고 있지 않은 경우에도 문제가 발생할 수 있습니다. 또한 계산이 포함된 게시물은 렌더링 시간이 길어져 사이트 전체 렌더링 시간이 늘어날 수 있습니다.

이 문제를 해결하려면 계산이 포함된 게시물의 출력 결과를 고정합니다. 게시물을 freeze: true로 렌더링하면 Jupyter나 Knitr 같은 엔진의 마크다운 출력이 저장됩니다. 사이트 전체를 렌더링할 때는 해당 계산을 다시 실행하지 않고 이전에 고정된 결과를 읽습니다.

freeze: true가 지정된 게시물은 명시적으로 다시 렌더링할 때만 재실행됩니다. 이 옵션을 사용하면, 게시물을 렌더링할 당시의 소프트웨어가 없어도 사이트 전체 렌더링이 안정적으로 수행됩니다.

기본 블로그에는 posts 디렉터리의 모든 문서에 대한 공유 메타데이터를 설정하는 _metadata.yml 파일이 있습니다. 이 파일에서 모든 게시물에 freeze: true를 기본으로 설정합니다:

# options apply to all posts in this folder

# freeze computational output
freeze: true

웹사이트에서 계산 결과를 고정하는 방법은 freeze 옵션 문서를 참고하세요.

테마

블로그는 Quarto에 포함된 25개의 Bootswatch 테마를 모두 사용할 수 있습니다. 또한 직접 만들기도 가능합니다. quarto create project로 생성되는 기본 블로그는 cosmo 테마를 사용합니다. 아래는 사용 가능한 테마와 간단한 기본 블로그의 예시 썸네일입니다:

litera

litera 테마의 블로그 스크린샷.

solar

solar 테마의 블로그 스크린샷.

morph

morph 테마의 블로그 스크린샷.

RSS 피드

블로그에는 보통 RSS 피드가 포함되어 있어 피드 리더와 다른 웹사이트로 콘텐츠를 쉽게 배포할 수 있습니다. 다음과 같이 RSS를 활성화할 수 있습니다:

  1. _quarto.yml 파일의 website 키에 site-url과 description을 추가합니다(프로젝트 파일에서 이 옵션이 설정되지 않으면 Quarto는 피드를 생성할 수 없음). 예:

    website:
  title: "myblog"
  site-url: https://www.myblogexample.io
  description: "A great sample blog"

  2. 블로그 홈 페이지 index.qmd의 listing에 feed: true 옵션을 추가합니다. 예:

    ---
title: "myblog"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  feed: true
---

이제 사이트를 렌더링하면 RSS 피드도 생성됩니다. 자세한 내용은 RSS Feeds 문서를 참고하세요.

Tip내비게이션 바에 RSS 링크 포함

_quarto.yml 프로젝트 파일에 다음을 포함하면 내비게이션 바에 RSS 링크를 추가할 수 있습니다. 예:

website:
  title: "myblog"
  site-url: https://www.myblogexample.io
  description: "A great sample blog"
  navbar:
    right:
      - icon: rss
        href: index.xml

카테고리 피드

블로그의 특정 카테고리에 대한 RSS 피드도 생성할 수 있습니다. 예를 들어 news와 posts 카테고리에 대한 피드를 만들려면 다음과 같이 작성합니다:

---
title: "myblog"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  feed:
    categories: [news, posts]
---

이 설정은 listing의 RSS 피드를 위한 index.xml 파일을 만들고, 각 카테고리에 대해 index-news.xml, index-posts.xml 파일도 생성합니다.

배포

Quarto 블로그를 배포하는 방법은 다양합니다. 기본적으로 블로그 콘텐츠는 _site 하위 디렉터리에 작성됩니다. 배포란 이 디렉터리를 웹 서버나 웹 호스팅 서비스로 복사하는 것만으로 충분합니다.

웹사이트 배포 문서에는 다음 서비스에 배포하는 방법이 자세히 설명되어 있습니다:

구독

블로그 독자가 이메일로 업데이트를 구독할 수 있게 할 수도 있습니다. 이를 위해 서드파티 이메일 서비스를 사용해 이메일을 관리하고 발송할 수 있습니다.

서드파티 이메일 서비스는 보통 RSS 피드(예: https://www.myblogexample.io/index.xml)를 입력으로 받아 구독 위젯에 사용할 HTML을 제공합니다. 이 위젯은 블로그 오른쪽 여백에 두는 것이 좋습니다.

구독 위젯을 추가하려면 다음 단계를 따르세요:

  1. 이메일 서비스 기능을 사용해 구독 위젯의 HTML을 생성합니다. MailChimp는 예를 들어 최소 구독 위젯용 HTML을 다음과 같이 제공합니다.

    <span style="font-weight: 600;">Subscribe</span>

<!-- Begin Mailchimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-10_7_dtp.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:170px;}
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    #mc-embedded-subscribe-form{margin-left:-5px;}
</style>
<div id="mc_embed_signup">
<form action="<site_url>" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f718424fc5df77c22533bdaa6_a3c37fb57b" tabindex="-1" value=""></div>
        <div class="optionalParent">
            <div class="clear foot" style="margin-top: 10px;">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
                <p class="brandingLogo"></p>
            </div>
        </div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->
    Warning

    위 위젯 HTML은 블로그에서 바로 동작하지 않습니다. 구독 HTML에는 블로그에 맞는 값이 포함되어야 합니다. 구독 위젯을 생성하는 방법은 이메일 서비스 제공자의 안내를 참고하세요.

  2. 프로젝트 루트에 subscribe.html 파일을 생성합니다.

  3. 구독 위젯 HTML을 subscribe.html에 붙여넣고 저장합니다.

  4. _quarto.yml의 margin-header에 subscribe.html을 추가합니다:

    website:
  # (additional metadata excluded for brevity)
  margin-header: subscribe.html

결과는 다음과 같습니다:

블로그 오른쪽 상단에 Subscribe 섹션이 표시된 스크린샷. 'email address' 입력 필드와 아래의 'Subscribe' 버튼이 있습니다.