이 글은 이노팩토리 블로그에 포스팅하는 방법을 안내합니다.
이노팩토리 블로그는 Hugo 기반으로 운영되기 때문에 일반적인 웹블로그에 비해 저작환경이 열악합니다. 글쓰는 데만 집중할 수 있도록 최대한 자동화 환경을 구성했습니다.
이 글에서는 저작환경 구축하고 글을 작성하여 블로그에 포스팅 하는 일련의 절차를 자세하게 안내합니다. 블로그 글을 예쁘게 작성하는 내용은 다른 글에서 다룰 예정입니다.
저작 관련 도구 설치 및 저작 환경 구성 이 완료된 VM 을 배포하고 있습니다.
VM 을 사용하실 분들은 이 부분을 SKIP 하시고, 글쓰기 와 블로그에 올리기 부분에 집중해주세요.
저작 관련 도구 설치 #
Hugo 설치 #
Windows 명령창에서 다음 명령을 실행하세요.
winget install -e --id Hugo.Hugo.Extended
오류없이 무사히 설치가 끝나셨나요?
Windows 명령창에서 다음 명령을 실행하여, Hugo 설치 성공여부를 알수 있습니다.
hugo version
다음과 유사한 화면이 나타나면 설치에 성공한 것으로 볼 수 있습니다.
TortoiseSVN 설치 #
TortoiseSVN 은 Windows 탐색기에서 SVN 기능을 편리하게 사용하게 해주는 유틸리티입니다.
다음 주소에서 설치본을 다운로드 받아 설치해주세요.
Windows 10 의 경우, 다음과 같이 선택하시면 됩니다.
Typora 설치 #
Markdown 파일을 편집하는 주로 사용하는 도구는 Typora 입니다. Visual Studio Code 도 Markdown 을 편집하는데 사용하는 큰 불편함은 없으나, 글을 쓰는 맛으로만 평가한다면 Typora 가 최고의 Markdown 편집기라고 해도 과언이 아닙니다.
Typora 는 오픈소스 Markdown 편집기로 다음 주소에서 다운로드 받을 수 있습니다.
Typora — a markdown editor, markdown reader.
저작 환경 구성 #
Typora 설정하기 #
Typora 에서 블로깅 관련한 중요한 설정은 이미지 관련된 설정입니다.
이노팩토리 블로그에서는 이미지 파일 관리를 편리하게 하기 위하여 페이지 번들을 사용합니다.
페이지 번들이란 내용을 담고 있는 마크다운 파일인 index.md 와 이 파일에서 사용하는 이미지 같은 외부 리소스들이 하나의 디렉터리에 모여있는 구조를 표현한 Hugo 만의 특별한 개념입니다.
우리는 앞으로 마크다운 파일과 이미지들을 한 디렉터리에 관리할 것입니다.
Typora 를 실행한 후, 파일 > 환경설정 으로 이동하세요.
이미지 영역에서 다음과 같이 설정하세요.
블로그 작업 디렉터리 준비 #
블로그 사이트 전체를 저장할 로컬 디렉터리가 필요합니다.
여기서는 이 디렉터리를 D:\blogs\innofactory 로 가정합니다.
Subversion 을 이용하여 이노팩토리 블로그 사이트를 체크아웃하세요. 명령창에서의 명령은 다음과 같습니다.
svn co <블로그사이트 저장소URL> D:\blogs\innofactory
글쓰기 #
Hugo 서버 실행하기 #
편집 중인 글을 실시간으로 미리보기 하려면, 내 로컬 컴퓨터에 hugo 서버가 실행되고 있어야 합니다. hugo 는 웹서버를 내장하고 있기 때문에, 내 로컬 컴퓨터가 웹사이트 서비스라고 생각하면 됩니다.
다음과 같이 hugoserver.bat 를 이용하여 간단한게 미리보기용 웹서버를 실행할 수 있습니다.
cd D:\blogs\innofactory
hugoserver
이 서버는 웹브라우저를 이용하여 http://localhost:1313/blog 로 접근할 수 있습니다.
Post 생성하기 #
이제 글을 쓸 시간입니다!!
블로그 사이트 작업공간으로 이동한 뒤, new.bat 를 이용하면 새로운 Post 를 생성할 수 있습니다.
우선, 블로그 사이트 작업공간으로 이동하세요.
cd D:\blogs\innofactory
new.bat 의 기본 사용 방법은 다음과 같습니다.
new <저자ID> <Post디렉터리명>
이 글의 예시에서는 저자ID 가 seanbryu 이고, Post디렉터리명은 20230603-mypost-1 이라고 가정합니다.
저자ID 는 등록된 저자를 사용해야 합니다. 등록되지 않은 저자ID 를 사용할 경우, 유틸리티가 제대로 동작하지 않습니다. 이 글을 읽기 전에 블로그 관리자에게 저자 등록을 요청하세요.
Post디렉터리명은 저자가 마음대로 명명하면 됩니다.
Post디렉터리명은 mypost-1 또는 how-to-implement 와 같이 영어와 숫자만 써서 알아보기 쉽게 명명하게 되는데, 작업의 편의나 정렬 등 여러가지 이유로 생성일시 등을 앞쪽에 추가할 것을 권장합니다. 예를 들면, mypost-1 보다는 20230604-post-1 형태로 명명한는 것이 보다 좋은 방법입니다.
이 글의 가정을 적용한 예시는 다음과 같습니다.
new seanbryu 20230603-mypost-1
위 명령은 D:\blogs\innofactory\content\posts\seanbryu\20230603-mypost-1 에 Hugo 의 페이지번들을 만듭니다.
Post 편집하기 #
블로그의 내용은 페이지 번들 내의 index.md 의 내용으로 표현됩니다.
앞쪽 예시에서 Post 내용을 편집하고 싶다면, D:\blogs\innofactory\content\posts\seanbryu\20230603-mypost-1\index.md 파일을 수정하세요.
편집한 내용 미리보기 #
hugo 서버가 실행 중이라면, 웹 브라우저로 http://localhost:1313/blog 로 접속하면 편집 중인 글을 볼 수 있습니다.
미리보기 모드에서는 index.md 를 변경하는 순간 곧바로 수정된 내용에 맞춰 웹브라우저의 내용이 변경됩니다.
블로그에 올리기 #
초안모드 변경하기 #
블로그에 보이게하려면 초안(draft) 모드를 꺼야 합니다.
index.md 파일 앞단에 있는 Front Matter 에서 draft 속성을 false 값으로 변경하세요.
다음은 draft 옵션이 꺼진 Front Matter 의 예시 입니다.
title: "Hugo BlowFish 테마에서 여러 명의 저자 구현하기"
date: 2023-05-28T22:51:38+09:00
draft: false
description: "Configure multiple authors for your articles."
slug: "multi-author"
tags: ["authors", "config", "hugo", "blowfish"]
showAuthor: false
authors:
- "seanbryu"
- "mjun"
showAuthorsBadges : true
draft 속성값을 false 로 변경한다고해서 작성글이 곧바로 이노팩토리 블로그에 게시되는 것은 아닙니다. SVN 에 작성한 파일들을 업로드하고, Publishing 자동화 단계를 거쳐야 비로소 게시가 됩니다. 업로드 이후, 시간이 지나면, 작성된 글이 게시된 것을 확인하실 수 있습니다.
블로그 저장소에 업로드 #
이제 완성된 글을 블로그 저장소(SVN)에 업로드 해봅시다. 포스팅의 마지막 단계 입니다.
블로그 사이트 작업공간으로 이동한 뒤, upload.bat 유틸리티를 실행하면 작성한 글을 서버에 업로드할 수 있습니다.
우선, 블로그 사이트 작업공간으로 이동하세요.
cd D:\blogs\innofactory
upload.bat 의 기본 사용 방법은 다음과 같습니다.
upload <저자ID> [<Post디렉터리명>]
이 글의 가정을 적용한 예시는 다음과 같습니다.
upload seanbryu 20230603-mypost-1
만약, 저자의 모든 글을 업로드하고 싶다면, 다음과 같이 저자ID만 지정해도 됩니다.
upload seanbryu
마무리 #
보다 편리한 글쓰기를 위해 이 환경들이 만들어진 VM 을 배포하고 있습니다.