Github 블로그 만들기

게시 2024/09/02

By yoo seung hyun

5 분읽는 시간

삶을 살면서 걸어온 길을 정리 하고픈 생각에 개인 홈페이지를 만들 생각도 없지는 않았지만 지나고 보니 간단한 블로그를 만들어 그동안의 삶의 자취도 기록하고 미래 세대에게 가지고 있는 조그만 노우화우를 전달하고자 해서 시각했다. 내가 선택한 것은 git, github, github_blog 를 가지고서 내 삶을 돌아보고 싶다

블로그 만들기

1. Ruby 설치

설치에 대해서는 구글링해서 사용하면 된다.

[내가 참고한 사이트] https://devpro.kr/posts/Github-블로그-만들기-(1)/
(devpro.kr_posts_Github-B8EB9CB7EB8C93EAB0-(1)_.png)

모든 설치가 끝난 후 ruby -v 커맨드를 입력했을 때,
아래와 같이 Ruby의 버전이 정상적으로 출력된다면 성공적으로 설치를 끝마친 것입니다!

  
PS C:\git_blog> ruby -v
ruby 3.2.4 (2024-04-23 revision af471c0e01) [i386-mingw32]

2. Jekyll 설치

다음으로는 jekyll을 설치해보도록 하겠습니다.
Jekyll 설치는 ruby가 잘 설치되어 있다면 매우 간단합니다.
cmd 또는 git bash 등의 커맨드 창을 열어서 아래의 커맨드만 입력해주시면 설치 완료입니다.

  
PS C:\git_blog> gem install jekyll
PS C:\git_blog> gem install bundler

Jekyll만 설치한 것이 아니라 bundler라는 것도 함께 설치하였는데,
bundler는 ruby 프로젝트에서 gem 파일의 종속성을 관리하는 도구라는것 정도만 알고 있습니다.

이제 jekyll -v 커맨드를 입력하여 jekyll이 잘 설치되었는지 확인해 봅시다.
저는 bundler의 버전도 함께 확인해 보았습니다.

  
PS C:\git_blog> jekyll -v
jekyll 4.3.3

PS C:\git_blog> bundler -v
Bundler version 2.5.10

3. blog 설치

[내가 참고한 사이트] https://jjikin.com/posts/Jekyll-Chirpy-테마를-활용한-Github-블로그-만들기(2023-6월-기준)/
(jjikin.com_posts_Jekyll-Chirpy-85EB88A5ED9C9AED9C-Github-B8EB9CB7EB8C93EAB0(2023-69BEAB0A4%80)_.png)

4. tzinfo 관련 에러 해결 방법

[내가 참고한 사이트] https://whonie.github.io/tzinfoerror
(whonie.github.io_tzinfoerror.png)

Gemfile 의 내용을 바꿈

  
# frozen_string_literal: true

source "https://rubygems.org"

gemspec

group :test do
  gem "html-proofer", "~> 3.18"
end

# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
platforms :mingw, :x64_mingw, :mswin, :jruby do
  gem "tzinfo", ">= 1", "< 3"
  gem "tzinfo-data"
end

# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]

# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
# do not have a Java counterpart.
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

# Lock jekyll-sass-converter to 2.x on Linux-musl
if RUBY_PLATFORM =~ /linux-musl/
  gem "jekyll-sass-converter", "~> 2.0"
end

5. 댓글 설치

[내가 참고한 사이트] https://velog.io/@outstandingboy/Github-블로그에-댓글-기능-추가하기-ft.-Utterances
(velog.io_@outstandingboy_Github-B8EB9CB7EC90-8CEA80-B8EBA5-B6EA8095EAB0-ft.-Utterances.png)

_layout/post.html 수정

  
<div class="col-lg-8 col-md-10 mx-auto">
  <hr />

  <script
    src="https://utteranc.es/client.js"
    repo="yooaroma/comments"
    issue-term="url"
    label="comments"
    theme="github-light"
    crossorigin="anonymous"
    async
  ></script>
</div>

_config.yml

  
comments:
  # Global switch for the post-comment system. Keeping it empty means disabled.
  provider: "utterances" # [disqus | utterances | giscus]
  # The provider options are as follows:

6. 깃허브로 나만의 웹 사이트 만들기

[깃허브로 나만의 웹 사이트 만들기] https://brunch.co.kr/@everiwon/42
웹페이지를 링크하기 위한 최소한의 설치에 대해서 기술한 사이트
(brunch.co.kr_@everiwon_42.png)

7. jekyii 테마 수정

테마 수정 검색
[테마 수정하기] https://sooseongcom.com/post/jekyll-history-2-theme
[Jekyll 수정하기] https://yeri-kim.github.io/posts/update-jekyll
[블로그 커스터마이징 하기] https://wlqmffl0102.github.io/posts/Customizing-Blogs/
(wlqmffl0102.github.io_posts_Customizing-Blogs_.png)

8. git clone

git clone https://github.com/{userid}/{userid}.github.io

git hub example

// first copy and start
git clone https://github.com/yooaroma/yooaroma.github.io
cd yooaroma.github.io

// 일반적으로 계속 할 때 사용
git add -A -- 작업 디렉토리 모든 변경내용
or
git add .
git commit -m "readme text"
git push
// 추가 사용하는 명령어
git status
git config
git add file/dir

blog, git, github_blog, Github Blog