GitHub blog를 만들어보는 간단한 방법을 알아보자.

1.제작 방법

  1. https://github.com/topics/jekyll-theme를 누르고, 원하는 테마에 해당하는 저장소를 고른다.
  2. 해당 저장소를 fork한다.
  3. fork된 저장소로 이동해서 settings 탭을 눌러주고, Repository name을 반드시 github 사용자 이름.github.io 로 변경해준다. ex) faker.github.io
  4. 저장소를 clone하고, _config.yml 파일에서 description 아래에 있는 url을 https://github 사용자 이름.github.io로 변경한다. ex) https://faker.github.io

2.블로그 글 쓰기

먼저 _posts라는 디렉터리를 만들어주고, 연-월-일-포스트이름.md로 포스트를 작성할 마크다운 문서를 만들어준다.
만들어진 마크다운 문서에서 다음과 같은 헤더를 작성해준다.

---
layout: post
title: "포스트 제목"
---

그 아래에는 원하는 대로 글을 작성하면 된다.

3.이미지 등록하기

<img src="이미지파일 경로" width="너비값" height="높이값">

4.실시간으로 변경사항 확인하기

github blog의 단점이라면 내가 업로드한 글이 웹 페이지에서 보일 때까지 기다려야한다는 점이다. 이러한 단점을 보완하여 실시간으로 내가 작성한 글이 로컬 환경의 웹페이지에서 보여지도록 하는 방법이 있다.

https://mmistakes.github.io/minimal-mistakes/docs/installation/#install-dependencies

먼저 첨부한 링크를 클릭한다. 영문으로 작성되어 있을텐데 당황하지 않고 official documentation을 클릭한다. 해당 페이지에서 Prerequisites를 보면 아래 세 가지를 먼저 설치해야한다고 한다.

  • Ruby version 2.5.0 or higher
  • RubyGems
  • GCC and Make

Ruby부터 설치를 하기 위해 링크로 이동한다. 참고로 macos 기준이며, 설치는 해당 문서에 있는 내용을 그대로 따라하면 된다.

brew install chruby ruby-install xz
ruby-install ruby 3.1.3

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc # run 'chruby' to see actual version

## 설치확인
ruby -v

## jekyll 설치
sudo gem install jekyll

## bundle 설치
sudo gem install bundle

여기까지 끝났다면 터미널상에서 내 블로그 저장소로 이동하고 추가 패키지들을 설치해준다.

cd BLOG
bundle install

다 끝났으면 터미널에서 명령어를 통해 서버를 실행시켜주자.

bundle exec jekyll serve

이렇게하면 터미널에서 다음과 같은 내용들이 출력된다.

/Users/pervin0527/BLOG/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss 144:22         su-gutter()
/Users/pervin0527/BLOG/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss 190:11  su-call()
/Users/pervin0527/BLOG/_sass/minimal-mistakes/vendor/susy/susy/_api.scss 205:11             susy-gutter()
/Users/pervin0527/BLOG/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss 37:11         gutter()
/Users/pervin0527/BLOG/_sass/minimal-mistakes/_archive.scss 163:28                          @content
/Users/pervin0527/BLOG/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss 66:7       breakpoint()
/Users/pervin0527/BLOG/_sass/minimal-mistakes/_archive.scss 152:3                           @import
minimal-mistakes.scss 35:9                                                                  @import
/Users/pervin0527/BLOG/assets/css/main.scss 4:9                                             root stylesheet
                done in 1.451 seconds.
Auto-regeneration: enabled for '/Users/pervin0527/BLOG'
Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.

여기서 http://127.0.0.1:4000를 클릭하면 내 블로그가 브라우저에서 실행되며, 내가 작성한 내용을 실시간으로 확인할 수 있게 된다.
혹시 ctrl-c로 멈추고 나서 다시 bundle exec jekyll serve를 실행했을 때 문제가 생긴다면, 다음과 같은 시도를 해보자.

  1. minimal-mistakes-jekyll.gemspec에서 package_json 파일 경로 수정.
  2. 삭제하고 재설치
rm -rf _site
bundle install

5.블로그 내용 수정하기

블로그 이름이나 사용자 이름과 같은 내용을 수정할 수 있는데, 블로그 저장소 디렉터리의 _config.yml 파일의 내용을 수정하면된다.

https://mmistakes.github.io/minimal-mistakes/docs/configuration/ 이 링크에 가보면 정말 많은 것을 시도해볼 수 있으니, 적절한 내용을 가져다 적용해보자.

### 포스트 날짜 표기 수정

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: # true
      share: true
      related: true
      show_date: true

date_format: "%Y-%m-%d"

6. 수식 작성하기

$\ [x^n + y^n = z^n ]$

$ y = ax+b^2 $

선형대수는 $y=ax+b$에 대한 수학이다. $x^2$은 안된다.

댓글남기기

참고