Github.io 블로그 만들기(3) - Jekyll에 테마 적용하기

앞글을 못보신 분은 차근차근~

 

1) Github.io 블로그 생성하기

https://swiftcam.tistory.com/647

Github.io 블로그 만들기(1) - 생성하기

 

2) Github.io 블로그의 Jekyll Local 서버 설정하기

https://swiftcam.tistory.com/648

Github.io 블로그 만들기(2) - Local 서버 설정

 

 

그리고 오늘은 Jekyll을 이용하여 테마를 적용해보도록 하겠습니다.

 

 

 

1. 테마 적용 사이트 확인하기

Jekyll을 이용하여 테마를 적용하는 것은 아래 사이트들을 참고할 수 있습니다. 자신의 스타일에 맞는 테마를 고르면 됩니다.

• jamstackthemes.dev
• jekyllthemes.org
• jekyllthemes.io
• jekyll-themes.com

 

저는 무난하게 아래 테마를 적용해보도록 하겠습니다.

 

http://jekyllthemes.org/themes/hamilton/

Hamilton

 

 

홈페이지를 선택하면 github로 들어가게 됩니다.

 

 

2. 테마 소스코드 다운로드

• git에서 code를 누르면 repository 주소가 나타나고 주소를 입력하여 local로 다운로드한다.
• 다운로드한 테마를 username.github.io 폴더에 복사한다. 겹치는 파일이 있으면 덮어써준다.

https://github.com/zivong/jekyll-theme-hamilton.git

GitHub - zivong/jekyll-theme-hamilton: A minimal and beautiful Jekyll theme best for writing and note-taking.

 

 

 

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ mkdir theme

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ cd theme/

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io/theme$ git clone https://github.com/zivong/jekyll-theme-hamilton.git
Cloning into 'jekyll-theme-hamilton'...
remote: Enumerating objects: 736, done.
remote: Total 736 (delta 0), reused 0 (delta 0), pack-reused 736
Receiving objects: 100% (736/736), 2.46 MiB | 4.62 MiB/s, done.
Resolving deltas: 100% (419/419), done.

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io/jekyll-theme-hamilton$ cp -rp . ../

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ ll
total 1296
drwxrwxr-x 14 swift swift   4096  1월 26 16:28 ./
drwxrwxr-x  3 swift swift   4096  1월 26 14:19 ../
-rw-rw-r--  1 swift swift    398  1월 26 16:30 404.html
-rw-rw-r--  1 swift swift    105  1월 26 16:30 about.md
drwxrwxr-x  3 swift swift   4096  1월 26 16:28 assets/
-rw-rw-r--  1 swift swift     94  1월 26 16:30 categories.md
-rw-rw-r--  1 swift swift    866  1월 26 16:30 _config.yml
drwxrwxr-x  2 swift swift   4096  1월 26 16:28 _data/
-rw-rw-r--  1 swift swift     74  1월 26 16:30 docs.md
-rw-rw-r--  1 swift swift     63  1월 26 16:30 faq.md
-rw-rw-r--  1 swift swift     69  1월 26 16:30 Gemfile
-rw-rw-r--  1 swift swift   1709  1월 26 15:06 Gemfile.lock
drwxrwxr-x  8 swift swift   4096  1월 26 16:28 .git/
-rw-rw-r--  1 swift swift     59  1월 26 16:30 .gitignore
drwxrwxr-x  2 swift swift   4096  1월 26 16:28 _includes/
-rw-rw-r--  1 swift swift     21  1월 26 16:30 index.html
-rw-r--r--  1 swift swift    175  1월 26 14:56 index.md
drwxrwxr-x 10 swift swift   4096  1월 26 16:28 jekyll-theme-hamilton/
-rw-rw-r--  1 swift swift   1011  1월 26 16:30 jekyll-theme-hamilton.gemspec
drwxrwxr-x  2 swift swift   4096  1월 26 16:28 _layouts/
-rw-rw-r--  1 swift swift   1073  1월 26 16:30 LICENSE.txt
-rw-rw-r--  1 swift swift  40982  1월 26 16:30 logo.png
drwxrwxr-x  2 swift swift   4096  1월 26 16:28 _posts/
-rw-rw-r--  1 swift swift   6119  1월 26 16:30 README.md
drwxrwxr-x  3 swift swift   4096  1월 26 16:28 _sass/
drwxrwxr-x  4 swift swift   4096  1월 26 15:17 .sass-cache/
-rw-rw-r--  1 swift swift 374359  1월 26 16:30 screenshot-midnight.png
-rw-rw-r--  1 swift swift 372631  1월 26 16:30 screenshot.png
-rw-rw-r--  1 swift swift 402915  1월 26 16:30 screenshot-sunrise.png
drwxrwxr-x  2 swift swift   4096  1월 26 16:28 scripts/
drwxrwxr-x  5 swift swift   4096  1월 26 15:17 _site/
-rw-rw-r--  1 swift swift     76  1월 26 16:30 tags.md
drwxrwxr-x  3 swift swift   4096  1월 26 16:27 theme/
-rw-rw-r--  1 swift swift     62  1월 26 16:30 years.md

 

 

 

3. Remote에 업로드

 

$ git add .

$ git status

$ git commit -m "appled theme/jekyll-theme-hamilton"

 

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git add .
warning: adding embedded git repository: jekyll-theme-hamilton
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint: 
hint: 	git submodule add <url> jekyll-theme-hamilton
hint: 
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint: 
hint: 	git rm --cached jekyll-theme-hamilton
hint: 
hint: See "git help submodule" for more information.
warning: adding embedded git repository: theme/jekyll-theme-hamilton

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	new file:   _posts/2023-01-26-welcome-to-jekyll.markdown
	new file:   index.md
	new file:   jekyll-theme-hamilton
	new file:   theme/jekyll-theme-hamilton

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git commit -m "appled theme/jekyll-theme-hamilton"
[master d44562f] appled theme/jekyll-theme-hamilton
 4 files changed, 33 insertions(+)
 create mode 100644 _posts/2023-01-26-welcome-to-jekyll.markdown
 create mode 100644 index.md
 create mode 160000 jekyll-theme-hamilton
 create mode 160000 theme/jekyll-theme-hamilton

 

 

이전 테마를 다운받을때 git push를 바로하게 되면, remote의 repository를 이동했기 때문에 아래와 같은 오류 메시지가 나타난다.

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git push -u origin main
Username for 'https://github.com': shlee853
Password for 'https://shlee853@github.com': 
remote: Permission to zivong/jekyll-theme-hamilton.git denied to shlee853.
fatal: unable to access 'https://github.com/zivong/jekyll-theme-hamilton.git/': The requested URL returned error: 403

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git remote -v
origin	https://github.com/zivong/jekyll-theme-hamilton.git (fetch)
origin	https://github.com/zivong/jekyll-theme-hamilton.git (push)

 

 

이와 같은 경우에는 remote의 repository를 이동했기 때문에 다시 나의 remote 위치로 이동시켜 준다. 

$ git remote set-url origin https://github.com/shlee853/shlee853.github.io.git

 

그리고 git push를 하면 아래와 같이 fail이 나타날 경우가 있다. 이 경우는 remote와 local의 충돌로 remote를 push하고 나서 다시 업데이트를 하라는 안내메시지를 나타내는 것 같다.

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git remote set-url origin https://github.com/shlee853/shlee853.github.io.git

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git branch -M main

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git push -u origin main
Username for 'https://github.com': shlee853
Password for 'https://shlee853@github.com': 
To https://github.com/shlee853/shlee853.github.io.git
 ! [rejected]        main -> main (non-fast-forward)
error: failed to push some refs to 'https://github.com/shlee853/shlee853.github.io.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

 

 

특별한 문제가 없다면 아래 +옵션을 사용하여 강제로 업로드가 가능하다.

$ git push -u origin +main

 

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ git push -u origin +main
Username for 'https://github.com': shlee853
Password for 'https://shlee853@github.com': 
Enumerating objects: 744, done.
Counting objects: 100% (744/744), done.
Delta compression using up to 8 threads
Compressing objects: 100% (244/244), done.
Writing objects: 100% (744/744), 2.46 MiB | 1.97 MiB/s, done.
Total 744 (delta 423), reused 733 (delta 419)
remote: Resolving deltas: 100% (423/423), done.
To https://github.com/shlee853/shlee853.github.io.git
 + c5faa51...1e232d7 main -> main (forced update)
Branch 'main' set up to track remote branch 'main' from 'origin'.

 

 

만약 업로드시 다운받은 테마의 소스를 포함시키지 않고 싶다면 아래와 같이 제외할 수 있다.

$ git rm --cached jekyll-theme-hamilton

 

Remote에 접속하여 확인하면 테미가 적용된 홈페이지를 확인할 수 있다.

필요한 부분은 Local 서버에서 수정하여 다시 Remote로 업로드하면 된다.

 

 

 

 

Local에서 서버를 실행할 때 오류가 발생하면 Gemfile.lock 파일을 삭제하고 다시 bundle 설치과정을 실행한다.

 

$ rm -rf Gemfile.lock

$ bundle install

$ bundle exec jekyll serve

 

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ vim Gemfile.lock 

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ rm -rf Gemfile.lock 

swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ bundle install
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Following files may not be writable, so sudo is needed:
  /usr/bin
  /usr/lib/ruby/gems/2.7.0
  /usr/lib/ruby/gems/2.7.0/build_info
  /usr/lib/ruby/gems/2.7.0/cache
  /usr/lib/ruby/gems/2.7.0/doc
  /usr/lib/ruby/gems/2.7.0/extensions
  /usr/lib/ruby/gems/2.7.0/gems
  /usr/lib/ruby/gems/2.7.0/specifications
Fetching rake 12.3.3


Your user account isn't allowed to install to the system RubyGems.
  You can cancel this installation and run:

      bundle install --path vendor/bundle

  to install the gems into ./vendor/bundle/, or you can enter your password
  and install the bundled gems to RubyGems using sudo.
  
  
  
  swift@swift-HP-Pavilion-dv6-Notebook-PC:~/workspace/git/shlee853.github.io$ bundle exec jekyll serve
Configuration file: /home/swift/workspace/git/shlee853.github.io/_config.yml
            Source: /home/swift/workspace/git/shlee853.github.io
       Destination: /home/swift/workspace/git/shlee853.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 1.164 seconds.
 Auto-regeneration: enabled for '/home/swift/workspace/git/shlee853.github.io'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.
[2023-01-26 18:00:36] ERROR `/favicon.ico' not found.


  Password: 
Installing rake 12.3.3
Fetching public_suffix 5.0.1
Installing public_suffix 5.0.1
Fetching addressable 2.8.1
Installing addressable 2.8.1
Using bundler 2.1.2
Fetching colorator 1.1.0
Installing colorator 1.1.0
Fetching concurrent-ruby 1.2.0
Installing concurrent-ruby 1.2.0
Fetching eventmachine 1.2.7
Installing eventmachine 1.2.7 with native extensions
Fetching http_parser.rb 0.8.0
Installing http_parser.rb 0.8.0 with native extensions
Fetching em-websocket 0.5.3
Installing em-websocket 0.5.3
Fetching ffi 1.15.5
Installing ffi 1.15.5 with native extensions
Fetching forwardable-extended 2.6.0
Installing forwardable-extended 2.6.0
Fetching i18n 0.9.5
Installing i18n 0.9.5
Fetching rb-fsevent 0.11.2
Installing rb-fsevent 0.11.2
Fetching rb-inotify 0.10.1
Installing rb-inotify 0.10.1
Fetching sass-listen 4.0.0
Installing sass-listen 4.0.0
Fetching sass 3.7.4
Installing sass 3.7.4
Fetching jekyll-sass-converter 1.5.2
Installing jekyll-sass-converter 1.5.2
Fetching listen 3.8.0
Installing listen 3.8.0
Fetching jekyll-watch 2.2.1
Installing jekyll-watch 2.2.1
Fetching rexml 3.2.5
Installing rexml 3.2.5
Fetching kramdown 2.4.0
Installing kramdown 2.4.0
Fetching liquid 4.0.4
Installing liquid 4.0.4
Fetching mercenary 0.3.6
Installing mercenary 0.3.6
Fetching pathutil 0.16.2
Installing pathutil 0.16.2
Fetching rouge 3.30.0
Installing rouge 3.30.0
Fetching safe_yaml 1.0.5
Installing safe_yaml 1.0.5
Fetching jekyll 3.9.2
Installing jekyll 3.9.2
Fetching jekyll-feed 0.17.0
Installing jekyll-feed 0.17.0
Fetching jekyll-paginate 1.1.0
Installing jekyll-paginate 1.1.0
Fetching jekyll-seo-tag 2.8.0
Installing jekyll-seo-tag 2.8.0
Fetching jekyll-sitemap 1.4.0
Installing jekyll-sitemap 1.4.0
Fetching kramdown-parser-gfm 1.1.0
Installing kramdown-parser-gfm 1.1.0
Using jekyll-theme-hamilton 4.0.0 from source at `.`
Bundle complete! 3 Gemfile dependencies, 33 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from sass:

Ruby Sass has reached end-of-life and should no longer be used.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  https://sass-lang.com/blog/posts/7828841