Github Pages & Jekyll Installation
GitHub Pages와 Jekyll(지킬)을 이용하여 무료로 블로그 호스팅하기!
Jekyll
- Ruby로 만든 정적 웹사이트 생성기
- GitHub Pages도 Jekyll로 작동
- 마크다운 파일로 작성하면 자동으로 HTML로 변환되기 때문에 HTML 문법을 잘 몰라도 쉽게 웹사이트를 꾸밀 수 있다.
Github Pages Hosting
- GitHub Pages로 사용할 Repository 생성
- 레포지토리 이름은 (Github ID).github.io 으로 설정
https://(Github ID).github.io주소로 호스팅
- git으로 로컬에 클론
code에서 HTTPS 링크 복사- 프로젝트를 다운받을 위치의 로컬 폴더를 우클릭해서 터미널을 열고 명령어 입력
git clone (Repository URL)
- VS Code 등의 편집기에서 클론된 폴더를 열어서 작업 가능
Jekyll Installation (macOS)
🛑 Ruby
- Homebrew로 최신 버전 설치
brew install ruby - 설치한 최신 버전을 사용하도록 경로 추가 후 연결
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc source ~/.zshrc - 최신 버전이 출력되는지 확인
ruby --version
🧪 Jekyll
- ruby의 패키지 관리 도구 RubyGems로 jekyll과 bundler 설치
gem install jekyll bundler - 버전 확인
jekyll -v bundler -v
minimal-mistake Theme
docs Link
Github Repository Link
- 레포지토리의
code에서Download ZIP으로 파일을 내려받은 후 압축 해제 - 필요한 파일들만 복사해서 내 Github 레포지토리를 클론한 프로젝트의 최상단에 붙여넣기
/assets안에/images폴더 생성 (이미지 저장용)
| files to Copy | files to Remove |
|---|---|
| /_data | .editorconfig |
| /_includes | .gitattributes |
| /_layouts | .github |
| /_sass | /docs |
| /assets | /test |
| /docs/_drafts | CHANGELOG.md |
| /docs/_pages | minimal-mistakes-jekyll.gemspec |
| /docs/_posts | README.md |
| .gitignore | screenshot-layouts.png |
| Gemfile | screenshot.png |
| Rakefile | |
| LICENSE | |
| index.html | |
| package-lock.json | |
| package.json | |
| _config.yml | |
| .travis.yml | |
| staticman.yml |
Setting at Local
Install dependencies
source "https://rubygems.org"
# Hello! This is where you manage which Jekyll version is used to run.
# When you want to use a different version, change it below, save the
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
#
# bundle exec jekyll serve
#
# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
# gem "github-pages", group: :jekyll_plugins
# To upgrade, run `bundle update`.
gem "jekyll"
gem "minimal-mistakes-jekyll"
# The following plugins are automatically loaded by the theme-gem:
# gem "jekyll-paginate"
# gem "jekyll-sitemap"
# gem "jekyll-gist"
# gem "jekyll-feed"
# gem "jekyll-include-cache"
#
# If you have any other plugins, put them here!
# Cf. https://jekyllrb.com/docs/plugins/installation/
group :jekyll_plugins do
end
Gemfile파일의 원래 내용을 지우고 양식 붙여넣기# gem "github-pages", group: :jekyll_plugins주석 해제# The following plugins are automatically loaded by the theme-gem:밑 5개의 플러그인 주석 해제group :jekyll_plugins do-end안으로 주석 해제한 플러그인 5개를 이동- 파일 저장 후 VS Code의 터미널에서 변화 적용
bundle install
⚠️ bundle install를 실행했을 때 아래와 같은 문구가 뜬다면
Bundler 2.6.5 is running, but your lockfile was generated with 2.6.1. Installing Bundler 2.6.1 and restarting using that version.
bundle update --bundler
해당 명령어를 실행하여 Bundler 버전을 업데이트하고 Gemfile.lock 파일을 새로 생성
(하단 BUNDLED WITH에 Bundler 버전이 명시됨)
Run Jekyll
bundle exec jekyll serve
- Github에 Push하기 전 로컬 서버에서 미리 실행해서 확인할 수 있다.
- 로컬 서버 주소: http://localhost:4000/
- 서버 정지: 터미널에서
ctrl+c - --livereload 명령어 추가
- 소스파일에서 변경사항이 생길 때마다 페이지 자동 새로고침
- 예외로
_config.yml파일을 변경할 경우에는 서버 정지 후 재실행 필요
- --drafts 명령어 추가
/_drafts안에 있는 포스트까지 함께 로컬 서버에서 확인 가능- 실제 웹 서버에서는 나타나지 않기 때문에 게시물을 임시 저장하는 용도로 사용
⚠️ Errors
csv was loaded from the standard library, but will no longer be part of the default gems starting from Ruby 3.4.0.
base64 was loaded from the standard library, but will no longer be part of the default gems starting from Ruby 3.4.0.
Gemfile파일에 코드 추가 후 저장gem 'csv' gem 'base64'- gem 설치
bundle install
cannot load such file – webrick (LoadError)
- ruby 3.0.0 버전 이후부터 webrick 추가 필요
bundle add webrick - gem 설치
bundle install
ERROR ‘/favicon.ico’ not found.
- 아래 사이트 중 한 곳에서 원하는 파비콘 생성
- https://www.favicon.cc/ (직접 픽셀에 점을 찍어서 파비콘을 제작하는 사이트)
- https://realfavicongenerator.net/
/assets안에 파비콘 파일 넣기/_iucludes→/head→custom.html에 코드 추가<link rel="icon" type="image/png" href="/assets/favicon.ico">- 웹 브라우저의 탭에서 사이트 제목 옆에 파비콘이 적용됐는지 확인하기
git push
변경사항을 모두 git에 add
git add .
git에 커밋
git commit -m 'Commit message'
Github Pages 레포지토리로 push
git push
Leave a comment