워드프레스로 블로그를 운영하면서 상시 instance를 운용한다는 것과 그 instance를 php에 맡긴다는 것 자체에 대해 너무 스트레스가 있었는데 최근에 다시 블로그 서버가 공격당해서 블로그 설정파일이 엉망진창이 되어서 한동안 서버가 500에러를 내뿜고 있었습니다.
이 기회에 이 지긋지긋한 워드프레스와 작별을 하기 위해 static하게 블로그를 운용하기 위한 방법을 찾아봤을 때 눈에 들어온게 node js 기반의 hexo와 Go 기반의 hugo였습니다.
개인적으로 go라는 언어는 실제로 써보면서도 상당히 긍정적인 이미지의 언어이고 빠른 빌드속도와 설정의 직관성이 마음에 들어서 hugo를 사용해보게 되었습니다.
Wordpress와의 작별
Wordpress 서버의 최근 상태
당시 Wordpress 서버의 접속이력을 살펴보면 해당 서버에 대해 php의 취약점을 활용한 공격과 어이없는 수준의 directory traversal 코인채굴기를 넣기 위한 시도 등등이 보이고 그중에 php취약점을 활용하여 wordpress의 config파일에 접근을 시도하다가 config 파일을 날려먹은 이력이 있었습니다. 이 config가 날아가면 wordpress는 mysql기반 데이터베이스에 정상적으로 접근이 불가능해지고 이것으로 인해 블로그는 500응답을 주며 ssh로 서버에 접속해도 cli의 사용이 불가능했습니다.
그나마 다행인 점은 lightsail 정확히는 bitnami 단위에서 해당 데이터베이스의 기본 정보를 config 이외의 파일에 따로 기록중인 점이였습니다.
/home/bitnami/bitnami_credentials
해당 정보를 사용하여 wp-config 파일에 최소한의 정보를 복구하여 워드프레스의 cli에 대한 접근 권한을 돌려놓을 수 있었습니다.
Wordpress Export
다만 이 권한을 얻고 서버를 살리고 싶은 생각이 도저히 안들어서
wp export 명령을
사용하여 워드프레스 블로그 구성을 전부 xml 파일로 뽑아냈습니다.
이 xml파일에는 그동안 적은 블로그의 글들과 소개와 같은 설정등이 저장되어있습니다.
하지만 이미지 파일들은 서버의 url을 기반으로 url만 저장되기 때문에
이 이미지들을 무사히 확보하기 전까지는 wordpress 서버를 살려둬야했습니다.
해당 이미지 url 접근 결과 해당 url들은 서버 내부의 image url에 직접 접근하는
것이기 때문에 다행히 파일들에는 무사히 접근할 수 있었습니다.
아니였으면 wp-content 폴더를 찾아 나중에 손으로 한번에 연결하는 방법도
가능할 것으로 보입니다.
Hugo로 옮기기
일단 Hugo라는 것을 써보자
Hugo는 Go언어 기반 블로그 프레임워크로 프레임워크 설치하고 해줘! 하면
설정해주는 디렉토리에 맞춰서 글을 작성하면 그것을 build해서
s3와 같은 클라우드의 storage 또는 github page등에 업로드해주는 framework입니다.
개발쪽과 친하지 않다면 설정법 자체가 하나의 장벽이 될 수 있지만
이런 작업들도 익숙하고 또 다양한 기능적 커스터마이징에 기대하면서
사용하게 되었습니다.
hugo quick start페이지를 따라하면 아주 쉽게 블로그를 작성하여 하나의 글을 쓸 수 있습니다. 다만 해당 내용은 build 까지이며 실제로 이 글을 인터넷에 공개하기 위해서는 deploy라는 과정이 필요하게 됩니다.
hugo.toml 파일에 이 블로그에 관련된 설정이 전부 들어가게됩니다.
저는 개인적으로 yaml 형식이 더 편해서 hugo.yaml로 변경하여 yaml 형식으로
작성하고 있습니다.
저는 aws s3에 deploy를 하고 있습니다.
aws cli가 설정이 되어있는 상태에서 다음과 같이 deploy의 목적지를 설정할 수
있습니다.
deployment:
targets:
- name: "s3"
URL: "s3://[s3 Bucket 이름]"
다음과 같은 command로 블로그를 build하고
hugo
targets가 1개일 경우에는 다음과 같이 입력하는 것 만으로도 자동으로 유일한 타겟에 deploy하게 됩니다.
hugo deploy
deploy목적지의 bucket은 static web hosting이 가능한 설정이 되어있어야
접근이 가능하니 다음 post의 1번 항목을 참고하여 설정해주시면 되겠습니다
이후 s3의 static web page url로 접속하면 해당 post가 보이게됩니다.
그럼 wordpress 글들을 hugo로 옮겨보자
블로그를 옮길 때 가장 골때리는건 역시 글들을 옮기는 과정입니다. 그 글들을 작성한 날짜와 같은 정보와 페이지의 구성 이미지 등을 안전하게 들고 옮길 수 있을까가 걱정이였는데 다행히 이것을 담당해주는 tool이 있었습니다.
hugo migration 방법 모음
을 확인해보면 다양한 platform에서 hugo로 migrate하는 방법들이 있습니다.
그 중에 wordpress는 4개의 방법이 소개되어있는데 그 중 제가 사용한 방법은
wp2hugo라는 방법입니다.
당시 wordpress의 gui에 접근이 안되기 때문에 wordpress에 전용 플러그인을 넣어서 export 시키는 방식도 어렵고 현재 사지방 환경이 aws의 cloud9 뿐이기 때문에 최대한 cli만 가지고 작업이 가능해야했기때문입니다.
그나저나 cloud9을 기존 이용자 이외에는 더이상 못쓰게 한다는데 너무 안타깝네요.. 진짜 편한데
wp2hugo의 설치를 완료한 이후 위에서 export한 xml파일을 찾아서
wp2hugo --source [아까뽑은파일이름].xml --download-media --output [결과를 저장할 폴더]
와 같이 실행합니다. 그 외 옵션에 대해서는 wp2hugo github을 참고해주세요!
이번에는 워드프레스 서버를 아주 내려버리는게 목표기 때문에 이미지도 전부 url을
참고하여 다운로드 받게 시켰습니다.
그 결과 papermod라는 테마를 사용하여 블로그 글들을 가지고 hugo의 형식에 맞춰서
파일들이 생성되었습니다.
뭐든 한번에 쉽게 되는 법은 없으니
그대로 build해서 deploy하면 블로그 글들이 전부 잘 들어가있다!! 라는 마법이 있으면 좋겠지만 몇가지 해결해야 할 문제들이 있습니다.
baseURL 설정
먼저 이미지 파일들이 다운로드가 정상적으로 끝났으면 wordpress blog와 url 연결을 끊고
hugo로 만든 페이지의 url과 연결해야합니다.
또는 hugo.yaml에서 baseURL을 임시로 사용할 url과 맞춰야합니다.
그렇지 않으면 post들을 클릭할 때마다 사진을 참조할 때 마다
hugo.yaml에서 baseURL을 참고하여 이동하기에 포스트와 사진이 정상적으로 표시되지 않을 수 있습니다.
post url 버그 수정
content/posts아래의 post를 보시면 다음과 같은 각 post들의 meta 정보가 있는 부분이 가장 위에 있습니다.
---
title:
'워드프레스에서 hugo로 블로그 옮기기'
category:
- aws
- 취미코딩
tag:
- aws
- s3
- hugo
date:
2024-10-09T13:45:24Z
url: /
---
wp2hugo를 사용하여 export한 글을 가져오면 url: / 이라는 항목이 모든 글에 대해 포함되어있는데
해당 내용이 있으면 build 하고 deploy하면 root url을 접속할 때 바로 해당 포스트가 보이게됩니다.
root url 즉 제 블로그로 따지면 blog.ebeb.be에 접속을 하면
간단한 소개글과 글 리스트같은게 보이기를 원하지 특정 포스트가 보이는 것을 원하지 않으실꺼라생각됩니다.
그러므로 해당 post들에서 url 항목을 삭제하여 정상적으로 각 포스트들이 파일이름으로 표시되게 설정해야합니다. 포스트가 많을 경우 해당 포스트를 하나하나 돌아가면서 삭제하기는 어렵기 때문에 다음과 같은 커맨드를 posts 폴더 내에서 사용했습니다.
sed -i 's/url: //g' *.md
이 경우 각 포스트들은 파일이름에 기반한 url이됩니다. 아마 다음과 같을 것 입니다.
{baseURL}/posts/{md 파일이름}
url규격을 바꾸기 위해서는 다음 공식 글을 참고해주세요 URL Management
그 외 잡다한 설정파일 수정
설정 파일들을 이것저것 만졌는데 이 부분이 가장 어려웠던 것 같네요
테마마다 설정 파일들 규격이 다르고 설명도 부족하구
제 블로그의 skeleton 상태를 깃허브에 올려뒀으니 이 프레임에서
hugo.yaml 에서 필요한 내용을 바꾸시고
/content/posts에 위에서 migration한 posts의 *.md파일들을 넣어서
그대로 사용하셔도 좋습니다!
완성!
이것으로 블로그의 대략적인 이사가 완료되었습니다. 심심해보이지만 아직 hugo의 디테일한 설정법을 몰라서 많은 부분에 손을 못대고 있고 나중에 심심하면 다양한 기능과 플러그인을 직접 개발해서 도입시킬 것 같습니다. 블로그 디자인도 조금 바꿔봐야겠네요!