나만의 무료 홈페이지 제작 3부 – 블로그 생성

1부와 2부에 이어 홈페이지 제작을 계속 해보겠습니다. 혹시라도 3부로 접속을 바로 하신 분은 1,2부를 연달아서 보면서 RStudio를 이용해서 따라 해보시고 다시 이 글을 보시기를 바랍니다.

이번 포스트에서는 홈페이지 내에 블로그 형태의 페이지를 만들어 보려고 합니다. 차분히 따라오시면 다 하실 수 있습니다. 기억하시죠? 코딩은 익숙해지는 것이라고.(사실 지금 하는 것은 코딩이라고 말하기에는 조금 약한 면이 있습니다.) 암튼, 아래의 쿼토 싸이트에서 구현해 둔 블로그 형식의 페이지를 저와 함께 만들어 보겠습니다.

홈페이지 YAML 파일 설정

우선, root 폴더에 있는 _quarto.yml 파일을 클릭하여 소스 코드 편집창을 열어줍니다. 그리고 아래의 코드를 입력해 줍니다. ‘-‘ 위치를 상단의 ‘-‘와 동일하게 맞춰야 합니다. 이 작업으로 내비게이션바에 Blog 메뉴를 삽입하고, 클릭했을 때 블로그 페이지가 열리게 됩니다. href 주소를 보시면 당연히 root 폴더에 docs 폴더, 그 아래 blog 폴더를 순차적으로 만들고 index.qmd 파일도 생성해줘야 한다는걸 동물적 감각으로 느낌이 오시죠?(제가 짐승이라 저만 느낌이 팍팍 오는건가요? ㅎㅎㅎ)

      - text: "Blog"
        href: docs/blog/index.qmd

blog 폴더 내 index.qmd 세팅하기

네비게이션바(navbar)의 Blog 메뉴 클릭시 보여질 페이지를 위해 blog 폴더 내에 아래의 그림처럼 index.qmd를 생성하고 그 파일에 다음 소스 코드를 입력하고 저장합니다. 물론 타이틀과 서브타이틀은 원하시는대로 바꾸시면 됩니다.

---
title: IT Playground Blog
subtitle: News, tips about R & Python & AI
listing:
  sort: "date desc" # 블로그 최신글이 상단에 표시
  contents: "posts"
  sort-ui: false
  filter-ui: false
  categories: true
  feed: true
page-layout: full
margin-header: signup.html
title-block-banner: "#EDF3F9"
title-block-banner-color: body
search: false
---

blog 폴더 내 signup.html 세팅하기

윗 단계에서 root 폴더/docs/blog/index.qmd 를 세팅하셨죠? 이제 블로그에 새로운 글이 올라오면 등록한 이메일 주소에서 업데이트 상황을 확인할 수 있도록 구독 서비스 세팅을 하도록 하겠습니다. 사실 이 부분은 해당 서비스 제공 업체의 솔루션 공부가 필요한 사항이라 참고만 하시기 바랍니다. 사실 저도 공부가 필요한 부분입니다만.. 일단 형식 갖추는데 집중해 보도록 하겠습니다.(추후 관련해서 포스팅 해보도록 하겠습니다. 혹시라도 1분1초가 급하신 분을 위한 서비스~ 여기를 클릭해서 보세요~)

blog 폴더에 singup.html(소리높여 노래부르기 아닙니다~! 단어 철자 주의!) signup.html을 생성하고 그 파일에 아래의 소스 코드를 복사해서 붙혀넣기 합니다.

<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup" style="padding-bottom: 1em; max-width: 400px;" class="ms-auto me-auto">
  <p style="font-weight: 600; margin-bottom: 0;">Subscribe</p>
  <span style="font-size: 0.9em;">Enjoy this blog? Get notified of new posts by email:</span>
<form action="https://quarto.us14.list-manage.com/subscribe/post?u=c79fb56a311ae347fbe916740&amp;id=ec05dfca03" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	
        <div class="input-group mt-1 mb-2">
        <input type="email" class="form-control" placeholder="Email Address" aria-label="Email Address" name="EMAIL" style="font-size: 0.8em; padding: .2em;">
        </div>              

	<div id="mce-responses" class="clear foot">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- 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_c79fb56a311ae347fbe916740_ec05dfca03" tabindex="-1" value=""></div>
        <div class="optionalParent">
            <div class="clear foot" style="display: flex; align-items: center; justify-content: center;">
              
              
                <input type="submit" value="Subscribe" name="subscribe" style="min-width: 150px; font-size: 0.8em;" id="mc-embedded-subscribe" class="button btn btn-light btn-sm ms-auto me-auto">
            </div>
        </div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

posts 폴더 내 YAML 파일 세팅하기

다음으로 포스팅을 위한 기본 설정을 위해 blog 폴더 안에 posts 폴더를 생성합니다. 그리고 posts 폴더 내에 _metadata.yml 이름의 파일을 생성하고 해당 파일에 아래의 소스 코드를 복사하여 붙혀넣기 합니다.

comments:
  giscus:
    repo: quarto-dev/quarto-web
    category: Blog
title-block-banner: "#EDF3F9"
title-block-banner-color: body
toc-location: left
format:
  html:
    include-after-body:
      - ../signup.html
search: false

실제 포스팅 해보기

이제 실제 포스팅 하는 작업을 하겠습니다. posts 폴더 내 url 주소에 들어갈 텍스트로 폴더를 생성합니다. 여기서는 2024-01-24-first-post 이름의 폴더를 생성하고 그 안에 index.qmd 파일을 생성합니다. 그리고 아래의 소스 코드를 복사하여 붙혀넣기 합니다. 그리고 렌더링을 실행하여 localhost 로 띄워주는 웹사이트에서 Blog 메뉴를 클릭하면 아래와 같이 첫번째 포스팅이 완성된게 확인됩니다.(참고로 이미지는 별도작업을 하지 않아서 나타나지 않는데 조금 있다가 그 작업을 해보겠습니다.) 해당 포스트를 클릭하면 세부내용을 확인할 수 있습니다.

---
title: 블로그 리스팅 성공
subtitle: 이것은 나의 첫번째 포스트입니다.
description: |
  생각보다 어렵지만 재미가 있습니다..
categories:
  - Quarto
  - study
author: TERE
date: "01/24/2024"
image: "success.jpg"
image-alt: "성공하는 어린이의 이미지입니다."
---

생각보다 복잡하지만 재미가 있습니다.

그러면 두번째로 포스팅을 하려면 어떻게 하면 될까요? 살짝 감이 오시나요? posts 폴더 내에 또 다른 포스트 폴더를 만들고 그 폴더에 index.qmd 를 생성하고 렌더링 하면 됩니다.

첫번째와 두번째 포스팅 작업을 보면서 코드 소스창에 보이는 title, subtitle, descrition, categories, author, data 이 렌더링을 해서 웹사이트 Blog 메뉴에서 보이는 것과 매칭이 잘 되시나요? 다른 무엇보다 하나를 설명드리자면, Categories 부분에 Authoring, Features 등으로 포스트가 그룹핑된게 보이시나요? 렌더링된 Blog 메뉴화면에서 우측 중간쯤 Categories 아래에 있는 리스트를 클릭하면 그 키워드에 맞는 블로그만 필터링해서 볼 수가 있습니다.

오늘도 짧게 그리고 쉽게 이해되게 하려고 했는데 역시나 길어졌네요. ㅜㅜ

인생이모작이 풍성해지는 그날까지! secondlife.lol 에 테리였습니다.

감사합니다~

추가1. 포스트 리스트에 그림 삽입(썸네일 형식)

웹사이트 블로그 메뉴에서 포스트가 리스트업 되는 부분에서 해당 포스트에 썸네일 형식으로 그림이 표시되게 해보겠습니다. 기존에 만들었던 첫번째 포스팅 폴더(2024-01-24-first-post)에 썸네일 그림을 업로드한 뒤, index.qmd 파일을 열어서 image 와 image-alt 에 해당 그림에 대한 내용을 입력합니다. 이게 끝입니다. 생각보다 쉽지 않나요? image-alt는 어떤 사유로 그림이 표시되지 않을 때 텍스트로 대체하는 문구를 위해 필요합니다.

추가2. 포스트 내용에 그림 삽입

포스트 내용 안에 그림을 삽입하기 위해서는 위에서 업로드한 그림을 그대로 사용하면 됩니다. 아래와 같은 소스코드를 복사해서 포스트 내용 중 원하는 위치에 붙혀넣기 하면 됩니다. 이것도 쉬운 작업이죠? 물론, 그림파일명(success.jpg)과 fig-alt의 내용은 아래 소스 코드 내용과 다르게 하셔야겠죠?

![](success.jpg){.preview-image fig-align="center" fig-alt="성공하는 어린이의 이미지입니다."}

‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.