고스트 블로그 무료 설치 및 만들기 (feat. Github)

매달 돈 나가는게 싫어서 되도록이면 무료인 깃허브 블로그를 썼었는데,
마크다운으로 글 쓰다보니 이미지부터 글 하나까지 포스팅 하나하는데 진짜 너어무 귀찮았다.
그래서 몇년을 방치하다가 이번에 제대로 된 기술블로그를 만들어보자며 찾다가 알게 된 고스트 블로그를 만들기로 했다.
 
그런데 문득 깃허브 페이지 도메인으로 고스트 블로그를 만들 수 있지 않을까 했는데
실제로 나같은 생각을 한 사람도 있어서 그 사람 덕분에 몇번 삽질 끝에 이게 됬다. (이게 된다고!?)
 
결론부터 말하자면 고스트 블로그를 로컬 호스팅에 설치하고 이걸 변환해서 깃허브로 올리는 방법을 사용했다.
이 방법의 가장 큰 장점은 무료라는 것! 하지만 그 이외가 모두 단점인게 단점인데..
일단 새로운 글을 쓸때마다 매번 변환을 해줘야한다는 것이 젤루 귀찮다...
그리고 동적 서버 형식이 아니라 회원가입이나 구독, 댓글 같은 기능은 안된다.
심심해서 만들어보기는 했는데 해보니까 아무래도 아닌 것 같아서 그냥 서버랑 도메인 사서 만들기로 했다.
하지만 또 누군가는 이런 정보도 필요하지 않을까 싶어서 남기는 포스팅... 우리의 돈은 소중하니까..... 데헷

 

0.  준비사항

NodeJS 설치하기

• Ghost 는 Node.js 기반이라 먼저 Node.js가 설치되어 있어야 한다. Node.js를 설치하려면 공식 홈페이지가서 다운 받으면 되고, 버전을 확인하려면 터미널에 node -v 명령어를 넣어주면 된다.
• 참고로 Node.js는 자바스크립트를 브라우저 외의 환경에서도 사용할 수 있게 해주는 런타임으로, 보통은 서버나 응용 프로그램 실행용으로 사용한다.

yarn이나 npm 설치하기

• 패키지 관리를 위해 yarn이나 npm가 깔려 있어야 한다. 고스트 홈페이지에서는 둘 중 하나라고 하는데 하나만 까니까 이상한데서 에러가 나길래 나는 그냥 두 개 다 깔았다.
• 참고로 Node.js에서 자주 쓰이는 자바스크립트 코드들을 패키지로 만들어 사용할 수 있는데, npm(node package manager)은 이렇게 미리 만들어져 있는 패키지들을 관리하는 저장소다.
• 터미널에서 아래 npm 설치 코드를 적어주면 되며, yarn 설치는 npm을 통해서 하는게 좋다고 한다.
• 만약 권한이 없다고 나오면 설치할 때 명령어 앞에 어드민 권한을 말하는 sudo 를 붙여주면 된다.

npm install -g npm                  // npm 설치
npm update -g npm                   // 만약 설치되어 있으면 최신 버전으로 업데이트
npm --version                       // npm 버전 확인

npm install --global yarn               // yarn 설치
yarn --version                          // yarn 버전 확인

 

1.  로컬에 고스트 블로그 설치하기

• 터미널을 열어 먼저 ghost를 설치할 빈 폴더를 생성하고 해당 폴더로 이동한다.

pwd                               // 현재 위치 확인
mkdir 폴더명                        // ghost 설치할 폴더 생성
cd 폴더명                           // 해당 폴더로 이동

• 아래 명령어를 입력해서 고스트를 설치한다.

ghost install local

• 설치가 완료되면서 http://localhost:2368/ghost 같은 주소가 나오는데, 해당 페이지로 이동하면 고스트에 가입하는 페이지가 나온다. 그러면 admin 대시보드가 나오는데 이제 마음대로 이쁘게 커스터마이징하면 된다. 신난다리 ~~

 

2.  깃허브 페이지 생성하기

• 깃허브로 가서 새로운 저장소(https://github.com/new)를 만들어 준다.
• 참고로 깃허브 페이지를 만드려면 저장소 이름(Repository name)이 아이디.github.io 로 적어야 한다. 그리고 설정을 아래처럼 Public으로 하고 생성하면 끝이다.

 

3.  고스트 블로그 깃허브 페이지에 올리기

홈브루와 wget 설치하기

• 고스트 블로그와 깃허브 페이지가 설치가 완료되면 이제는 완성된 고스트 블로그를 깃허브에 올리면 된다.
• 참고로 깃허브는 백엔드가 없는 정적인 홈페이지라서, 고스트 블로그를 단순하게 변형시켜주는 과정이 필요하다. 이 과정에서 홈브루와 wget이 설치되어 있어야 한다.
• 홈브루(https://brew.sh/) 홈페이지 내 'Install Homebrew' 부분의 코드를 터미널에 입력한다. 참고로 brew --version 로 현재 버전을 확인할 수 있으며, brew update 로 brew를 최신 버전으로 업데이트할 수 있다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew install wget

• 고스트 블로그 대시보드 왼쪽 하단의 톱니바퀴 모양 아이콘을 눌러 설정(Settings) 페이지로 들어가고, 거기서 Design 메뉴를 클릭한다.
• 그러면 블로그 디자인을 변경할 수 있는 페이지가 나오는데, 왼쪽 하단의 'Change Theme' 버튼을 눌러준다.
• 그러면 오른쪽 상단에 'Advanced'라는 버튼이 보이는데 해당 버튼을 누르고 현재 Activate된 테마를 클릭해서 Zip 파일로 다운로드 받는다.
• Zip 파일 압축을 풀고 해당 폴더를 VSCode에서 열어준다. 그리고 VSCode 내 터미널을 열어서 아래 명령어를 적어준다.
• 참고로 아래 명령어는 wget으로 파일 변환해서 docs 폴더에 저장한다는 뜻인데, 마지막 주소만 자기 로컬서버주소로 바꾸면 된다.

wget -r -nH -P docs -E -T 2 -np -k http://localhost:2368

• 위에까지 잘 되었다면 docs 폴더가 생기고 그 안에 파일들이 생겼을꺼다. 이제 그 파일들을 깃허브에 올려주면 된다.
• 참고로 원격 저장소 페이지 왼쪽 'branch' 글씨 옆에 써져있는 main이 브랜치명이고, 'Code' 버튼을 클릭하면 뜨는 HTTPS가 원격 저장소 주소다.

cd docs                                // docs 폴더로 이동
git init                               // git 실행
git add -A                             // docs 폴더 내 파일 전체 추가
git commit -m "커밋 메세지"               // 커밋
git remote add origin 원격저장소주소       // 원격저장소에 추가
git push -u origin 브랜치명              // 푸시

 

Reference

• https://youtu.be/HCpY2YIvd7Q