(macOS) github.io chirpy-theme 적용 및 git push

INTRO

0-1. GitHub 가입 : GitHub 가입 및 git commit/push 

0-2. [YourGitHubUsername].github.io 생성 : github.io 블로그 생성

0-3. github.io jekyll bundler 적용 : github.io jekyll bundler 설치 및 git push 적용

1. 개발서버 실행 chirpy-theme 적용

2. chirpy-theme 수정

3. github.io git push 적용 및 page 설정

 

 

1. 개발서버 실행 theme 적용

jekylltheme 사이트 : http://jekyllthemes.org/

선택한 테마 chirpy : http://jekyllthemes.org/themes/jekyll-theme-chirpy/

chirpy GitHub Download Zip를 통해 다운 받아 zip파일을 풀고 macbook local project directory에 덮어씌운다.

https://github.com/cotes2020/jekyll-theme-chirpy 

필자 작업폴더 : /Users/[YourMacID]/jinozpersona/jinozpersona.github.io

 

jinozpersona.github.io$ bundle

Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Using bundler 2.3.5
Using colorator 1.1.0

....

Installing html-proofer 3.19.3
Bundle complete! 6 Gemfile dependencies, 43 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

 

- 개발서버 실행 및 theme 적용 확인

jinozpersona.github.io$ bundle exec jekyll serve

 

browser : localhost:4000

 

- chirpy-theme 초기화

jinozpersona.gihub.io $ git init
jinozpersona.github.io git:(master) $ git branch -m main
jinozpersona.github.io git:(main) $ git add .
jinozpersona.github.io git:(main) $ git commit -m "chirpy-theme"

jinozpersona.github.io git:(main) $ bash tools/init.sh

 

개발서버 실행

jinozpersona.github.io$ bundle exec jekyll serve

browser : localhost:4000

 

2. theme 수정

- favicon 만들기 사이트

https://realfavicongenerator.net/

 

Select your Favicon image를 클릭하여 local PC에서 이미지를 선택한다.

 

하단 Genrate your Favicons and HTML code를 클릭한다.

 

Favicon package를 클릭하면 favicon_package_v0.16.zip 파일이 다운로드된다.

파일 압축을 풀어 chirpy-them의 assets/img/favicons에 덮어씌운다.

 

 

- config 수정 : lang, timezone, title/tagline/description/githb/social/avatar

/jinozpersona.gitgub.io/_config.yml

....

# 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: ko

# 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: JinozPersona                          # the main title

tagline: jinozpersona.github.io Blog   # it will display as the sub-title

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

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

github:
  username: jinozpersona             # 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: jinozpersona
  email: pyeng.jiwonlee@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/username       # 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:               # fill in to your verification string

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

....

# 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:

# the avatar on sidebar, support local or CORS resources
avatar: "/assets/img/favicon_jp.png"

 

 

- sidebar 하단 contact Icon

/jinozpersona.gitgub.io/_data/contact.yml

#  The contact options.

-
  type: github
  icon: 'fab fa-github'
# -
#   type: twitter
#   icon: 'fab fa-twitter'
-
  type: email
  icon: 'fas fa-envelope'
  noblank: true            # open link in current tab
-
  type: rss
  icon: 'fas fa-rss'
  noblank: true

....

 

- post 쓰기 : 파일이름 규칙 yyy-mm-dd-제목.md

/jinozpersona.gitgub.io/_posts/2022-01-30-first-post.md

---
title: First Post
author:
  name: jinozpersona
  link: 
date: 2022-01-30 19:00:00 +0900
categories: [Blog, Post]
tags: [test]
math: true
mermaid: true
image:
  src: #/commons/devices-mockup.png
  width: #800
  height: #500
---

First Post

chirpy theme 사용법



## Titles
---
# H1 - heading

<h2 data-toc-skip>H2 - heading</h2>

<h3 data-toc-skip>H3 - heading</h3>

<h4>H4 - heading</h4>
---
<br>

## Paragraph

문단내용 넣기.


## Lists

### Ordered list

1. Firstly
2. Secondly
3. Thirdly

### Unordered list

- Chapter
  - Section
    - Paragraph

### Task list

- [ ] TODO
- [x] Completed
- [ ] Defeat COVID-19
  - [x] Vaccine production
  - [ ] Economic recovery
  - [ ] People smile again

### Description list

Sun
: the star around which the earth orbits

Moon
: the natural satellite of the earth, visible by reflected light from the sun

## Block Quote

> This line shows the _block quote_.

## Prompts

> An example showing the `note` type prompt.
{: .prompt-note }

> An example showing the `warning` type prompt.
{: .prompt-warning }

> An example showing the `danger` type prompt.
{: .prompt-danger }

## Tables

| Company                      | Contact          | Country |
|:-----------------------------|:-----------------|--------:|
| Alfreds Futterkiste          | Maria Anders     | Germany |
| Island Trading               | Helen Bennett    | UK      |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |




<h2>.... 중략 ....</h2>




## Inline code

This is an example of `Inline Code`.

## Filepath

Here is the `/path/to/the/file.extend`{: .filepath}.

## Code block

### Common

```
This is a common code snippet, without syntax highlight and line number.
```

### Specific Languages

#### Console

```console
$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash
```

#### Shell

```bash
if [ $? -ne 0 ]; then
    echo "The command was not successful.";
    #do the needful / exit
fi;
```

### Specific filename

```sass
@import
  "colors/light-typography",
  "colors/dark-typography"
```
{: file='_sass/jekyll-theme-chirpy.scss'}

## Reverse Footnote

[^footnote]: The footnote source
[^fn-nth-2]: The 2nd footnote source

 

 

- .gitignore 수정

/jinozpersona.gitgub.io/.gitignore

_site
.sass-cache
.jekyll-cache
.jekyll-metadata
vendor

README.md
.DS_Store
Gemfile.lock

 

- 위 사항 적용 확인

browser : localhost:4000

 

browser : localhost:4000/posts/first-post/

 

 

 

3. github.io git push 및 page 설정

jinozpersona.github.io git:(main) $ git remote add origin https://github.com/jinozpersona/jinozpersona.github.io.git
jinozpersona.github.io git:(main) $ git push -u origin +main

 

# 참고 : git add . or git add -A 경고 메세지
warning: CRLF will be replaced by LF in .gitignore.The file will have its original line endings in your working directory
jinozpersona.github.io git:(main) $ git config --global core.autocrlf input
jinozpersona.github.io git:(main) $ git satus

 

- github page 설정

browser : https://github.com/jinozpersona/jinozpersona.github.io

branch에서 gh-pages가 생성될때까지 build/deploy가 자동으로 시행된다. 진행 상황은 Action 탭에서 확인 가능

settings 탭에서 Pages를 클릭하여 Source 부분의 branch를 gh-pages로 설정하고 save한다.

 

- github page 배포 완료 확인

browser : https://jinozpersona.github.io