Post

Github 이용한 블로그 생성

Posted
By KIM YEONGBEOM
7 min read

Github 블로그 생성기

Medium 을 이용해서 블로그를 가꿔나가려고 했다. 영어권 유저들이 많은 것도 장점이라고 생각했고, 단순한 것이 마음에 들었다. 하지만 UI에 도무지 적응을 할 수 없었다. 게시글을 내 마음대로 분류하는 방법을 모르겠고, 마음에 들지 않아서 옮기기로 했다!

그래서 선택한 것이 Github 블로그였고, 이런저런 세팅을 미루지 않고 진행해보기로 했다. 이미지 첨부하는 과정이 불편할 수 있지만, 이건 나름 적응을 해보려고 한다. 왜 더 불편한 것을 쓰려고 하는지는 모르겠지만… 이미지를 저장하는 방법은 /assets/img/posts 디렉토리를 통해 관리할 생각이다. 저장 형식은 md 파일과 동일한 이름에다가 일련번호만 추가해 저장할 것이다. ex. 2024-03-15_Github_이용한_블로그_생성_1.png

그래도 PC 에 이것저것 이미지를 관리하는 것 보다는 안전한 DB 가 생겼다는 생각이 들어 나쁘지 않은?? wsl 을 통해 관리하기로 했다.

  1. Ruby 설치

    • apt 업데이트
      1

        sudo apt-get update
    • ruby 설치
      1

        sudo apt-get install ruby-full build-essential zlib1g-dev
    • .bashrc 수정
      1
2
3
4
5
6

        echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
  echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
  echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
  exec bash
  source ~/.bashrc
  exec zsh

    내가 기본 zsh 를 쓰고 있어서 bash 로 전환해야한다 ㅋㅋ

  2. Jekyll 설치

    1

     	gem install jekyll bundler

    설치가 완료되면 아래 코드를 통해 설치가 올바르게 되었는지 확인하자.

    1
2
3

         ruby -v
     jekyll -v
     bundler -v

  3. nodejs 설치

    1
2
3
4

         sudo apt-get install -y nodejs npm
     sudo npm install npm
     sudo npm install -g n
     sudo n lts

  4. Github Repository 생성 다음으로는, Git hub 에 새로운 repository 를 만들어 줘야한다. 별도 도메인을 적용할 것이 아니라면, 이름은 /github닉네임/github.io 로 만들어줘야한다.

    그런데 잠깐! 나는, 최대한 고생을 덜 하고 싶어서 가장 인기 많은 Chirpy 테마를 미리 선정했다.
    (https://github.com/cotes2020/jekyll-theme-chirpy)

    Trouble Shooting 게시글도 많고, 내 입장에서는 설정이 간단해 보였다.

    branch 이름을 master 에서 main 으로 변경해준다. fork 완료한 repository 를 git clone 해준다.

    1

         git clone https://github.com/kybaq/kybaq.github.io.git

    다음으로 초기화 진행해줘야 한다. 그래야 js 파일이 올바르게 설치되어 기능을 온전히 이용가능함.

    1

         bash tools/init
  5. Dependencies 설치
    1

         bundle

    진행해주면 된다.

  6. 로컬호스트에서 확인
    1

         bundle exec jekyll serve

    입력해주면 http://127.0.0.1:4000 으로 접속해 확인해보자.

  7. Github repo 에서 수정이 필요. Settings - Pages - Build and deployment 에서 소스를 GitHub Actions로 변경.

    빌드 수정하는 화면

    빌드 수정하는 화면

    빌드 수정하는 화면

    이때, 수정하지 않는다면 github.io 링크로 접속해도 — layout: home # index page — 라는 문구만 나타난다.

    또한, repo 페이지에서 .github/workflow 디렉토리 내에서 pages-deploy.yml.hook 파일을 삭제한 뒤 커밋까지 남겨 저장해준다. –> github actions 에서는 이 파일이 쓸모 없음.

    1

         git pull

    근데, 이 과정에서 문제가 생길 것임. bash tools/init 을 통해, 초기화 된 이후 커밋이 원격 저장소에서 먼저 발생함. 그래서 로컬과 원격 사이 차이가 발생하는데, 어떤 것을 기준으로 merge 할지 몰라 오류 발생함. 그러면 나는 pull 하는 방법을 선택해야하는데, 일단 아래와 같은 순서로 진행했다.

    1

         git config --global pull.rebase false

    다음으로는 어떤 파일에서 충돌이 일어났는지 조사했다.

    1

         git status

    아래와 같은 결과가 나왔다.

    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

         On branch main
     Your branch and 'origin/main' have diverged,
     and have 1 and 18 different commits each, respectively.
     (use "git pull" to merge the remote branch into yours)

     You have unmerged paths.
     (fix conflicts and run "git commit")
     (use "git merge --abort" to abort the merge)

     Changes to be committed:
             new file:   .github/workflows/jekyll.yml
             new file:   .markdownlint.json
             modified:   .vscode/settings.json
             modified:   README.md
             modified:   _config.yml
             new file:   _includes/analytics/goatcounter.html
             new file:   _includes/analytics/google.html
             modified:   _includes/embed/bilibili.html
             new file:   _includes/embed/video.html
             modified:   _includes/embed/youtube.html
             deleted:    _includes/goatcounter.html
             deleted:    _includes/google-analytics.html
             modified:   _includes/head.html
             modified:   _includes/js-selector.html
             modified:   _includes/lang.html
             new file:   _includes/pageviews/goatcounter.html
             modified:   _layouts/default.html
             modified:   _layouts/post.html
             modified:   _sass/addon/commons.scss
             modified:   _sass/colors/typography-dark.scss
             modified:   _sass/layout/post.scss
             modified:   package.json
             modified:   rollup.config.js

     Unmerged paths:
     (use "git add/rm <file>..." as appropriate to mark resolution)
             deleted by them: .github/workflows/pages-deploy.yml
             deleted by us:   _posts/2019-08-08-text-and-typography.md
             deleted by us:   _posts/2019-08-08-write-a-new-post.md
             deleted by us:   _posts/2019-08-11-customize-the-favicon.md

    아래의 Unmerged paths 가 충돌이 생긴 파일들이다.

    1
2
3
4

         git rm .github/workflows/pages-deploy.yml
     git rm _posts/2019-08-08-text-and-typography.md
     git rm _posts/2019-08-08-write-a-new-post.md
     git rm _posts/2019-08-11-customize-the-favicon.md

    git 에서 삭제해주었다.

    마지막으로

    1
2
3

         git add .
     git commit -m "removed conflicts"
     git push

    이렇게 하면 된다.

    pull 을 진행해 로컬의 상태를 원격(hook 파일 지운 것)과 동기화 해준다. 이러면 로컬에서도 알아서 지워줌. 근데 이 과정은 bash tools/init 을 진행하면 자동으로 해준다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

         # .gitignore

     # Bundler cache
     .bundle
     vendor
     Gemfile.lock
		
     # Jekyll cache
     .jekyll-cache
     _site
		
     # RubyGems
     *.gem
		
     # NPM dependencies
     node_modules
     package-lock.json
		
     # IDE configurations
     .idea
     .vscode
		
     # Misc
     # assets/js/dist  ### 주석 처리

    필요한 설정은 _config.yml 을 통해서 수정하자.

  8. md 파일 작성 후, 업로드하기
    1
2
3
4

         git pull
     git add .
     git commit -m "게시글 이름"
     git push

    이후 제대로 빌드가 이루어지는지 확인하면 끝!

Development, git-hub.io
Development git-hub.io Jekyll
This post is licensed under CC BY 4.0 by the author.