Jekyll 시작하기
Ubuntu(WSL2) 환경에서 Jekyll 을 시작하는 방법에 대해 설명하겠습니다.
Jekyll은 정적 사이트 생성기(Static Site Generator)입니다.
마크 업 언어로 작성된 텍스트와 레이아웃을 사용하여 정적 웹 사이트를 만듭니다.
텍스트로 작성한 Markdown, _config.yml 등의 파일들을
웹 사이트를 실행하기 위한 출력물을 _site 폴더에 생성합니다.
Jekyll은 주로 웹 사이트를 생성할 루트에서 두 명령을 실행합니다.
jekyll build는 텍스트를 정적 웹 사이트로 생성하고,jekyll serve는build와 동일하지만 추가로 변경할 때마다 다시 빌드하고
http://localhost:4000에서 로컬 웹 서버를 실행합니다
이 포스트는 Docker 를 사용해서 Jekyll 을 사용하는 방법과 직접 설치해서 사용하는 방법에 대해
소개하는 글입니다.
Docker Jekyll 사용하기
Docker Jekyll 을 사용하기 위해서는 Docker가 설치되어 있어야 합니다.
아직 Docker 가 없다면, Get Docker 에서 원하는 버전을 찾을 수 있습니다.
Jekyll 빌드하기
jekyll build 는 웹 사이트 Asset 을 생성하는 과정입니다.
$ export JEKYLL_VERSION=3.8
$ docker run --rm
--volume="$PWD:/srv/jekyll" \
-it jekyll/builder:$JEKYLL_VERSION \
jekyll build
Jekyll 실행하기
jekyll serve 는 build 와 같고, 로컬 웹서버로 사이트를 확인할 수 있습니다.
$ export JEKYLL_VERSION=3.8
$ docker run --rm \
-p 4000:4000 \
--volume="$PWD:/srv/jekyll" \
-it jekyll/builder:$JEKYLL_VERSION \
jekyll serve
만약 draft 도 확인하고 싶으면 --drafts 옵션을 추가합니다.
$ export JEKYLL_VERSION=3.8
$ docker run --rm \
-p 4000:4000 \
--volume="$PWD:/srv/jekyll" \
-it jekyll/builder:$JEKYLL_VERSION \
jekyll serve \
--drafts
이제 http://localhost:4000 에 접속하여 사이트를 확인할 수 있습니다.
Jekyll 설치하여 사용하기
Docker를 사용하지 않고 직접 설치해서 사용할 수도 있습니다.
Github 테마는 Jekyll 기반이기 때문에 수정하기 위해서 Jekyll 이 필요합니다.
Prerequisite
- github 저장소 생성
GitHub에서 {username}.github.io라는 새 저장소를 만듭니다.
여기서 {username}은 GitHub의 사용자 이름(또는 조직 이름)입니다.
저장소 URL의 첫 번째 부분이 사용자 이름과 정확히 일치하지 않으면 작동하지 않으므로
올바르게 설정해야 합니다. - git 설치
Ruby 외 기타 모듈 설치
$ sudo apt-get install ruby-full build-essential zlib1g-dev
root 사용자로 RubyGems 패키지(gems이라고 함)를 설치하면 안됩니다.
대신 사용자 계정에 대한 gem 설치 디렉토리를 설정하는 것이 좋습니다.
다음 명령은 ~/.bashrc 파일에 환경 변수를 추가하여 gem 설치 경로를 구성합니다.
마지막으로 Jekyll과 Bundler를 설치합니다.
$ echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
$ echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
$ echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
$ source ~/.bashrc
이제 끝났습니다! Jekyll을 사용할 준비가 되었습니다.
$ gem install jekyll bundler
Jekyll 테마 선택
Free Jekyll Themes 에서 원하는 테마를 선택합니다.
여기서는 lanyon을 사용했습니다.
그림 2. lanyon 테마.
저장소 생성
lanyon을 Fork 하여 저장소를 생성합니다.
그림 3. 테마 포크(fork).
Fork 한 public 저장소는 바로 private 으로 전환할 수 없습니다.
저장소 이름을 {username}.github.io 으로 수정합니다.
그림 4. lanyon 이름 수정.
저장소의 소스 브랜치를 선택합니다.
그림 5. jekyll serve.
Jekyll 빌드 및 실행
다음 명령으로 Jekyll 빌드 후 실행합니다.
브라우저로 다음 주소 http://localhost:4000 에 접근하여 페이지를 확인합니다.
$ jekyll build
$ jekyll serve
그림 1. jekyll 로고.
디렉토리 구조
디렉토리 구조를 살펴 보겠습니다. 구조를 알면 자신있게 수정할 수 있습니다!
.
|-- 404.html
|-- about.md
|-- atom.xml
|-- _config.yml
|-- _includes
| |-- head.html
| `-- sidebar.html
|-- index.html
|-- _layouts
| |-- default.ht_ml
| |-- page.html
| `-- post.html
|-- LICENSE.md
|-- _posts
| |-- 2013-12-31-whats-jekyll.md
| |-- 2014-01-01-example-content.md
| `-- 2014-01-02-introducing-lanyon.md
|-- public
| |-- apple-touch-icon-precomposed.png
| |-- css
| | |-- lanyon.css
| | |-- poole.css
| | `-- syntax.css
| `-- favicon.ico
`-- README.md
다음은 구조에 대한 설명입니다.
- Jekyll을 실행하면 내부에 정적 웹 사이트가 있는
_site라는 폴더가 생성됩니다.
밑줄로 시작하지 않는 한 저장소의 모든 파일 또는 폴더는_site폴더로 복사됩니다.
_config.yml은 변경하려는 첫 번째 파일인 구성 파일입니다.index.html은 첫 페이지이고about.md는 정적 페이지입니다.
마크 다운 파일을 생성하여 다른 정적 페이지를 추가 할 수 있습니다(추가 작업). 404.html은 매우 자명합니다.
atom.xml은 RSS 리더 용입니다.
_includes및_layouts폴더에는 사이트 구축에 필요한 표준 HTML이 포함되어 있습니다.
_posts에는 귀하가 … 글쎄요 … 게시 할 게시물이 포함됩니다. 마크 다운 파일입니다.
public은 파비콘 정보와 CSS 파일을 포함합니다.
이제 약간 수정하겠습니다! :)
설정 파일 수정
가장 먼저 할 일은 _config.yml 파일을 수정하는 것입니다.
텍스트 편집기에서 열고 기본 설정에 따라 설정 및 정보/연락처 섹션을 편집합니다.
다른 세부 정보도 추가할 수 있습니다. 참조를 위해 내 _config.yml을 살펴보겠습니다.
Lanyon은 Poole에 구축되었으며 Poole은 아직 Jekyll 3을 지원하지 않습니다.
이를 위해 다음을 추가해야합니다.
gems: [jekyll-paginate]
paginate_path: "page:num"
relative_permalinks : true 주석 처리.
이제 진행할 수 있습니다!
참고자료
일반
- GitHub Pages
- Jekyll
- [Jekyll Blog] GitHub 연동 및 Jekyll 설치
- windows 10 에 WSL2, Ubuntu, Docker 설치 by mozily
Windows10 에 WSL2, Ubuntu, Docker를 설치하는 방법을 소개하는 mozily님 블로그입니다.
댓글남기기