Coding Log

사용된 기술 스택

참고 Static Tools / Jekyll 카테고리

참고 BaaS / Firebase Hosting 카테고리

Firebase 호스팅에 Jekyll로 정적 웹사이트 배포하기

Firebase Hosting에 관련된 포스팅을 하면서 종종 언급했던 단어가 있다.

바로 정적 웹 사이트라는 단어인데, 블로그에 Jekyll 관련 키워드로 들어오신 분이라면 정적 웹사이트가 무엇인지 궁금하거나, 어느정도 알고 있는 사람이라고 할 수 있겠다.

아래의 카테고리에 Jekyll의 최신 Document 번역본을 포스팅해놓았으니 Jekyll에 관심이 있다면 일독을 권한다.

참고 Jekyll 포스팅 목록

Jekyll에 대해 간단히 설명을 하자면 Ruby로 작성된 정적 웹사이트를 제작할 수 있는 도구이다.

가장 많이 쓰는 조합으로 Jekyll XXX Github Pages 가 있다.

Jekyll에서 Github Pages를 이용해 정적 웹사이트를 배포하는 방법은 아래 포스팅을 참고하자.

참고 Jekyll XXX Github

여기서 Github Pages와 Firebase Hosting의 공통점을 생각해보자.

바로 둘 다 정적 웹 사이트를 배포할 수 있다 는 것이다.

본 카테고리인 Firebase - Hosting에서 정적 웹사이트를 배포하는 방법을 포스팅하였으니 아래 링크를 참고하자.

참고 Firebase Hosting 환경 설정 및 배포

이제 위의 참고 목록들을 매쉬업하여 Jekyll로 Firebase Hosting에 정적 웹 사이트를 배포해보자.

준비물

  • Google Account

  • Ruby (Jekyll 2 : v1.9.3이상, Jekyll 3 : v2이상)

  • RubyGems

  • GCC

  • GNU Make

  • Node.js / NPM

  • Python 2.7

참고 Jekyll 설치하기 포스팅

Jekyll이란 무엇인가?

참고 Jekyll에 관하여 포스팅

Firebase Hosting이란 무엇인가?

참고 Firebase Hosting 소개 포스팅

Firebase Project 생성

물론 Firebase에 프로젝트를 먼저 생성해야 하며 구글 계정이 필요하다.

프로젝트를 생성하기 위해선 아래 링크를 방문하자.

참고 Firebase Console

위의 Firebase Console 사이트에 들어가서 Jekyll로 Hosting할 프로젝트를 하나 생성한다.

프로젝트 만들기 버튼을 누르고 나면 프로젝트가 생성되며 아래의 화면이 보인다.

좌측의 개발탭에 있는 서비스 중 Hosting 을 선택해보자.

Hosting에 대한 간단한 설명과 함께 시작하기 버튼이 있는 것을 확인할 수 있다.

Firebase CLI 설치

잠시 브라우저를 최소화시키고 터미널을 열어보자.

터미널의 아래 명령어를 입력하면 된다.

npm install -g firebase-tools

위의 명령어를 수행하다가 아래 처럼 오류가 날 수도 있다.

권한이 없는 것이니 사용자 스크립트 설정을 바꾸던지 sudo 명령어를 사용하자.

sudo npm install -g firebase-tools

위와 같이 트리구조가 나온 뒤 다시 터미널이 대기 상태로 돌아오면 설치가 완료된 것이다.

Firebase Login

이제 Firebase CLI 환경에서 로그인을 해야 한다.

터미널에서 아래 명령어를 입력한다.

firebase login

그럼 CLI 관련 권한 요청이 뜨고 Y를 입력해서 동의하면 된다.

그럼 브라우저가 열리며

위와 같은 화면이 나온다. 여기서 허용을 누르자.

허용을 누르면 로그인 성공이라는 화면으로 바뀐다.

터미널도 확인해보자.

위와 같이 뜬다면 Firebase CLI 설치와 함께 로그인도 완료한 것이다.

Jekyll 초기화

Firebase Hosting에 업로드할 프로젝트를 구성할 폴더를 생성하자.

Jekyll을 이용해서 프로젝트 폴더 생성 및 초기화를 동시에 진행하자

jekyll new <PROJECT_NAME>

원하는 폴더명 혹은 프로젝트 명을 <PROJECT_NAME>에 넣어보자.

본인은 jekyll_firebase로 지정했다.

생성되었다면 아래와 같은 결과가 터미널에 표시될 것이다.

터미널에서 프로젝트 폴더로 이동하여 프로젝트를 한 번 빌드해보자.

jekyll build

위의 명령을 수행하고 나면 아래의 화면처럼 터미널에 빌드 결과가 표시되며

_site 폴더가 생성되면서 Jekyll의 기본적인 정적 블로그가 생성되었을 것이다.

만약 아래 명령어를 통해 serve 명령어를 실행한다면 Jekyll의 기본 블로그를 로컬호스트에서 확인할 수 있다.

본 포스팅을 끝까지 따라하면 위의 기본 Jekyll 사이트를 Firebase Hosting에 배포할 수 있게 된다.

Firebase Application 초기화

이제 터미널에서 Application을 초기화해보자.

아래의 명령어를 입력한다.

firebase init

Firebase라는 글과 함께 프로젝트 초기화가 시작된다.

위의 선택지는 총 3개인데 Real-Time Database, Functions, Hosting 이다. Firebase의 서비스들인데 정적 웹 사이트만 올릴 생각이면 Hosting만 선택하면 되지만 3가지 다 선택해도 상관없다.

선택/해제는 해당 옵션에서 스페이스를 누르면 선택할 수 있다.

Real-Time Database와 Functions는 추후 따로 다루도록 하겠다.

엔터를 치면서 다음 단계로 계속해서 진행하자.

프로젝트 리스트에서 위에서 생성한 프로젝트를 선택하자.

최초 생성시 아마 하나밖에 존재하지 않을 것이다.

그 다음 Database 설정 파일명을 입력하면 된다. 그냥 엔터를 치면 회색으로 표시된 database.rules.json이 기본값으로 적용되며, 앞으로도 동일하게 적용된다.

Funtions 설정이 진행된 후에 npm 의존성 관련 파일들을 설치할건지 물어오는데 Y를 입력하자.

설치가 완료된 후 public directory를 만들건지 물어오는데 이 폴더에 들어있는 내용이 웹상에 배포된다.

즉 정적 웹 사이트 프로젝트를 public directory에서 구현하면 된다.

엔터를 치면 폴더명으로 public을 사용한다.

하지만 우리는 Jekyll로 이미 정적 웹 사이트를 만들어 놓았고, Jekyll의 기본 설정에서 정적 웹 사이트가 만들어지는 경로는 _site이므로 _site를 입력하면 된다.

참고 만약 public을 그대로 사용하고 싶으면, Jekyll의 설정파일에서 destination 속성값을 교체하면 된다.

이로써 초기화가 완료되었다.

Firebase Hosting에 배포

터미널에서 아래 명령어를 실행하자.

firebase deploy

배포를 완료하고 나면

위와 같이 출력되고

웹 브라우저에도 배포가 반영된다.

부여받은 URL을 통해 접속하면 아래와 같이 Firebase Hosting을 이용해 Jekyll 정적 웹 사이트가 배포되었음을 확인할 수 있다.

DISQUS 로드 중…
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다