Github blog 재정비

9 min read Tech
Github blog 재정비

시작

오랫만에 오픈소스를 활용한 프로젝트에 참여하게 되어 윈도우 터미널을 재사용하게 되면서 참고한  '서비큐라 기술 블로그' 의 내용도 좋고 선호하는 디자인이라. 4년전에 몇달 쓰다가 그만둔 github 블로그를 정비하여 기술 전용 블로그로 만들기로 함(얼마나 갈지? ...)

영감을 준 블로그 글 : 2016년 블로그 회고 (subicura.com)

mediator  : dirkfabisch/mediator: a medium inspired jekyll theme (github.com)

A medium inspired Jekyll blog theme. The basic idea came from the Ghost theme Readium 2.0. I use mediator on my own blog The Base.

mediator 설치 환경 (windows, osx에서도 가능)

wsl2  - ubuntu in Windows 10

> lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.2 LTS
Release:        20.04
Codename:       focal

github blog 생성(테마변경) 요약

생성(테마 변경) 절차

  1. mediator github fork
  2. 로컬(PC) 디렉토리에 clone
  3. 필요 gem파일 설치
  4. jekyll 서버 실행 정상 설치 여부 점검
  5. 블로그 포스트 작성
  6. git add > commit > push
  7. custom domain 설정 (추후 추가)
You should have a server up and running locally at http://localhost:4000

사전 준비 필요 사항 : github 가입, wsl , ubuntu 등 리눅스 배포판, git 설치

기존 블로그 igotoo.github.com -> igotoo.github.io으로 테마와 함께변경

Fork

dirkfabisch/mediator: a medium inspired jekyll theme (github.com) 에서 우측상단 포크 버튼 클릭

image-20210519191904785

fork 란?

남의 것을 복제해서 내것으로 만든다. 원본과 복제된 것이 연결되어 남이 업데이트 하면  내것도 업데이트 된다.

fork는 다른 사람의 Github repository에서 내가 어떤 부분을 수정하거나 추가 기능을 넣고 싶을 때 해당 respository를 내 Github repository로 그대로 복제하는 기능이다. fork한 저장소는 원본(다른 사람의 github repository)와 연결되어 있다. 여기서 연결 되어 있다는 의미는 original repository에 어떤 변화가 생기면(새로운 commit) 이는 그대로 forked된 repository로 반영할 수 있다. 이 때 fetch나 rebase의 과정이 필요하다.
img
Forking a Repository - How to Use Git and GitHub 내용을 참고했습니다.
출처 : Git fork와 clone 의 차이점 (velog.io)

블로그 디렉토리 생성 및  git clone

/mnt/d/
> mkdir Blog
> cd Blog
> git clone https://github.com/igotoo/mediator
Cloning into 'mediator'...
remote: Enumerating objects: 494, done.
remote: Total 494 (delta 0), reused 0 (delta 0), pack-reused 494
Receiving objects: 100% (494/494), 16.48 MiB | 11.59 MiB/s, done.
Resolving deltas: 100% (167/167), done.
Updating files: 100% (114/114), done.

필요 gems 설치

ruby 설치

  • sudo apt-get install ruby-full
> sudo apt-get install ruby-full
[sudo] password for igotoo:
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following packages were automatically installed and are no longer required:
  ...
Preparing to unpack .../3-ri_1%3a2.7+1_all.deb ...
 ...
> ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-linux-gnu]
/mnt/d/Blog/mediator

gem update

  • root 권한으로 업데이트 필요 : sudo gem update bundler
/mnt/d/Blog/mediator master 
> gem update bundler
Updating installed gems
Updating bundler
Fetching bundler-2.2.17.gem
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /var/lib/gems/2.7.0 directory.
> sudo gem update bundler
Updating installed gems
Updating bundler
Fetching bundler-2.2.17.gem
Successfully installed bundler-2.2.17
Parsing documentation for bundler-2.2.17
Installing ri documentation for bundler-2.2.17
Installing darkfish documentation for bundler-2.2.17
Done installing documentation for bundler after 3 seconds
Parsing documentation for bundler-2.2.17
Done installing documentation for bundler after 1 seconds
Gems updated: bundler

gemfile 설치

  • 설치할 라이브러리 (gemfile)
  • GitHub Pages : A simple Ruby Gem to bootstrap dependencies for setting up and maintaining a local Jekyll environment in sync with GitHub Pages.
  • Bourbon :   library of Sass mixins and functions that are designed to make you a more efficient style sheet author.
  • Jekyll : Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.
  • Jemoji : GitHub-flavored Emoji plugin for Jekyll
> cat Gemfile
source 'https://rubygems.org'

# 'github-pages' includes 'jekyll' gem
gem 'github-pages'
gem 'bourbon'
gem 'jemoji'%
/mnt/d/Blog/mediator master                                                                                                      19:56:51

build-essential 설치 (기 설치시 Skip) : sudo apt-get install build-essential

참고 : ruby - Install gem gives "Failed to build gem native extension." - Stack Overflow

build-essential

build-essential 은 소스코드 빌드 시 필요한 기본적인 패키지들을 다운로드 합니다.
설치 후에는 gcc, g++, make, perl 등과 각종 라이브러리들이 설치됩니다.
출처 : build-essential (linux-command.org)
> sudo apt-get install build-essential
[sudo] password for igotoo:
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following packages were automatically installed and are no longer required:
:
  • build tool이 설치되지 않았을 경우 아래와 같은 에러 발생 할 수 있음
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

An error occurred while installing commonmarker (0.17.13), and Bundler cannot continue.
Make sure that `gem install commonmarker -v '0.17.13' --source 'https://rubygems.org/'` succeeds before bundling.

설치 : bundle install

> bundle install
Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies....
Using concurrent-ruby 1.1.8
.......

Post-install message from html-pipeline:
-------------------------------------------------
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
-------------------------------------------------
/mnt/d/Blog/mediator master ?1                                                                                               46s 21:24:38

jekyll server 실행

bundle exec jekyll server

> bundle exec jekyll serve
Configuration file: /mnt/d/Blog/mediator/_config.yml
       Deprecation: The 'gems' configuration option has been renamed to 
    ....
/var/lib/gems/2.7.0/gems/pathutil-0.16.2/lib/pathutil.rb:502: warning: Using the last argument as keyword parameters is deprecated
                    Auto-regeneration may not work on some Windows versions.
                    Please see: https://github.com/Microsoft/BashOnWindows/issues/216
                    If it does not work, please upgrade Bash on Windows or run Jekyll with --no-watch.
 Auto-regeneration: enabled for '/mnt/d/Blog/mediator'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.
image-20210519215454781

블로그 게시하기

기존에 jeykll로 만든 블로그가 있어서 삭제후 다시 만들기로 함

참고 : Github 블로그 만들기 (1), Github 블로그 만들기 (2) (velog.io)

> git init
Reinitialized existing Git repository in /mnt/d/Blog/mediator/.git/
> git commit -m "first commit"
> git push -u origin main

구블로그에서 옮겨온 post 들은 github에 올라 갔으나 ...  블로그 예전 블로그 그대로

예전 블로그

image-20210520000148451
  • 예전 블로그 삭제후 404 Not Found Error 발생

원인 : 페이지 소스가 None으로 되어 있었음

image-20210520002914315

None 을 Main으로 변경 후 정상적으로 보임

image-20210520003005822

Custom domain 설정

​ 참고 : 블로그 만들기 GitHub 심화 3편 - 커스텀 도메인 (chulgil.me), Configuring a custom domain for your GitHub Pages site - GitHub Docs

github에서 custom domain를 설정할 수 있는 2가지 (subdomain, apex domain) 중 간단하고 github에서 추천하는 subdomain 방법중 custom subdomain을 적용

Supported custom domain type Example
www subdomain www.example.com
Custom subdomain blog.example.com
Apex domain example.com
We recommend always using a www subdomain, even if you also use an apex domain. When you create a new site with an apex domain, we automatically attempt to secure the www subdomain for use when serving your site's content. If you configure a www subdomain, we automatically attempt to secure the associated apex domain.

Using a subdomain for your GitHub Pages site

A subdomain is the part of a URL before the root domain. You can configure your subdomain as www or as a distinct section of your site, like blog.example.com.
Subdomains are configured with a CNAME record through your DNS provider.

www subdomains

A www subdomain is the most commonly used type of subdomain. For example, www.example.com includes a www subdomain.
www subdomains are the most stable type of custom domain because www subdomains are not affected by changes to the IP addresses of GitHub's servers.

Custom subdomains

A custom subdomain is a type of subdomain that doesn't use the standard www variant. Custom subdomains are mostly used when you want two distinct sections of your site. For example, you can create a site called blog.example.com and customize that section independently from www.example.com.

Using an apex domain for your GitHub Pages site

An apex domain is a custom domain that does not contain a subdomain, such as example.com. Apex domains are also known as base, bare, naked, root apex, or zone apex domains.
An apex domain is configured with an A, ALIAS, or ANAME record through your DNS provider.

구글 도메인에서 cname 설정

  • blg.igoto.pw 가 igotoo.github.io로 리다이렉트 할 수 있도록 도메인 별명 즉 cname을 설정
image-20210522220538951
  • Github pages  Custom domain 설정
image-20210522220312683
  • DNS 정보 확인
> dig blg.igotoo.pw +nostats +nocomments +nocmd
;blg.igotoo.pw.                 IN      A
blg.igotoo.pw.          0       IN      CNAME   igotoo.github.io.
igotoo.github.io.       0       IN      A       185.199.110.153
igotoo.github.io.       0       IN      A       185.199.108.153
igotoo.github.io.       0       IN      A       185.199.111.153
igotoo.github.io.       0       IN      A       185.199.109.153
dns1.p05.nsone.net.     0       IN      A       198.51.44.5
dns2.p05.nsone.net.     0       IN      A       198.51.45.5
dns3.p05.nsone.net.     0       IN      A       198.51.44.69
dns4.p05.nsone.net.     0       IN      A       198.51.45.69
ns-393.awsdns-49.com.   0       IN      A       205.251.193.137
ns-692.awsdns-22.net.   0       IN      A       205.251.194.180
ns-1339.awsdns-39.org.  0       IN      A       205.251.197.59
ns-1622.awsdns-10.co.uk. 0      IN      A       205.251.198.86
dns1.p05.nsone.net.     0       IN      AAAA    2620:4d:4000:6259:7:5:0:1

git pull

If you use a static site generator to build your site locally and push the generated files to GitHub, pull the commit that added the CNAME file to your local repository.

custom domain 생성시 github에서 자동으로 CNAME 파일을 생성하고 commit을 하므로 로컬 PC에 변경 사항을 적용하기 위해 필요

> git pull
remote: Enumerating objects: 8, done.
remote: Counting objects: 100% (8/8), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 7 (delta 2), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (7/7), 644 bytes | 7.00 KiB/s, done.
From https://github.com/igotoo/igotoo.github.io
   1dd236d..3e6334a  main       -> origin/main
Updating 1dd236d..3e6334a
Fast-forward
 CNAME | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 CNAME
igotoo

igotoo

More posts
Previous Post
Next Post

You might also like...