Choice Theme
이제 저장소도 만들어졌으니, Theme 테마를 고를 때입니다. 그런데 여러분, 고르기 전에 여러분들께 하나 말씀드리겠습니다.
먼저 블로그는 보통 검색 에 의해서 하나의 포스팅만 봅니다. 그러면 하나의 글이 누구나 어디서든 편하게 볼 수 있는 테마를 선택하시는 걸 추천드립니다.
또한 블로그 운영자의 입장에선, 카테고리 , 태그, 시간순 정렬 등이 있으면 관리하는 입장에서 대국적으로 글의 흐름들을 확인할 수 있습니다.
그리고 Jekyll 기반으로 블로그를 구축할 예정입니다.
What is the Jekyll
Jekyll 은 컴퓨터에 있는 텍스트 파일을 블로그에 호스팅할 수 있도록 도와주는 소프트웨어입니다. 정적 웹사이트를 템플릿으로, 인터넷에 들어가서 글쓰기 버튼을 누르지 않아도 됩니다. 설정한 폴더에 텍스트 파일만 등록하면 알아서 등록해주는 것이죠.
그럼 Jekyll 만 써도 되는데 우리는 왜 깃허브를 이용해서 블로그를 운영할까요? 그것은 깃 은 형상관리 툴이며, 깃허브를 통해서 자동화된 기능을 만들 수 있습니다.
Jekyll Theme
이제 Jekyll Theme 를 다운받겠습니다. 아래 사이트에서 선택할 수 있으나, 저는 Chirpy 를 골랐습니다. 이유는 Category, Tag, Archive, About 을 제공하고 Trending Tag, Recent Update, Contents, Expected read time 을 제공합니다. 또한 제 블로그는 실습이 들어간 기술블로그라 컴퓨터에서 보기엔 적합한 테마를 선택했죠.
- http://jekyllthemes.org/
이 외에도 추가적인 사이트가 있습니다. 사실 크게 다를 것은 없습니다.
- https://github.com/topics/jekyll-theme
Chirpy 를 클릭했을 때 화면은 아래와 같습니다. Download 를 눌러주세요.
Apply Theme
다운로드 된 폴더 안에 들어가보면 이러한 파일들이 있습니다. 자, 그럼 먼저 파일안의 _config.yml 을 열어주세요.
가장 기본적인 설정들은 아래와 같습니다.
해당 키워드를 찾기 기능으로 찾아서, 수정하시면 됩니다. 만약 없다면, 키워드까지 적어서 추가하여 주세요. 예) lang: ko-KR
baseurl : 로컬 테스트를 원한다면 프로젝트 네임을 적습니다. 아니면 빈칸으로 두시면 됩니다.
baseurl: ‘/깃허브이름.io’ # 로컬테스를 원할 때
baseurl: ‘’ #로컬테스트는 생략할 때
lang : 해당 웹페이지의 주로 사용되는 언어입니다. 한국어로 설정하겠습니다. 참고
lang: ko-KR
timezone : 현재 위치는 어디인지 적습니다. 참고
timezone: Asia/Seoul
title : 블로그의 제목입니다.
tagline : 블로그의 소제목입니다.
description : 블로그의 설명입니다.
title: 실습 블로그
tagline: 한마디 소개
description: >-
상세한 실습을 위해 블로그를 직접 생성한다. 이러한 설명에는
줄을 바꿔서 쓸 수도 있다.
url : 블로그의 주소입니다. 자신의 username 에 .github.io 를 붙입니다.
url: ‘https://깃허브이름.github.io’
GitHub: username : 깃허브의 username 을 작성해주세요.
github: username: SimonWithWoogi
Upload Repository
이제 이 자료들은 깃허브에 한번 올려봅시다. 저장소가 비어있다면, 아래와 같이 적혀있을 것이고,
https://github.com/SubSimon/Temporary.git
이런 형태의 주소를 확인할 수 있을 것입니다. 모르시더라도 쉽게할 수 있습니다. https://github.com/깃허브이름/저장소이름.git 입니다.
Git, 더 나아가 Git on GUI tool이 설치되어 있다는 가정으로 진행합니다.
원하시는 폴더에 저장소를 받아오시고 커밋 후 푸쉬 하겠습니다.
위 이미지처럼 저는 TestBlog 라는 폴더에 받아왔습니다.
일단 비어있는 이 폴더에 아까 받아온 테마를 죄다 넣어줍시다.
이제 바로 Commit 을 한 다음, Push 하겠습니다.
깃허브 를 들어가보겠습니다. 아래 그림처럼 파일이 들어와 있습니다.
Install Gem
이제 여기서 윈도우 사용자분들께서는 조금 힘들 수 있습니다. 윈도우에서 리눅스 커맨드 사용을 해야되거든요.
구글에서 검색하면 처음으로 나오는 사이트를 공유드립니다.
자, 이제 리눅스와 맥 수준으로 준비가 됐다고 가정을 하고 마저 진행하겠습니다. 먼저 깃허브 에서 받아온 로컬 폴더를 커맨드로 들어가겠습니다.
pwd 명령어를 실행하여 경로가 확실한지 확인하고 ls 명령어로 Gemfile 을 찾아야합니다.
그리고 아래 명령어를 진행하여 주세요.
1
sudo bundle
아래처럼 잘 나왔나요? 그리고 아마 Gemfile.lock 또한 나왔을 것입니다. 깃 에서 해당파일을 관리대상에서 제외시켜주세요.
그리고 다시 깃허브 에 들어가서 Actions 를 눌러주신 다음 Set up this workflow 를 눌러주세요~
그리고 무슨 코드들이 만들어졌을텐데 모두 지우시고 아래 내용을 넣어주세요. 그리고 위에 pages-deploy.yml로 제목을 바꿔주세요.
우측에 Start commit 이 있습니다. 눌러서 내용을 적고 commit 해주세요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
name: 'Automatic build'
on:
push:
branches:
- master
paths-ignore:
- .gitignore
- README.md
- LICENSE
jobs:
continuous-delivery:
runs-on: ubuntu-latest
env:
GEMS_PATH: vendor/bundle
steps:
- name: Checkout
uses: actions/checkout@v2
with:
fetch-depth: 0 # for posts's lastmod
- name: Setup Ruby
uses: actions/setup-ruby@v1
with:
ruby-version: 2.7
- name: Bundle Caching
uses: actions/cache@v2
with:
path: $
key: $-gems-$
restore-keys: |
$-gems-
- name: Bundle Install
run: |
bundle config path $
bundle install --jobs 4 --retry 3
- name: Check baseurl
run: |
baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
if [[ -n $baseurl ]]; then
echo "BASE_URL=$baseurl" >> $GITHUB_ENV
fi
- name: Build Site
env:
JEKYLL_ENV: production
run: |
bundle exec jekyll b -d "_site$BASE_URL"
- name: Test Site
run: |
bash tools/test.sh
- name: Deploy
run: |
if [[ -n $BASE_URL ]]; then
mv _site$BASE_URL _site-rename
rm -rf _site
mv _site-rename _site
fi
bash tools/deploy.sh
Deploy
이제 거의 끝났습니다. 뭔가 싶겠지만, 로컬 에 있는 깃을 삭제하여주세요. 왜냐하면 온전한 Deploy를 위해 저장소명을 바꿔야 합니다.
이제 깃허브 에 들어가서 Setting 을 눌러주세요. Options 탭에보면 저장소이름이 Temporary 로 되어있는데 계정이름.github.io 로 바꿔줍시다.
그리고 Rename 을 눌러주세요.
바로 다시 Setting -> Option 으로 가서 스크롤을 밑으로 내리다보면 아래의 창이 보입니다. Check it out here 을 눌러주세요.
그런 다음 Sources 에 있는 Branch를 master 에서 gh-pages 로 변경하여 주세요. Save 까지 눌러주세요.
잠깐 기다렸다가, 새로고침 또는 다시 Setting -> Pages 에 들어가서 아래의 그림을 확인해서 자신의 사이트 주소에 들어가봅시다.
https://subsimon.github.io/
Hello world
글을 하나 써볼까요? 참고로 저는 Typora 라는 마크다운 에디터 를 사용하고 있습니다.
깃허브 에 들어가서 다시 한번 저장소 주소를 복사해서 원하는 폴더에 가져오겠습니다.
해당 폴더에 다 받아오셨으면 _posts 라는 경로에 들어가주세요. 그럼 .md 형태의 글들이 좀 남아있습니다만, 원하시면 지우셔도 됩니다.
일단 .md 파일을 하나 생성하겠습니다. 이름의 형식은 아래와 같습니다.
연-월-일-제목.md 예) 2021-04-27-nonamed.md
그리고 아래처럼 글을 쓸 수 있고, 바로 Commit 후 Push 하면 글이 바로 올라가진 않습니다.
왜냐하면 깃허브 액션에서 포스팅 자동화를 맡은 녀석이 돌아가고 있기 때문인데요. 문제가 생긴다면 continuous-delivery 를 누르셔서 상세한 상황을 알 수 있습니다.마크다운 을 이용한 글쓰기는 그리 어렵지 않다보니 따로 시간이 난다면 작성하겠습니다.
