728x90
반응형
Overview
Github 의 정적 호스팅 기능을 이용하여 나만의 영어 블로그를 만들어본다.
Github 사용해서 블로그 만들기
GitHub Pages는 GitHub의 리포지토리에서 HTML, CSS 및 JavaScript 파일을 직접 가져와서 필요에 따라 빌드 프로세스를 통해 파일을 실행하고 웹 사이트를 게시하는 정적 사이트 호스팅 서비스를 가지고 있다.
배포를 하게되면 Github Pages 에서 아래와 같이 확인 가능하다.
지금부터 Github 를 활용하여 자신만의 블로그를 만드는 방법을 알아보자!
정적 사이트 생성기와 테마
github에는 엄청나게 많은 소스들이 있다. 따라서 github.io 블로그를 만들때 아주 유용한 jekyll 툴을 사용하였고 테마는 jekflix 테마를 사용했다.
Jekyll란?
Jekyll
- 간단하고 블로그 친화적인 정적 사이트 생성기로, Markdown, HTML, 또는 Liquid 템플릿으로 작성된 텍스트 파일을 완전한 정적 웹사이트로 변환한다.
- GitHub Pages와의 통합으로 개인 블로그, 프로젝트 문서, 정적 웹사이트 제작에 이상적이다.
Jekyll의 주요 기능
- Markdown 지원: 읽고 편집하기 쉬운 Markdown 파일로 콘텐츠 작성이 가능하다.
- Liquid 템플릿: 레이아웃과 재사용 가능한 컴포넌트를 지원하며 Liquid 템플릿 언어를 사용한다.
- 정적 생성: 가볍고 빠르며 보안이 뛰어난 정적 사이트를 출력한다.
- GitHub Pages 통합: Jekyll은 GitHub Pages의 기본 엔진으로, 원활한 호스팅을 제공한다.
- 테마 및 플러그인: 미리 구성된 테마와 플러그인을 제공하며, 이를 통해 사이트의 외형과 콘텐츠를 쉽게 사용자 정의할 수 있다.
Jekyll 사이트의 기본 구조
- _layouts: 페이지 구조에 사용되는 HTML 템플릿을 포함한다. (예: default.html, post.html)
- _posts: Markdown으로 작성된 블로그 게시글을 저장한다. 파일 이름 형식은
YYYY-MM-DD-title.md이다. - _includes: 헤더나 푸터와 같은 재사용 가능한 코드 조각을 저장한다. (예: header.html)
- _config.yml: 사이트 전체 설정을 정의하는 주요 구성 파일이다.
- index.html: 사이트의 홈페이지이다.
- assets/: 이미지, CSS, JavaScript 파일을 저장하는 폴더이다.
Jekflix Theme란?
Jekflix 테마에 대해
- Jekflix란? Jekflix는 Jekyll 테마로, Netflix의 디자인에서 영감을 받아 만들어졌다. 스타일리시하고 미니멀한 테마를 원하는 블로거들에게 최적화되어 있다.
- 특징:
- 깔끔한 레이아웃
- 무한 스크롤
- GitHub Pages와의 손쉬운 통합
- 제작자: Thiago Rossener
Blog 생성하기
1. 패키지 설치
ruby를 사용하기 때문에 아래와 같이 패키지를 설치해줘야 한다.
- MAC 기준(bash 쉘 사용할 경우)
# Ruby 설치
brew install ruby
# Ruby 환경변수 설정 (zsh 사용 시)
echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
# Ruby 버전 확인
ruby -v
# Jekyll과 Bundler 설치c
gem install jekyll bundle
echo 'export GEM_HOME="$HOME/.gem"' >> ~/.bash_profile
echo 'export PATH="$GEM_HOME/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
# 설치 확인
jekyll -v
- Linux 기준(Ubuntu)
sudo apt update
sudo apt install ruby
sudo apt install ruby-dev build-essential ruby-bundler
echo 'export PATH="/usr/bin/ruby:$PATH"' >> ~/.bashrc
ruby -v
# Jekyll과 Bundler 설치c
gem install jekyll bundle
echo 'export GEM_HOME="$HOME/.gem"' >> ~/.bashrc
echo 'export PATH="$GEM_HOME/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
# 설치 확인
jekyll -v
2. Jekflix 저장소 복제
git clone https://github.com/thiagorossener/jekflix-template.git
cp -r jekflix-template/* my-repos/- GitHub 저장소 생성
- GitHub에서 새 저장소 생성
- 저장소 이름: somaz94.github.io
- Public으로 설정
- README 파일 생성 체크 해제
3. 의존성 설치
bundle install
4. _config.yml 파일 수정
- 사이트 구성을 사용자 정의하려면 `_config.yml` 파일을 수정하면 된다.
- Jekflix Template Repo 에 보면 docs가 잘 구성되어 있으니 읽어보고 수정해준다.
5. 로컬에서 사이트 확인
`bundle exec jekyll serve` 를 사용해서, blog를 실행시켜 볼 수 있다. 블로그 내용 수정 또는 추가 한 뒤에 로컬에서 잘 작동하는지 확인이 가능하다.
6. 설정 완료 후 Github Repo 연결
- `<github_username>.github.io` 로 repo를 만들고 main branch에 push 하는 순간 Github에서 자동으로 build 해서 pages에 deploy 해준다.
git init
git add .
git commit -m "Initial commit"
git remote add origin <github repo url>
git push -u origin main
마무리
이외에도 아직까지 설명할 내용들이 많이 있다. 나머지에 내용에 대한 설명은 다음 포스팅에서 하도록 하겠다.
- 댓글 설정
- Contact 설정
- Private Repo 전환하여 Public에 배포하기
- etc..
Reference
728x90
반응형