깃 블로그 생성

Intro:

• 포트폴리오용 웹페이지를 만들 겸, 기존에 쓰던 깃 블로그와 합쳐 새로 만들려고 한다

기존 theme: cotes2020/jekyll-theme-chirpy 리뉴얼 theme: chemistryx/hyde

진행 방식:

1. chemistry/hyde theme 다운로드
2. 기본 설정
3. 추가 customizing
4. 기존 블로그 post 이동

깃 블로그 생성

Jekyll, Ruby 등 installation

• https://jekyllrb.com/docs/installation/
• 위 링크의 본인 OS에 따른 가이드대로 설치
• 확인

chemistry/hyde theme 다운로드

1. https://github.com/chemistryx/hyde 접속
2. code > download zip 클릭
3. 압축 풀기
4. 원하는 폴더 위치로 이동

git clone 대신 download zip 하는 이유:

• git clone나 fork시 commit 해도 잔디가 안심어지는 문제가 생긴다(원본 레포지로 commit merge시에 잔디가 심어짐)
• 처음부터 download zip 이용시 연결이 없어 (.git 파일 자체가 없음) 편하다
• 만약 이미 fork나 clone하여 사용했다면, 원본 레포지로 끊는 방법이 존재하긴 한다:
  • git 서비스 센터에 문의 남기면 가능했던걸로 기억한다

기본 설정

_config.yml 파일 수정

• 설명: 기본적인 설정 내용이 들어가있는 yml 형식의 파일
• cotes2020/jekyll-theme-chirpy 의 README.md 의 설명대로 변경

설정하기

1. _config.yml 수정

title: Hyde
description: >-
  Build your own portfolio <br>
  with Hyde.
url: "https://chemistryx.github.io/hyde"
github: ChemistryX
email: changeme@chemistryx.me
google_analytics: "UA_TOKEN"

exclude: [README.md, Gemfile, Gemfile.lock]

comments:
  enabled: true
  repo: "REPO_COMMENTS_PATH"
  issue-term: pathname
  theme: github-light

title: 웹사이트 전반에서 표시될 이름입니다.(네비게이션 바, 푸터 등)

description: 초기 페이지 설명 문구에 들어갈 내용입니다.

url: 사이트의 주소를 적어주세요. 사이트맵 및 기타 부가기능을 설정하는 데 필요합니다.

github: 본인 GitHub 사용자 이름을 적어주세요. 푸터에 있는 버튼에 사용됩니다.

email: 본인의 이메일을 적어주세요. 소셜 기능 및 푸터에 있는 버튼에 사용됩니다.

google_analytics: Google Analytics에서 발급한 추적 ID를 입력해주세요.

comments: 블로그 하단부에 노출되는 댓글 설정입니다. 댓글은 GitHub 계정이 있어야 달 수 있습니다. 자세한 내용은 이곳을 참조하세요.

2. 기타 부가적인 내용 수정

robots.txt: 기존 URL을 본인 사이트 URL에 맞게 수정

assets/images/site.webmanifest: 내용을 본인 사이트에 맞게 수정

• 그 외 내용들을 코드 내부에 주석으로 달아놓았으니 참고하시길 바랍니다.

기존 theme __config.yml

# The Site Configuration

# Import the theme

theme: jekyll-theme-chirpy


# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites

# and doesn't have a custom domain.

baseurl: ""

# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm

# If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,

# otherwise, the layout language will use the default value of 'en'.

lang: en

# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone

timezone: Asia/Seoul

  

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

# ↓ --------------------------

  

title: Syshin # the main title

  

tagline: study blog # it will display as the sub-title

  

description: >- # used by seo meta and the atom feed

private study blog to keep track of my studies.

  

# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'

url: "https://syshin0116.github.io"

  

github:

username: syshin0116 # change to your github username

  

twitter:

username: twitter_username # change to your 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: syshin

email: syshin0116@gmail.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/syshin0116 # change to your github homepage

# Uncomment below to add more social links

# - https://www.facebook.com/username

# - https://www.linkedin.com/in/username

  

google_site_verification: iZ5EsC_9koMmW-EeNF_TLz0vX3WZ7H1hOhzjKN8QBl4 # fill in to your verification string

  

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

# The end of `jekyll-seo-tag` settings

  

google_analytics:

id: 'G-XZB0EYZF1G' # fill in your Google Analytics ID

# Google Analytics pageviews report settings

pv:

proxy_endpoint: 'https://syshin0116.du.r.appspot.com/query?id=agx2fnN5c2hpbjAxMTZyFQsSCEFwaVF1ZXJ5GICAgOjXh4EKDA'# fill in the Google Analytics superProxy endpoint of Google App Engine

cache_path: # the local PV cache data, friendly to visitors from GFW region

  

# Prefer color scheme setting.

#

# Note: Keep empty will follow the system prefer color by default,

# and there will be a toggle to switch the theme between dark and light

# on the bottom left of the sidebar.

#

# Available options:

#

# light - Use the light color scheme

# dark - Use the dark color scheme

#

theme_mode: # [light|dark]

  

# The CDN endpoint for images.

# Notice that once it is assigned, the CDN url

# will be added to all image (site avatar & posts' images) paths starting with '/'

#

# e.g. 'https://cdn.com'

img_cdn: "https://chirpy-img.netlify.app"

  

# the avatar on sidebar, support local or CORS resources

avatar: "/commons/avatar.jpg"

  

# boolean type, the global switch for TOC in posts.

toc: true

  

comments:

active: 'giscus'# The global switch for posts comments, e.g., 'disqus'. Keep it empty means disable

# The active options are as follows:

disqus:

shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname

# utterances settings › https://utteranc.es/

utterances:

repo: # <gh-username>/<repo>

issue_term: # < url | pathname | title | ...>

# Giscus options › https://giscus.app

giscus:

repo: syshin0116/syshin0116.github.io # <gh-username>/<repo>

repo_id: "R_kgDOJd1hgw"

category: "General"

category_id: "DIC_kwDOJd1hg84CWOc4"

mapping: "pathname" # optional, default to 'pathname'

input_position: "top"# optional, default to 'bottom'

lang: # optional, default to the value of `site.lang`

reactions_enabled: # optional, default to the value of `1`

  

# Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets

assets:

self_host:

enabled: # boolean, keep empty means false

# specify the Jekyll environment, empty means both

# only works if `assets.self_host.enabled` is 'true'

env: # [development|production]

  

pwa:

enabled: true # the option for PWA feature

  

paginate: 10

  

# ------------ The following options are not recommended to be modified ------------------

  

kramdown:

syntax_highlighter: rouge

syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options

css_class: highlight

# default_lang: console

span:

line_numbers: false

block:

line_numbers: true

start_line: 1

  

collections:

tabs:

output: true

sort_by: order

  

defaults:

- scope:

path: "" # An empty string here means all files in the project

type: posts

values:

layout: post

comments: true # Enable comments in posts.

toc: true # Display TOC column in posts.

# DO NOT modify the following parameter unless you are confident enough

# to update the code of all other post links in this project.

permalink: /posts/:title/

- scope:

path: _drafts

values:

comments: false

- scope:

path: ""

type: tabs # see `site.collections`

values:

layout: page

permalink: /:title/

- scope:

path: assets/img/favicons

values:

swcache: true

- scope:

path: assets/js/dist

values:

swcache: true

  

sass:

style: compressed

  

compress_html:

clippings: all

comments: all

endings: all

profile: false

blanklines: false

ignore:

envs: [development]

  

exclude:

- "*.gem"

- "*.gemspec"

- tools

- README.md

- CHANGELOG.md

- LICENSE

- rollup.config.js

- node_modules

- package*.json

  

jekyll-archives:

enabled: [categories, tags]

layouts:

category: category

tag: tag

permalinks:

tag: /tags/:name/

category: /categories/:name/

Google Analytics