깃허브 블로그 만들기

깃허브 블로그

깃허브 페이지

1. repository 를 생성
   Owner 는 jxlove2020, jxlove2020.github.io 로 repository 생성
2. Settings 탭 메뉴 클릭
   Page 설정 에서 Source 항목의 Branch 를 main 으로 바꿔주고 Save 합니다.
3. 이렇게 하면 깃허브 페이지가 생성이 됩니다.

Ruby 설치

https://rubyinstaller.org/downloads/ 사이트에서
루비를 다운로드 받아 설치해 줍니다.

루비는 받아야 할 테마가 지원하는 것으로 받아줍니다.
최신것이 지원이 안되는 경우가 있으므로 주의해야 합니다.

사이트를 만들어줄 경로에서 터미널을 열어줍니다.
인코딩을 합니다.

# 명령어를 입력하면 응답메시지가 Active code page: 65001 라고 나옵니다.
> chcp 65001
Active code page: 65001

Jekyll 설치

# jekyll 및 bundle 을 설치 해줍니다.
> gem install jekyll bundler github-pages
> gem install webrick
# jekyll 생성 - 기본 파일들이 생성되어집니다. ( 기본 테마 생성시킬 때 사용 )
# > jekyll new ./ --force # 테마를 가져와서 사용할 땐 충돌 나거나 에러 생길 수 있음

# bundle install
> bundle install
# jekyll 서버 동작
> bundle exec jekyll serve

실행시 오류가 날 경우
               ------------------------------------------------
Jekyll 4.2.1   Please append `--trace` to the `serve` command
               for any additional information or backtrace.
               ------------------------------------------------

# ruby 3.0.0부터 webrick이 기본으로 포함된 gem에서 빠졌기 때문에 추가 해줍니다.
> bundle add webrick
# 다시 서버를 실행 해본다.
> bundle exec jekyll serve
# 실행 주소가 뜨면 클릭해서 들어가 봅니다.
Server address: http://127.0.0.1:4000/

# Welcome to Jekyll! 이라고 브라우저 화면이 뜨면 성공입니다.

jekyll-theme-chirpy 테마를 선택

https://github.com/cotes2020/jekyll-theme-chirpy 에 접속하여 코드를 다운받습니다.
압축을 풀고, 폴더 안의 모든 내용을 복사하여, local 폴더 안에 붙여 넣어줍니다.

테마 적용

# 파일이 추가 되었으니 다시 bundle install 해 주고
> bundle install
# 지킬로컬 서버를 실행하면
> bundle exec jekyll serve
# 실행이 됩니다.

# 브라우저 화면에 기존과 다른 UI 가 나오며 Getting Started 가 나오면 성공

_config.yml 파일

# import하는 테마 명입니다. 디폴트로 사용중인 테마 명이 들어가 있습니다.
theme: jekyll-theme-chirpy

baseurl: "" # 사용자 페이지를 만들었을 경우, 빈칸으로 둡니다.

lang: ko-KR # 사용하는 언어 설정을 진행합니다.
# http://www.lingoes.net/en/translator/langcode.htm 로 접속하여 확인가능합니다.

timezone: Asia/Seoul #timezone설정입니다.
# http://www.timezoneconverter.com/cgi-bin/findzone/findzone 에서 확인가능합니다.

# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
# --------------------------

title: Joseph.Note # 블로그 이름입니다. 설정하면 브라우저 상단에 설정된 이름이 확인가능합니다.

tagline: think different # 서브 타이틀 입니다. 설정하면 블로그 첫 페이지 좌측에서 확인 가능합니다.

description:
  >- # "used by seo meta and the atom feed"라고 나옵니다. 설정을 그대로 둡니다..
  A minimal, portfolio, sidebar,
  bootstrap Jekyll theme with responsive web design
  and focuses on text presentation.

url:
  "https://jxlove2020.github.io" # 'https://username.github.io'와 같이 설정합니다.
  # 잘 적어넣도록 합니다.

github:
  username: jxlove2020 # 본인의 github username을 적습니다.

#twitter:
#  username: twitter_username            # 본인의 twitter username을 적습니다.

social:
  # Change to your full name.
  # It will be displayed as the default author of the posts and the copyright owner in the Footer
  name: Joseph
  email: nels1004@naver.com # change to your email address
  links:
    # The first element serves as the copyright owner's link
    #- https://twitter.com/username      # change to your twitter homepage
    - https://github.com/jxlove2020 # change to your github homepage
    # Uncomment below to add more social links
    # - https://www.facebook.com/username
    # - https://www.linkedin.com/in/username

    # 상단은 social관련 내용입니다. 본인의 이름, 이메일, 링크 등을 작성합니다. 저는 깃허브만 올려두었습니다.

google_site_verification: 000 # Google Search Console관련 내용입니다.

# ↑ --------------------------

google_analytics:
  id: "000" # Google Analytics ID입니다.
  pv:
    proxy_endpoint:
    cache_path:

theme_mode: # chirpy테마는 [light|dark]테마를 지원합니다. 비워두시면 사용자의 디폴트 값이 설정되고, light 또는 dark로 입력해두시면 페이지의 기본 테마가 설정됩니다.

img_cdn: "" #cdn 이미지 설정입니다. 저는 따로 진행하지 않았으나 진행하시려면 url을 작성해주시면 됩니다.

avatar: /assets/img/profile.png # 대표이미지 라고 생각하시면 됩니다. /assets/img경로에 사진을 넣은 뒤 작성하시면 됩니다.

toc:
  true # toc(Table of contents)입니다. 블로그 보시다 보면 포스팅 옆에서 스크롤을 따라오는 목차같은 녀석이 있습니다.
  # 사용하시려면 true, 아니라면 false를 적으시면 됩니다.

disqus:
  comments: true # disqus라는 덧글기능을 하는 녀석입니다. 사용하시려면 true, 아니라면 false를 적으시면 됩니다.
  shortname: "Joseph.Note" # 사용하신다면 https://disqus.com/ 에 가입 후, shortname을 넣어줍니다.

paginate: 10
# ------------------------------

사이트 정리 ( 파일 삭제 및 추가 작업 )

# jekyll-theme-chirpy의 제작자의 안내
# 1) .travis.yml 파일 삭제
# 2) _posts 폴더 안의 파일 삭제
# 3) docs 폴더 삭제 ( docs 폴더가 없을수도 있음 )
# 4) .github폴더 안의 workflows폴더를 제외한 나머지 폴더 및 파일 삭제
# 5) .github > workflows 폴더에서 ci.yml파일, issue-pr-interceptor.yml파일 2개 삭제
# 6) .github > workflows 폴더에서 pages-deploy.yml.hooc 파일을 .hooc 확장자를 지워 pages-deploy.yml 로 만들어줍니다.
# 7) .github > workflows 폴더에서 pages-deploy.yml.hooc 파일을 열고

name: "Automatic build"
on:
  push:
    branches:
      - main # 이 부분이 master 라고 되어 있다면 main으로 수정
    paths-ignore:
      - .gitignore
      - README.md
      - LICENSE
    ...

배포

깃허브에 배포 하게 되면 Automatic build 를 통해서 깃허브에서 빌드를 하고 gh-pages 브랜치도 생성하게 됨 배포 시간은 4분 ~ 7분 정도 걸림

배포가 완료 되면 사이트가 보이게됩니다.

사이트가 안나오고 이렇게 보인다면

— layout: home # Index page —

깃허브에서 Settings 탭 메뉴 클릭
Page 설정 에서 Source 항목의 Branch 를 gh-pages 로 바꿔주고 Save 합니다.

잠시 기다리면 멋진 블로그 페이지가 모습을 드러냅니다.