Post

Github 블로그 테마 적용(mac 용)(1)

Posted
By KTW
9 min read
Github 블로그 테마 적용(mac 용)(1)

지난 포스팅에선 github 블로그를 시작하기 위한 준비물을 알려주었다. 이번 포스팅은 테마를 적용하기 위한 의존성 설치와 테마 적용 방법 중 하나를 알려줄 것이다

블로그 테마 적용하기(on MAC)

블로그 테마를 적용하기에 앞서 필자는 apple의 macbook을 사용하고 있기 때문에 mac os를 기준으로 한다. 윈도우의 경우 필요하다면 추후에 따로 포스팅할 예정

블로그 테마 적용 방법

chirpy 테마를 적용하는 방법은 크게 세 가지가 존재한다. (방법은 공식 페이지에서 발췌하였음)

  1. chirpy starter를 사용해서 테마 적용하기
    • 아주 단순하다. 그냥 테마를 그대로 사용하고 싶다면 이 방법을 사용하면 된다. 다만 커스터마이징이 어렵거나 아예 불가능한 부분이 많아 깃허브 블로그를 제대로 운영하고 싶은 개발자들 입장에서는… 그렇게 좋아보이지 않을 것이다.
  2. github에서 fork 해서 적용하기
    • 약간 번거로움이 있지만 제일 괜찮은 방법이다. 페이지를 그대로 fork해서 이를 블로그로 사용한다. 커스터마이징을 가장 간단하게 할 수 있다. 다만 오리지널 저장소가 업데이트 될 때 약간의 문제가 생길 수 있으니 유의하자.
  3. zip 파일을 직접 다운로드해서 적용하기
    • fork로 했을 때는 추가적인 작업이 필요할 수 있어 직접 zip 파일을 다운로드하고 로컬에서 작업한 후 push 하는 방법이다.

나는 fork로 했을 때 오류가 자주 생겨서 zip 파일을 직접 사용하였다.

패키지 설치하기(ruby, bundle, jekyll, github-pages)

이번 포스팅에서는 zip 파일을 로컬 파일에 설치하고 이를 원격 레포지토리에 올려서 사용하는 것을 직접 시연한다

가장 먼저 로컬 파일 설치 전 사전 설정을 위해 패키지들을 설치해야 한다. ruby를 설치해야 다음 두 패키지를 설치 가능하다.

주의! 이 방법은 mac 환경에서 Homebrew 를 설치했다는 가정 하에 유효하다.

ruby 설치하기

먼제 ruby를 설치하기 위해 터미널 창에 다음과 같이 입력해준다

1

brew install ruby

설치가 완료되면 다음과 같이 입력해본다

1

ruby -v

그러면 다음과 같이 출력되는 것을 확인 가능하다

1

ruby 3.4.1 (2024-12-25 revision 48d4efcb85) +PRISM [arm64-darwin24]

만약 이렇게 출력되지 않는다면 다음과 같이 입력한다

1

export PATH="/opt/homebrew/opt/ruby/bin:$PATH"

이렇게 하고 바로 다음 입력을 한다

1

source ~/.zshrc

이렇게 하면 정상적으로 ruby의 경로가 등록되어 제대로 작동할 것이다

jekyll 과 bundle, github-pages 설치하기

다음 명령어를 터미널에 입력한다

1

gem install bundler jekyll github-pages

패키지가 제대로 설치되었는지 확인하는 방법은 gem list <package-name> 를 입력하면 된다 결과는 다음과 같다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

>>> gem list jekyll github-pages bundler               

*** LOCAL GEMS ***

jekyll (4.4.1, 3.10.0)
jekyll-archives (2.3.0)
jekyll-avatar (0.8.0)
jekyll-coffeescript (1.2.2)
jekyll-commonmark (1.4.0)
jekyll-commonmark-ghpages (0.5.1)
jekyll-default-layout (0.1.5)
jekyll-feed (0.17.0)
jekyll-gist (1.5.0)
jekyll-github-metadata (2.16.1)
jekyll-include-cache (0.2.1)
jekyll-mentions (1.6.0)
jekyll-optional-front-matter (0.3.2)
jekyll-paginate (1.1.0)
jekyll-readme-index (0.3.0)
jekyll-redirect-from (0.16.0)
jekyll-relative-links (0.6.1)
jekyll-remote-theme (0.4.3)
jekyll-sass-converter (3.1.0, 1.5.2)
jekyll-seo-tag (2.8.0)
jekyll-sitemap (1.4.0)
jekyll-swiss (1.0.0)
jekyll-theme-architect (0.2.0)
jekyll-theme-cayman (0.2.0)
jekyll-theme-dinky (0.2.0)
jekyll-theme-hacker (0.2.0)
jekyll-theme-leap-day (0.2.0)
jekyll-theme-merlot (0.2.0)
jekyll-theme-midnight (0.2.0)
jekyll-theme-minimal (0.2.0)
jekyll-theme-modernist (0.2.0)
jekyll-theme-primer (0.6.0)
jekyll-theme-slate (0.2.0)
jekyll-theme-tactile (0.2.0)
jekyll-theme-time-machine (0.2.0)
jekyll-titles-from-headings (0.5.3)
jekyll-watch (2.2.1)

*** LOCAL GEMS ***

github-pages (232)
github-pages-health-check (1.18.2)

*** LOCAL GEMS ***

bundler (2.6.3, default: 2.6.2)

이렇게 출력되면 성공이다

zip 파일 설치하고 로컬 폴더 만들기

링크를 통해 zip 파일을 설치한다 chirpy-theme-homepage chirpy-download-zipfile

다운로드 후 이를 압축 해제한다 unzip-files

압축 해제한 이 폴더 전체를 원하는 곳에 옮긴 후 이름을 수정한다 temp-github-folder

이후 터미널을 실행하여 해당 폴더로 이동하고

1

cd <해당 폴더 경로>

다음을 입력하여 실행한다

  1. init 후 메인 branch를 main으로 설정하기
    1
2
3

     git init
 git config --global init.defaultBranch main
 git branch -m main
  2. 원격 저장소와 remote 하기(ssh)
    1

     git remote add origin git@github.com:your-username/your-repo.git

    참고로 ssh 방식이 아닌 https 방식으로 했을 때 계속해서 push 및 pull 이 불가능하였다. 확인해보니 아이디 비밀번호 방식으로 했을 때 보안 문제가 있어 더 이상 이를 지원하지 않는다는 경고문이 있어 이것 때문으로 보인다. ssh 등록 및 사용은 공식 문서를 참고하자.

  3. 명령어를 통해 관련 의존성 설치하기 bundle 명령어를 입력하여 의존성을 설치해준다.

    1

     bash tools/bash.sh

    이 명령어 입력시 몇가지 파일이 삭제되고

    1

     [INFO] Initialization successful!

    다음이 출력되면 성공이다 위의 bash 명령어는 원격 레포지토리에 연결된 이후에만 작동한다 참고로 mac os와 linux os 에서만 작동하니 window에서는 따로 삭제할 필요가 있다

  4. git 명령어를 사용하여 모든 변경 내용을 원격 레포지토리에 올려준다
    1
2
3

     git add .
 git commit -m "docs:first commition"
 git push -u origin main

    여기서 commit 옵션은 총 네 가지가 존재한다

    1
2
3
4
5
6
7
8
9

     git commit -m "feat: --"
 git commit -m "fix: --"
 git commit -m "docs: --"
 git commit -m "chore: --"
 •  feat: → 새로운 기능 추가
 •  fix: → 버그 수정
 •  docs: → 문서 변경
 •  chore: → 코드 변경 없는 설정 변경
 •  refactor: → 코드 리팩토링

    이 옵션을 사용하지 않으면 아래와 같은 오류가 발생한다

    1
2
3
4
5
6

     ⧗ input: first commition
 ✖ subject may not be empty [subject-empty]
 ✖ type may not be empty [type-empty]
 ✖ found 2 problems, 0 warnings
 ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
 husky - commit-msg script failed (code 1)
  5. 작동 여부 확인하기 이제 홈페이지가 제대로 작동하는지만 알면 된다.
    1

     bundle exec jekyll s

    이 명령어를 입력 후 뜨는 출력에서 다음을 cmd + click 하면 된다. Server address: http://127.0.0.1:4000/

    최종적으로 아래와 같이 홈페이지가 뜨면 성공! myhomepage

참고

This post is licensed under CC BY 4.0 by the author.

Trending Tags

jekyll front-matter yaml