윤님이 톡방에 이런 채팅을 남겼다
윤님이 만드셨던 블로그중에
별 다른 이미지 없이도 매우 깔끔하고 이뻤는데
막상 블로그를 만들려고 하니 갖고 있던 온프레미스 서버들이 전부 하드웨어 이슈로 죽어버리기도 했고(..)
굳이 동적인 사이트를 만들고 싶진 않아서
예전에 jekyll 로 github pages에 올렸던 블로그가 생각나 jekyll로 테마를 만들어보기로 했다.
경고: 이 포스팅은 jekyll 테마를 적용하는 포스팅이 아니다. 만드는 포스팅이므로 단순히 적용하고 싶다면 다른 포스팅을 참고하자.
우선 github에서 repo를 만들자
<username>.github.io 라는 이름으로 만들면 그대로 url이 될것이고,
다른 이름으로 만들면 <username>.github.io/<repo-name> 이 url이 된다.
물론 custom domain을 적용할 수 있긴 하다.
우선 ruby를 설치하고
혹시 ubuntu 기반 os를 사용중이라면
sudo apt update && sudo apt install ruby-dev를 실행하자.
로컬에 레포를 클론하여 해당 폴더에서
bundler init
bundler add jekyll
mkdir temp
bundler exec jekyll new --skip-bundle temp
mv temp/* .
rm -r temp
rm Gemfile.lock를 실행하자. 그 후 Gemfile을 열어보자
...
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.0"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", group: :jekyll_plugins
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.6"
end
platforms :mingw, :x64_mingw, :mswin, :jruby do
gem "tzinfo", ">= 1", "< 3"
gem "tzinfo-data"
end
...우리는 테마를 만들것이므로 기본 테마인 minima를 제거하자. gem "minima", "~> 2.0" 를 지우면 된다.
그리고 github pages/dependency versions를 확인하자.
우리가 실제 사용할 수 있는 gem(ruby의 모듈)과 버전이다. jekyll 등의 gem의 버전이 높거나 하면 조정해주자.
github pages에 배포할것이므로 # gem "github-pages", group: :jekyll_plugins 를gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins
로 수정하자. 저 사이트에 나와있는 github-pages의 Version을 그대로 넣으면 된다. 작성 시점 기준 228이었다.
bundle install를 실행하여 gem들을 설치하자.
이제 _config.yml을 열어보자.
title: Your awesome title
email: your-email@example.com
description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed파일을 읽어보면 현재 jekyll-feed라는 플러그인이 설치되어있고, markdown 파서는 kramdown, 테마는 minima이다.theme: minima를 제거하고 현재 레포 이름을 <username>.github.io로 설정하지 않았다면 baseurl을 <repo-name>으로 수정하자.
mac유저라면 미리
bundle add webrick
를 실행하고
bundler exec jekyll serve를 실행하면 127.0.0.1:4000 으로 서빙된다.
정작 가보면 빈 페이지를 볼 수 있는데,
우리가 아무런 테마를 넣지 않았기 때문이다.
127.0.0.1/ofnfoiunuiew 등 404 페이지와
http://127.0.0.1:4000/jekyll/update/년/월/일/welcome-to-jekyll.html은 보일것이다.(월일은 모두 2글자로 적어야한다)
jekyll이 기본 제공하는 _posts/...-welcome-to-jekyll.markdown 를 보자.
---
layout: post
title: "Welcome to Jekyll!"
date: 2023-08-19 05:34:27 +0900
categories: jekyll update
---
You’ll find this post in your `_posts` directory. Go ahead and ...봐야할건 'layout' 이다.
_layouts/<my-layout-name>.html 을 생성하면 layout을 만들 수 있는데
그 속에서 {{ content }}를 작성하면 layout을 지정한 파일의 컨텐츠가(마크다운이면 html로 변환된 결과가) 해당 위치에 삽입된다.
레이아웃 또한 레이아웃을 가질 수 있다.
in _layouts/post.html
---
layout: base
---
Hello! content is "{{ content }}"
in _layouts/base.html
---
---
<html><body><main>{{ content }}</main></body></html>
in _posts/post.md
---
layout: post
---
Hello world!다음과 같이 작성하면 post.md는
<html><body><main>Hello! content is "Hello world!"</main></body></html>로 나오는 것이다.
이런 계층식 구조가 아닌 컴포넌트를 사용하려면 _includes/ 아래에 html을 만들면 된다.
폴더를 만들어서 관리해도 되며 include는 {% include hello.html %} 와 같은 방식으로 작성된다.
물론 include내에서도 include 할 수 있다.
상대 경로를 이용하려면 {% relative_include hello.html %} 처럼 작성하고 기본은 _includes/ 기준 절대경로다.
content 외의 변수들의 목록은 https://jekyllrb.com/docs/variables/ 에서 확인할 수 있고,
이런 {{ content }}, {% include .. %}등에서 사용하는 문법은 liquid인데, 문법과 함수는 https://shopify.github.io/liquid/ 에서 확인할 수 있다. 변수에 대입은 {% assign a = 8 %} 와 같은 꼴이고, include에서 default param을 쓰고 싶다면 {{ a | default: 0 }} 처럼 default 함수가 유용하다.
또, include에 인자를 전달할 수 있다.
in _includes/hello.html
{% include world.html a="8" %}
in _includes/world.html
{{ include.a }}jekyll 내장 함수는 https://jekyllrb.com/docs/liquid/에 있다.
주의: 해당 페이지에는 명시되어 있지 않지만, 표준 함수를 오버라이드하는 경우가 있다. 예를 들어, liquid의 표준 where 함수는 1개 혹은 2개의 인자를 받지만, jekyll이 오버라이드한 where은 1개의 인자를 전달하면 오류가 발생한다.
실제로 내가 만든 테마의 데모는 https://fienestar.github.io/jekyll-terminal-theme/ 로 확인할 수 있다.
하루동안 레퍼런스 보며 만든거라 크게 복잡한 코드는 아닐테니 https://github.com/fienestar/jekyll-terminal-theme 를 참고하자.
Reference:
github pages/create site with jekyll: https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll
'헛소리' 카테고리의 다른 글
| '.한국' 같은 국가별 퓨니코드 최상위 도메인 구경하기 (0) | 2023.08.14 |
|---|