2018.12.3 네이버 블로그에 ‘AllCa 개발 회고’란 제목으로 포스팅.
2019.02.18 워드프레스로 옮기며 수정.
2020.11.02 거의 수정 없이 Velog 로 이동.
AllCa
https://allca.com
https://github.com/drypot/allca
2016년에 만들었고 가끔 업데이트하는 자전거 링크 모음 사이트입니다. 이 사이트 만드는데 사용했던 웹 사이트 기술들에 대해 간단히 정리해 두려고 합니다.
Node.js
처음에는 제 개인 서버에서 Node.js 웹 애플리케이션으로 돌아갔습니다. 그런데 잦은 업데이트/재시동이 귀찮았습니다. 내용이 모두 스터틱한데 웹 애플리케이션으로 돌리는 것도 오바 같았습니다. 해서 Github Pages 방식으로 바꾸었습니다.
GitHub Pages
GitHub 기능 중 하나입니다. 리포지터리에 html 들을 넣어두면 하나의 웹 사이트로 서비스해줍니다. 편리하면서 무료입니다.
master branch 루트를 웹 루트로 할 수도 있고, master branch /docs 디렉터리를 웹 루트로 할 수도 있습니다. 저는 후자를 선호합니다.
Custom Domain
https://help.github.com/articles/using-a-custom-domain-with-github-pages/
보통은 https://drypot.github.io/allca/ 식의 URL 로 접근하게 되는데 커스텀 도메인을 쓸 수도 있습니다. 리포지터리 Setting 에 들어가 손보면 됩니다.
https://help.github.com/articles/securing-your-github-pages-site-with-https/
커스텀 도메인에는 https 를 쓸 수 없었는데 2018년 5월부터 https 지원도 시작됐습니다. Let’s Encrypt 를 찬양.
Jekyll
GitHub Pages 로 변경하면서 처음엔 Jekyll 을 썼습니다. Jekyll 은 Markdown 페이지들을 근사한 html 로 자동 변환하는 루비 프로그램입니다. 독립적인 Markdown 들을 모아서 근사한 블로그처럼 보이게 만들어 줍니다.
Markdown 을 로컬에서 변환할 수도 있지만 GitHub 에서 자동으로 해주기도 합니다. push 하면 GitHub Pages 서버에서 Jekyll 이 자동으로 돌아가는 겁니다. 딜레이는 몇 초 걸리는데 자꾸 push 하면 먼가 좀 길어졌던 것으로 기억;
Jekyll 의 단점
텍스트를 수정하려면 어차피 로컬에 Jekyll 을 띄워 놓고 변환 결과를 브라우저로 봐야 합니다. 루비도 설치하고 Jekyll 도 설치하고 먼가 번잡한 일을 해야 합니다.
Jekyll 은 반응이 꽤 느립니다.
Markdown 이 좋긴 하지만 조금만 이상한 것을 하려고 하면 짜증이 몰려옵니다.
안 되는 것은 아니지만;
해서 Markdown + Jekyll 을 버렸습니다.
No Jekyll GitHub Pages
Jekyll 없이 내가 직접 준비한 html 파일들로 웹 사이트를 서비스할 수 있습니다.
.nojekyll일단 GitHub 서버에서 Jekyll 이 도는 것을 막습니다. 로컬 루트에 .nojekyll 파일을 생성해 두면 됩니다.
docs/index.html html 을 직접 만들어 docs 아래 넣습니다.
이렇게 하고 commit/push 해서 잘 보이나 확인합니다.
잘 보일 겁니다.
Pug
아무리 그래도 날쌩 HTML 을 직접 처넣는 것은 무모합니다. 기본 layout 같은 것은 공통으로 사용해야 합니다. 가끔 include 해야 할 것들도 있습니다. 그러니 자기가 좋아하는 HTML Template 엔진을 사용하는 것이 좋습니다.
현재 저는 Pug 를 씁니다. 예전 이름은 Jade 였는데 상표권 관계로 Pug 로 바뀌었습니다. Node.js + Express.js 쓰는 사람들은 거의 Pug 를 씁니다. 기능도 괜찮고 성능도 괜찮습니다.
extends ../../layout/layout
block head-title
title 자전거 - AllCa
block content
.page-title
h1 자전거
.list-at-pages
.group
ul
li: a(href='http://www.samchuly.co.kr', target='_blank') http://www.samchuly.co.kr, 첼로, 무츠, GT,
li: a(href='http://www.gtbicycles.com', target='_blank') http://www.gtbicycles.com
li: a(href='http://moots.com', target='_blank') http://moots.com
ul
li: a(href='http://www.altonsports.co.kr', target='_blank') http://www.altonsports.co.kr
li: a(href='http://www.amotionbike.co.kr', target='_blank') http://www.amotionbike.co.kr
li: a(href='http://www.smartbike.co.kr', target='_blank') http://www.smartbike.co.krpug 파일들은 이렇게 생겼습니다.
Pug CLI
https://github.com/pugjs/pug-cli
pug 파일들을 html 로 변환하는 것은 pug-cli 툴이 합니다. 설치는.
npm install pug-cli -g변환 명령은 아래와 같습니다.
pug pug/content --watch --out docs로컬 pug/content 아래 pug 파일들을 지속적으로 html 로 변환해서 docs 폴더에 넣어줍니다. html 들을 출력이 끝났으면 commit 하고 push 하면 됩니다.
단점
https://allca.com/bicycle/bicycle.html날쌩 파일을 그대로 서비스하면 URL 끝이 html 로 끝나게 됩니다. 대 사용자용 URL에 확장자가 나오는 것은 별로 좋지 않습니다. 서버 사이드 기술이 바뀌면 링크가 전부 깨지므로; 하지만 뭐 그냥 쓰는 것으로 했습니다;
https://allca.com/bicycle/bicycle/index.htmlbicycle.html 대신 디렉토리를 하나 더 두고 index.html 을 쓰면 URL 이 이뻐진다고 합니다.
만족
빠름, 빠름. Pug 는 Jekyll 보다 꽤 빠릅니다. 기본적으로 HTML Template 이다 보니 Markdown 보다는 이상한 짓 하기도 수월합니다.
나름 만족.
