내 웹사이트를 만들 때 쓰는 도구들
원문은 Ben Hoyt님이 에 게재했습니다. 이 블로그 구독하기
가끔 웹 개발을 이제 막 시작한 분들에게서 이런 내용의 이메일을 받곤 합니다. “benhoyt.com 웹사이트는 뭘로 만드셨나요? Content Management System을 쓰시나요? 어떤 테마를 사용하시나요?” 같은 질문이죠.
저는 보통 간단하게 답하곤 합니다. 최대한 단순하게 유지하는 걸 좋아해서, 텍스트 에디터로 Markdown 파일을 작성하고 Jekyll 정적 사이트 생성기로 로컬에서 테스트한 뒤 Git 도구로 GitHub Pages에 푸시해 바로 게시한다고요. 화려한 “테마”는 쓰지 않고, HTML과 CSS 몇십 줄로 직접 만든 간단한 레이아웃을 사용합니다.
관심 있으신 분들을 위해 좀 더 자세한 내용을 아래에 적어 둡니다. 다음에 같은 질문을 받으면 이 글로 안내하려고요!
무료 호스팅 (GitHub Pages)
저는 GitHub의 무료 웹사이트 호스팅 서비스인 GitHub Pages를 사용합니다. GitHub 저장소를 만들고 GitHub Pages를 활성화하면 몇 분 만에 완전히 동작하는 웹사이트가 생깁니다. 제 웹사이트 저장소 보기.
커스텀 도메인을 연결할 수도 있는데(제 도메인은 benhoyt.com입니다), 무료 TLS 암호화도 제공해서 https URL이 그대로 동작합니다.
GitHub Pages는 Jekyll이라는 정적 사이트 생성기를 사용해 소스 파일—보통 Markdown으로 작성됩니다. 자세한 내용은 아래에서—로부터 HTML 웹 페이지를 생성합니다. 기본으로 제공되는 레이아웃, 즉 “테마”가 몇 가지 있지만, 온라인에 있는 수백 가지 무료 Jekyll 테마 중 하나를 쓰거나 직접 만들 수도 있습니다.
GitHub Pages로는 오픈소스 프로젝트용 웹사이트를 호스팅할 수 있을 뿐만 아니라, GitHub 사용자 이름과 연결된 개인 웹사이트도 호스팅할 수 있습니다. 웹사이트 소스 저장소는 공개로 설정해야 하지만, 어차피 결과물인 웹사이트 자체가 공개되는 것이므로 저는 문제라고 생각하지 않습니다.
GitHub Pages를 적극 추천합니다. 무료이고 그냥 잘 동작합니다. 프로그래머가 아니더라도 “컴퓨터를 좀 다룰 줄 아는” 분이라면 사용하는 데 어려움이 없을 겁니다. 기본 제공 테마 중 하나를 쓰면 되고, GitHub 온라인 텍스트 에디터를 이용하면 Git을 따로 배울 필요도 없습니다.
GitHub에서 무료 호스팅을 제공하니, 저는 그 제품을 홍보하는 것으로 감사 인사를 전합니다! :-)
정적 사이트 생성 (Jekyll)
저는 “작은 웹(small web)”을 좋아합니다. 비교적 단순한 기술로 동작하면서 파일 크기가 작고 빠른 웹 페이지를 말하죠. 정적 사이트 생성이 여기에 딱 맞습니다. 사이트를 업데이트할 때마다 도구(“정적 사이트 생성기”)가 소스 파일을 바로 제공할 수 있는 HTML 웹 페이지로 변환해 줍니다.
이렇게 만들어진 페이지는 어떤 정적 파일 서버로도 제공할 수 있습니다. 아주 작은 클라우드 가상 머신으로도 초당 수백 개의 정적 파일을 제공할 수 있어, 예를 들어 Hacker News 홈페이지에 올라가 “죽음의 포옹(hug of death)”을 받을 때도 사이트가 충분히 버틸 수 있습니다.
앞서 말했듯이 GitHub Pages는 Jekyll이라는 정적 사이트 생성기와 함께 동작합니다. Jekyll용 콘텐츠 파일은 보통 Markdown으로 작성되며, 레이아웃, 제목, URL 같은 메타데이터를 담는 짧은 YAML 헤더를 가집니다. 예를 들어 이 글의 소스 코드 앞부분은 이렇게 생겼습니다:
---
layout: default
title: "The tools I use to build my website"
permalink: /writings/tools-i-use-to-build-my-website/
description: "The tools I use to build my website: GitHub Pages ..."
---
<h1>{{ page.title }}</h1>
<p class="subtitle">August 2022</p>
Every so often I get an email from someone starting out in web
development who asks something along these lines: "What do you use to
create your website, `benhoyt.com`? Do you use a Content Management
System? What theme do you use?"
...물론 HTML로 직접 손으로 간단한 웹사이트를 만들어 GitHub Pages에 호스팅할 수도 있습니다. 다만 Jekyll(또는 다른 정적 사이트 생성기)을 사용하면 모든 페이지에 동일한 HTML 레이아웃을 포함시킬 수 있고, 블로그 글 전체를 모아 링크하는 인덱스 페이지를 만드는 등 여러 가지를 프로그래밍 방식으로 처리할 수 있습니다.
간단한 커스텀 레이아웃 (HTML과 CSS)
저는 최대한 최소한으로 유지하면서 어떻게 동작하는지 이해하는 걸 좋아해서, 기본적인 HTML과 CSS로 직접 간단한 커스텀 레이아웃을 만들었습니다.
위 코드 조각에서 첫 줄이 layout: default인 것을 볼 수 있습니다. Jekyll에서는 여러 레이아웃을 가질 수 있지만, 제 사이트를 비롯한 많은 단순한 사이트는 하나만 사용하며, 이 경우 이름이 “default”입니다.
제 HTML 템플릿과 CSS 스타일은 _layouts/default.html에 있으며, 보기 편하도록 약간 단순화하면 이렇게 생겼습니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
{% if page.description %}
<meta name="description" content="{{ page.description | escape }}">
{% else %}
<meta name="description" content="Ben Hoyt is an experienced software engineer at Canonical. He and his wife and three daughters live in Christchurch, New Zealand.">
<meta name="keywords" content="Ben Hoyt, Benjamin Hoyt, Ben, Hoyt, software, engineer, Canonical, Compass, Jetsetter, Oyster.com, TripAdvisor, Brush Technology, Ben Hoyt's CV, Ben Hoyt's resume">
{% endif %}
<meta name="author" content="Ben Hoyt">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<style type="text/css">
body { background: white; color: #301800; font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; font-size: 17px; line-height: 1.6; word-spacing: 0.1em; margin: 0 auto; max-width: 1000px; }
#menu { margin: 0 auto; width: 92.5%; height: 5.5em; border-bottom: 1px solid #d0c8c0; }
#content { margin: 2em auto; width: 92.5%; max-width: 700px; }
@media (max-width: 750px) {
body { font-size: 15px; }
#menu ul.links { font-size: 75%; }
}
@media (max-width: 615px) {
body { font-size: 13px; }
#menu { height: 7.5em; }
#menu .site-title { float: none; }
#menu ul.links { float: none; margin: -0.5em 0 0 -0.8em; }
h1 { margin-top: 0.5em 0; }
}
/* ... other CSS rules ... */
</style>
</head>
<body>
<div id="container">
<div id="menu">
<div class="site-title"><a href="/">Ben Hoyt</a></div>
<ul class="links no-print">
<li>{% if page.url == '/' %}<b>Home</b>{% else %}<a href="/" title="Go to the home page">Home</a>{% endif %}</li>
<li>{% if page.url == '/cv/' %}<b>Resume/CV</b>{% else %}<a href="/cv/" title="Go to my Resume/CV">Resume/CV</a>{% endif %}</li>
<li>{% if page.url == '/projects/' %}<b>Projects</b>{% else %}<a href="/projects/" title="Projects I've authored">Projects</a>{% endif %}</li>
<li>{% if page.url == '/writings/' %}<b>Tech Writing</b>{% else %}<a href="/writings/" title="Stuff I've written">Tech Writing</a>{% endif %}</li>
<li>{% if page.url == '/writings/non-tech/' %}<b>Non-Tech</b>{% else %}<a href="/writings/non-tech/" title="Stuff I've written">Non-Tech</a>{% endif %}</li>
<li><a href="mailto:[email protected]" title="Email me">Email</a></li>
</ul>
<ul class="links print-only">
<li><a href="https://benhoyt.com/">benhoyt.com</a>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
<div id="content">
{{ content }}
</div>
</div>
<script data-goatcounter="https://benhoyt.goatcounter.com/count" async src="https://gc.zgo.at/count.js"></script>
</body>
</html>이 글은 HTML이나 CSS 튜토리얼이 아니므로 동작 원리를 자세히 설명하진 않겠습니다. 꽤 단순한 반응형 레이아웃이라 모바일에서도 큰 화면에서도 보기 좋습니다(위의 @media 쿼리를 참고하세요). 큰 화면에서는 텍스트 최대 너비가 700px이라 줄이 너무 길어져 읽기 어려워지는 일을 방지합니다.
제 템플릿은 CSS를 각 페이지의 <style> 섹션에 인라인으로 포함합니다. CSS 용량이 작고 대부분의 방문자가 한두 페이지만 보기 때문에, 매 페이지에 직접 포함해서 두 번째 HTTP 요청을 피하는 편이 더 빠릅니다.
현재 레이아웃은 2018년쯤 업데이트한 것입니다. 그전에는 사이드바가 있고 좀 더 올드스쿨한 느낌이었는데, 예전 홈페이지 스크린샷은 이렇게 생겼습니다:
간단한 분석 (GoatCounter)
GoatCounter를 분석 도구로 사용합니다. 기본적으로 어떤 페이지가 인기 있는지 보여 주는데, 제 글이 Hacker News나 Reddit에 올라갔을 때 살펴보는 재미가 있습니다.
오늘 모습은 이렇습니다(며칠 전 제 “단어 수 세기” 성능 비교 글이 Hacker News에 올라와서 기본 보기 결과가 좀 치우쳐 있습니다):
GoatCounter는 설정이 정말 쉽습니다. 계정을 만들고 위에 나온 한 줄짜리 <script> 태그만 포함하면 됩니다. 호스팅 버전은 “합리적인” 개인 사용에는 무료이며, 원하면 유료로 이용하거나 직접 호스팅할 수도 있습니다.
예전에는 Google Analytics를 쓰다가 2019년에 GoAccess 로그 분석기로 교체했고, 2021년에 GoatCounter로 다시 갈아탔습니다. 조금 더 깔끔하고 관리하기 쉽더군요.
콘텐츠 추가 및 편집 (Sublime Text)
사이트에 새 글을 추가하거나 기존 콘텐츠를 업데이트할 때는 그냥 Sublime Text—제가 쓰는 텍스트 에디터—를 켜고 글을 씁니다.
새 글을 쓸 때는 보통 기존 글 파일 하나를 복사해 내용을 지우고 시작합니다. 그래야 YAML 헤더 구조를 정확히 맞출 수 있거든요. 또 Sublime의 방해 금지 모드를 사용해서 어두운 화면에 텍스트만 보이게 합니다. UI도, 아이콘도 없고 작업 중인 Markdown 텍스트만 보입니다.
글을 쓰는 동안에는 터미널에서 jekyll serve를 실행해 http://localhost:4000으로 접속하면 게시 전에 렌더링된 글 모습을 미리 볼 수 있습니다.
저는 Sublime Text를 정말 좋아하지만 유료이고, Notepad++, VS Code, Vim 같은 무료 텍스트 에디터 중 하나를 써도 똑같이 쉽게 할 수 있습니다. Markdown에는 특별한 게 없으니 메모장을 써도 되고, GitHub.com에서 바로 온라인으로 파일을 편집할 수도 있습니다.
변경 사항 검토 및 GitHub에 푸시 (Sublime Merge)
글을 게시할 준비가 되면 그래픽 Git 도구인 Sublime Merge로 넘어가 변경 사항을 커밋하고 푸시(저장 및 게시)합니다. 그러면 GitHub Pages가 1~2분 안에 인터넷에 게시해 줍니다.
이 글의 초안을 커밋하는 Sublime Merge 스크린샷입니다:
수정을 할 때도 그냥 텍스트 에디터로 돌아가 변경한 뒤, Sublime Merge에서 diff를 검토하고 커밋 및 푸시합니다.
마찬가지로 저는 Sublime Merge를 좋아하지만—빠르고 diff UI가 훌륭합니다—커맨드라인 git 도구나 다른 무료 그래픽 Git 클라이언트를 써도 같은 작업을 쉽게 할 수 있습니다. 혹은 GitHub.com에서 온라인으로 파일을 편집하면 Git 관련 작업은 GitHub이 알아서 처리해 줍니다.
요약
요즘 웹사이트를 만들고 호스팅하는 건 어렵지 않으며, 연간 약 10달러 정도 하는 도메인을 제외하면 비용도 들지 않습니다.
개발자라면 제가 사용하는 구성—Jekyll과 함께하는 GitHub Pages, 그리고 독자가 엄청난 양의 JavaScript를 다운로드할 필요가 없는 군더더기 없는 레이아웃—을 적극 추천합니다. 웹 페이지를 작고 빠르게 유지해 나갑시다!
댓글
로그인하고 댓글 남기기