Hugo를 이용하여 블로그 만들기 🏗️

기존에 사용하던 플랫폼을 버린 이유 :thre

글쓴이 본인은 Wordpress라는 플랫폼을 사용하여 공부한 내용을 적어놓곤 했습니다.. 하지만 필수로 설치해야 하는 플러그인과 편의를 위한 플러그인 몇 개만 깔아도 10개는 우습게 넘어갑니다.

플러그인끼리 충돌하여 문제를 일으킨 적은 없지만 많이 무거웠고 단순히 공부한 내용을 적는 블로그인데 취지와 많이 벗어난 것 같았고 관리 포인트도 많고, 그래서 가볍게 포스팅할 수 있는 플랫폼을 찾던 중 Jekyll이라는 것을 보게 되었습니다. 자료들이 한순간에 없어지면 안 되니 DB 및 데이터 백업도 했습니다.

Jekyll은 일반 다른 블로그 플랫폼과 다르게 글을 작성 및 수정할 수 있는 기본적인 Editor도 없고, 댓글 기능도 없습니다. 물론 추가하면 되긴 하는데 방식이 마음에 안 듦 하지만 Markdown 파일을 이용하여 정적 사이트를 만들어 버리는 아주 강력한 도구입니다. .md파일로 .html파일을 뽑아 레이아웃 구성해 주고 블로그 만들어준다는 의미

데이터베이스가 필요 없으니 PHP 또는 Java 등과 같은 backend 단 WAS가 필요 없고 오로지 Web server만을 이용하여 사이트를 구성한다니 매력적이지 않을 수 없습니다. 하지만 본인이 사용 안 해본 Ruby라는 언어를 사용한다는 점, 파일이 많을수록 정적 사이트를 Build하는 시간이 오래 걸린다는 점에서 또다시 다른 플랫폼을 찾기 시작했고 마침내 Hugo 라는 프레임워크를 발견하고 이렇게 구축하게 되었습니다.

Hugo?

💡 Tips : 휴고(Hugo)는 Go로 작성된 정적 사이트 생성기이다. 2013년 Steve Francia에 의해 처음 개발된 휴고는 현재의 수석 개발자 Bjørn Erik Pedersen(2015년 v0.14 이후)의 도움을 받아 기능, 🚀 성능 면에서 큰 향상을 이루었다. 휴고는 아파치 라이선스 2.0으로 배포되는 오픈 소스 프로젝트이다. wikipedia

위 설명처럼 Markdown 파일을 이용하여 HTML 블로그 사이트를 만들어줍니다.

구성

본인이 포스팅하기 위해 구성한 모습은 아래와 같습니다.

  • Hugo는 Local PC에 설치 및 정적 사이트를 빌드 후 서버에 올립니다.
  • VS Code with extension
    1. SFTP - 우선 개인 서버가 있고 그 곳에 Hugo가 만든 정적인 사이트를 업로드하여 Nginx로 돌릴 예정입니다.
    2. Paste Image - 스크린샷 찍은 후 바로 저장하기 위해 설치했습니다.
    3. Korean Spell Checker - 가방끈이 짧습니다.

vscode는 사랑입니다.

Install

Linux 계열은 각 배포판의 패키지 관리자apt, yum, pacman …로 엄청 쉽게 설치할 수 있습니다. 또한 리눅스를 사용하는 사람들은 대부분 저보다 고수일테니 여기서 소개하지 않겠습니다.

윈도우에서 실치 방법은 아래와 같습니다.

chocolatey 설치 ⚙️

  • 윈도우용 패키지 관리자
  • 관리자 모드로 Power shell을 열어서 Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1')) 명령어를 프롬프트합니다.

Hugo 설치

  • 실행중인 Power shell에 choco install hugo-extended 명령어를 프롬프트합니다.

설치 확인 🧪

  • 실행중인 Power shell에 hugo 명령어를 프롬프트합니다.
  • 설치 확인

Build blog

이제 본격적으로 사이트를 생성해봅시다.

작업 환경 구성

  1. 파일 탐색기를 열어 블로그를 구성할 곳을 찾아 들어갑니다. 찾으셨다면 주소창에 cmd를 입력하고 엔터를 눌러보세요!
  2. 까만 화면이 나왔고 현재 가리키는 경로가 블로그를 구성할 곳이 맞는다면 이제 hugo new site 도메인주소를 입력하고 프롬프트 하세요.
  3. 축하한다는 말과 함께 방금 입력한 도메인 주소로 된 폴더를 보실 수 있을 겁니다. 이제부터 이곳은 루트라고 부를 거고 까만 화면은 계속 사용할 겁니다.

블로그 테마 적용하기

이 곳에 수 백개나 되는 테마가 있습니다. 이 중에 하나는 마음에 드실 겁니다. 들어야 합니다.

  1. 마음에 드는 테마를 고르셨다면 해당 테마를 루트 하위 theme 폴더에 git clone 해주세요.
  2. 클론이 완료되었으면 루트에 있는 config.toml 파일을 열어 맨 아랫줄에 theme = '방금 받은 theme 폴더명'을 입력하고 저장을 누릅니다.

로컬에서 돌려보기 👀

  1. Hugo는 내장된 서버가 있어 간단하게 돌려볼 수 있는데, cmd창에 hugo server -D를 프로롬프트 해봅시다. 그러면 http://localhost:1313으로 접속해볼 수 있습니다.