/ GITHUB

Github pages로 블로그 만들기(2)

이전 포스트에 이어서 설치를 이어가겠다. 마지막에 로컬에서 서버를 열어서 블로그가 열리긴했지만, 빌드를 할때 수많은 에러들이 올라간것을 봤을 것 이다.

에러 해결

아래처럼 사진 위쪽이 모두 에러다. 이 에러를 해결해 보도록 하자. 개인적으로 이 에러를 해결하기 위해 가장 오랜 시간이 걸렸다.

img1

아래 댓글이 나를 살렸다…

img2

기존에 열었던 Gemfile을 다시 열어서 아래와 같이 바꿔주자!

img3

그리고 bundle update jekyll을 실행해준다. 다시 bundle exec jekyll serve를 실행해준다. 드디어 아래와 같이 깔끔하게 에러가 해결이 되었다!

img4

이제 배포를 해보자 우선 Github로 가서 새로운 repo를 생성한다.

단 repo명은 (githubname).github.io로 생성한다

img5

아까 bundle exec jekyll serve를 한 결과를 다시 살펴보면 아래처럼 어느 경로로 빌드파일을 저장했는지 알 수 있다. 우린 나중에 해당 폴더를 Git repo로 올려서 배포해주는 것이다.

img6

위에 사진처럼 다른 상위 폴더에서 조작할 경우 git설정을 할때 불편한 부분이 있을 수 있어서 블로그 폴더에서 _config.yml 이라는 파일을 찾아서 자신에 맞는 개인정보로 바꿔준뒤 진행하겠다. 변경한 부분은 코드 위에 간단한 설명과 함께 #한글로 표현하였다

# Jekyll configuration
markdown: kramdown
highlighter: rouge
paginate: 100 # it will paginate after this number
language: 'en-uk'
words_per_minute: 200

# edit baseurl to simply '/' if using as your personal page (instead of a project page)
# /로 설정
baseurl: /

# Website info
title: Ghost
description: The professional publishing platform
cover: assets/images/blog-cover.jpg
logo: assets/images/blog-icon.png
logo_dark: assets/images/favicon.png
favicon: assets/images/favicon.png
CNAME: #add cname for website to be created

# Social info
navigation: True # show the navbar links
subscribers: True # you need to connect an external service for this to work,
# if 'True' the submit button is disabled for now, but you can change that
# by editing `_includes/subscribe-form.html`
twitter:  # replace by your username
facebook:  # replace by your username

# 댓글 기능을 이용할때 필요한 정보
# Disqus
disqus: False
disqus_shortname: kirk0201 # replace with your disqus username

# Google Analytics
google_analytics: UA-69281367-1 # replace with your GA tracking identifier

# Permalinks
permalink: /:title
# permalink: /author/:author
# permalink: /tag/:tag

# Authors' info in `_data/authors.yml`
# Tags' info in `_data/tags_info.yml`

# gems and other configs
plugins_dir: [_plugins]
plugins: [jekyll-paginate, jekyll-feed]

feed:
  path: feed.xml

# Additional settings available on the front-matter
# Site logo in the index.html (as in demo.ghost.io)
# Author's page cover in _layouts/author.html
# The same for page.html and tag.html layouts
# Post's page cover as a per-post basis _posts/...
# Disqus comments as a per-post basis
# ...

# Settings for building master branch with travis-ci
# with jekyll-travis

# Settings for deploy rake task
# Username and repo of Github repo, e.g.
# https://github.com/USERNAME/REPO.git
# username defaults to ENV['GIT_NAME'] used by Travis
# repo defaults to USERNAME.github.io
# Branch defaults to "source" for USERNAME.github.io
# or "master" otherwise
safe: False
lsi: False

# Github 계정명
username: kirk0201
# Github repo 명
repo: kirk0201.github.io
branch: master
relative_source: 
# 빌드 경로 설정 (기존 설정은 상위 폴더에 있어 git작업에 불편함이 있어서 아래처럼 바꿧다)
destination: ./jasper2-pages/
# 최종적으로 블로그로 이용될 주소
production_url:  https://kirk0201.github.io/
# Github repo 주소
source_url:  https://github.com/kirk0201/kirk0201.github.io/

# 빌드할때 포함하지 않을 폴더나 파일을 지정해준다.
# 위에서 현재폴더로 빌드경로를 바꿧기 때문에 아래 첫번째 줄 처럼 jasper2-pages를 추가해준다
exclude:
  - jasper2-pages
  - assets/css
  - node_modules
  - vendor
  - .travis.yml
  - Gemfile
  - Gemfile.lock
  - GHOST.txt
  - gulpfile.js
  - LICENSE
  - package.json
  - package-lock.json
  - Rakefile
  - README.md
  - script.py
  - changelog.md
  - "*.Rmd"
  - .git*

많은 설정을 바꿧기 때문에 다시 빌드를 해준하고 진행하자.

bundle exec jekyll serve

이제 블로그 폴더를 확인해보면 같은 폴더안에 jasper2-pages가 생성된 것을 확인할 수 있다.

기존에 상위에 생긴 폴더는 필요없으니 지워주도록 하자

지금부터는 편의상 Git bash를 이용하겠다. Git bash로 jasper2-pages폴더로 이동한뒤 git을 이용하기 위해 git init을 하여 활성화 하자.

com@DESKTOP-DQ7PCJE MINGW64 /d/blog
$ cd jasper2-pages/

com@DESKTOP-DQ7PCJE MINGW64 /d/blog/jasper2-pages
$ git init
Initialized empty Git repository in D:/jasper2-pages/.git/

아까 Github repo를 생성한 화면으로 돌아가면 아래와 같은 코드가 있을 것이다.

img7

이 코드를 이어서 적어 넣자

com@DESKTOP-DQ7PCJE MINGW64 /d/blog/jasper2-pages
$ git remote add origin https://github.com/kirk0201/kirk0201.github.io.git

com@DESKTOP-DQ7PCJE MINGW64 /d/blog/jasper2-pages
$ git remote -v // 해당 코드로 위에 remote가 잘 적용되었는지 확인해보자

이제 해당 폴더의 파일들을 add하고 commit메세지를 작성한뒤 push하여 올려주면 된다

com@DESKTOP-DQ7PCJE MINGW64 /d/jasper2-pages
$ git add . // 모든 파일을 add함

com@DESKTOP-DQ7PCJE MINGW64 /d/jasper2-pages
$ git commit -m "블로그 첫 배포"

com@DESKTOP-DQ7PCJE MINGW64 /d/jasper2-pages
$ git push origin master

Github repo에 업데이트가 되었는지 확인한뒤 Github계정명.github.io로 브라우저에서 접속해 보면 성공이다!

  1. _config.yml에서 설정이 잘못된 경우 빌드가 제대로 되지 않아 사진이 깨질수 있으니 주의하길 바란다.

  2. 기본적으로 Jekyll build는 development 세팅된다. 만약 실제 GitHub Page에 Publishing할 목적으로 build하는 것이라면 JEKYLL_ENV 환경변수의 값을 production으로 설정한 후 build를 진행해야 합니다. (참고링크)

img9