Github Blog(깃 블로그)란?
Github 저장소에 저장된 html 파일과 같은 정적 웹 문서들을 GitHub에서 무료로 웹에서 볼 수 있도록 호스팅을 제공해 주는 서비스가 존재합니다. 바로 Github Page입니다. 이 Github Page를 이용하여 Blog를 만든것이 Github Blog(깃블로그)입니다. 그렇기 때문에 Github을 이용하는 사용자들은 누구나 고유의 정적 웹 사이트 가질 수 있습니다.
Github page 생성
github 가입이 되어 있지 않다면 Github 먼저 가입해주세요!
1. 깃허브 접속
본인의 Github계정(https://github.com/{username})으로 접속 후 New 버튼을 클릭합니다.
2. 레포지터리 생성
repository name을 아래와 같이 작성 하고( {username}.github.io ) Create repository 버튼을 클릭합니다.
3. 사이트 생성 확인
생성한 repository로 이동 한 후 setting > pages 에서 아래 그림과 같이 정상적으로 나의 사이트가 생성 되었다면 https://{username}.github.io/URL 로 접근 가능합니다.
Repository Clone
Download
- Github Desktop : https://desktop.github.com
- VSCode : https://code.visualstudio.com
Github Desktop
Windows 에서도 Git 소스를 GUI로 편리하게 관리할 수 있는 Tool 입니다.
VSCode
Visual Studio Code의 약자로 Microsoft에서 오픈소스로 개발한 소스 코드 에디터입니다.
Github Desktop과 VSCode 설치 완료 후 Github Desktop을 통해 Github Repository를 로컬에 Clone 해보겠습니다!
1. Github Desktop 실행
Github Desktop에서 로그인 후 이전 단계에서 생성한 “{username}.github.io”를 선택 하고 Clone 버튼을 클릭 합니다.
2. 레포지터리 Clone
Local path에 Clone 하고자 하는 경로를 선택후 Clone 버튼을 클릭하면 해당 Github Repository가 연동됩니다.
3. VSCode Open
아래 그림과 같이 Open in Visual Studio Code 버튼을 클릭하면 VScode가 실행되어 코드작성을 할 수 있습니다.
Ruby 설치 및 Jekyll 테마 적용
Download
- jekyll : http://jekyllthemes.org/
- Ruby : https://rubyinstaller.org/downloads/
사용 테마
- jekyll-theme-chirpy : http://jekyllthemes.org/themes/jekyll-theme-chirpy
1. Ruby 다운로드
위 Ruby 링크에서 Ruby를 다운로드 받아주세요.
2. Jeklly 실행
좌측 하단 윈도우 검색창에 ruby를 입력하여 Start Command Prompt with Ruby를 실행 후 아래 명령어를 차례대로 실행합니다.
아래는 저의 경로입니다. 이전 단계에서 Clone한 경로로 이동하세요.
cd C:\blog\08genie.github.io
만약 ruby 버전이 3.0 이상이라면 webrick을 설치해줍니다.
gem install webrick
ruby에 jekyll 을 설치해줍니다.
gem install jekyll bundler
jekyll 생성해줍니다. 만약 아래 코드 실행 시 {Clone폴더} is not empty 에러가 뜬다면 해당 폴더에서 .git 폴더를 제외한 모든 파일을 삭제 후 다시 실행해주세요.
jekyll new ./
서로 참조관계가 있는 파일을 묶어줍니다.
bundle install
만약 ruby 버전이 3.0 이상이라면 아래 코드를 실행해주세요. ruby 3.0 version 부터는 gem에 webrick이 포함되지 않는다고 합니다.
bundle add webrick
jekyll 서버를 작동시킵니다.
jekyll serve
모두 실행 완료 되었다면 http://127.0.0.1:4000 으로 접속 가능합니다.
3. 테마 다운로드
jekyll template 사이트에서 마음에 드는 테마를 고른 후 Download 버튼을 클릭하여 다운로드 하거나 Homepage 버튼 클릭후 Github를 통해 다운로드 합니다. 그 후 이전 단계에서 Clone 한 경로에 모두 붙여넣기(덮어씌우기) 합니다.
GitHub에 반영
1. Chirpy 테마 초기화
Chirpy 테마를 초기화 시켜주기 위해 아래 파일들을 삭제합니다.
- Gemfile.lock
- index.markdown
- .travis.tml
- _posts.docs(참고할만한 것은 나중에 지워도 됩니다.)
- .github 폴더에서 workflows 폴더를 제외한 나머지 파일을 전부 지웁니다.
- workflows에서 commitlint.yml과 page-deploy.yml.hook을 제외한 나머지 파일을 전부 지웁니다.
- page-deploy.hook파일의 .hook을 지웁니다.
2. config.yml 설정
Clone 폴더에 config.yml을 실행하고 url에 Github pages 주소를 넣어줍니다.
3. pages-deploy.yml 설정
Clone 폴더에 .github/workflows/pages-deploy.yml 파일을 열고 branches를 main으로 변경해주고 ruby-version도 저는 3.1이기 때문에 3.1로 변경해줍니니다.
4. bundler 실행
다시 Start Command Prompt with Ruby을 실행해 bundler를 실행합니다.
bundle install
5. Github Push
이제 Github에 변경사항을 반영해보겠습니다. Github Desktop을 실행하면 왼쪽 Changes바에 변경된 파일의 목록이 뜨고 아래 부분에 commit 메지시를 입력하면 commit to main 버튼이 활성화 됩니다. 버튼 클릭 후 오른쪽 위 Push origin 버튼 클릭까지 완료해야 나의 github reporitory에서 확인 가능합니다.
6. Branch 변경
본인의 Github계정(https://github.com/{username})에 접속하여 위 Step 1-3 과 같은 경로에서 Branch를 gh-pages(jekyll 테마를 Github에 Commit 하면 생성됨)로 변경해 주세요.
마지막으로 Github Page 주소인 https://{username}.github.io 에 변경 사항이 적용 되었다면 끝 😊
