Git 블로그 복제 및 커스텀 방법 / 깃허브 블로그 만드는 법

2023-11-14

Git 블로그 복제 방법

Public Git 블로그 Clone

마음에 드는 Git 블로그 주인이 허락한다면, Fork 또는 Clone하여 나만의 블로그를 생성할 수 있습니다.

git clone "복사한Git주소"

cmd에서 원하는 경로로 이동 후 위 명령어를 실행하여 Git 블로그 프로젝트를 내려받습니다.

기존 Git 연결 제거

파일 탐색기에서 Git 블로그 프로젝트 폴더로 이동하여 .git 폴더를 삭제합니다.

깃허브 저장소 생성 방법

깃허브 로그인 > Your repositories > New > Repository name 입력 후 Public (무료) 체크 > Create repository
Git 계정명과 저장소명 앞부분을 일치시키면 ‘https://Git계정명.github.io’로 접근할 수 있습니다.
따라서, 프로젝트 폴더명은 ‘Git계정명.github.io’로 구성하는 것이 URL이 깔끔해서 좋습니다.

생성한 Git 저장소에 Push

cmd에서 프로젝트 폴더로 이동하여 아래의 명령어를 순차적으로 실행합니다.

git init
git add .
git commit -m "깃 블로그 초기 구축"
git branch -M main
git remote add origin "복사한Git주소"
git push -u origin main

push 시 에러가 난다면 Windows 자격 증명 관리자에서 ‘git:https://github.com’ 일반 자격 증명 계정을 변경하고 처음부터 다시 시도합니다.

정상 push 메세지 예시

info: please complete authentication in your browser...
Enumerating objects: 481, done.
Counting objects: 100% (481/481), done.
Delta compression using up to 16 threads
Compressing objects: 100% (468/468), done.
Writing objects: 100% (481/481), 34.11 MiB | 557.00 KiB/s, done.
Total 481 (delta 11), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (11/11), done.
To GIT주소
 * [new branch]      main -> main

Git 저장소 삭제 방법
깃허브 로그인 > Your repositories > Git 저장소 선택 > Settings > 하단 Delete this repository 선택
잘못 만든 Git 저장소를 삭제할 수 있습니다.

Git 블로그 커스텀 방법

Git 블로그 주소 변경

_config.yml의 url, repository, name, description, title 등을 내 블로그에 맞게 수정합니다.
특히, url: 또는 repository: 부분을 “Git계정명/저장소명”으로 변경해야 정상적으로 URL 접근이 가능합니다.

블로그 프로필 사진 변경

assets/images 폴더에 작은 이미지를 올리고 _config.yml의 avatar: 부분에서 파일명을 변경해 줍니다.

파비콘 변경

https://www.favicon-generator.org
위 경로에서 Image 파일 선택하여 로컬 이미지로 파비콘을 생성하고 Download the generated로 다운로드합니다.
assets/images/favicon 폴더에 업로드 후 _layout/default.html에서 icon link 요소의 href들을 본인 블로그 주소로 수정해 줍니다.
웹에서 파비콘은 favicon-16x16.png 파일이 우선 적용되는 것을 확인하였습니다.

댓글 위젯 사용 방법

https://github.com/apps/utterances
위 링크에서 Install > Only select repositories > 생성한 Git 저장소 선택 > Install

utterances.html 수정
_includes/comments-providers/utterances.html 파일에서 repo 속성을 아래와 같이 수정합니다.

script.setAttribute('repo', 'Git계정명/저장소명');

Install 후 repo 수정 시 블로그 포스팅에 댓글을 달 수 있게 됩니다.

댓글 테마 변경
https://utteranc.es
하단 테마 변경 > Enable Utterances Copy > _config.yml의 utterances:에서 issue_term, theme 수정

상단 우측 메뉴 변경

_data/navigation.yml의 main: 안에서 아래와 같이 작성하시면 됩니다.

  - title: "메뉴제목1"
    url: /메뉴URL1
  - title: "메뉴제목2"
    url: /메뉴URL2

푸터 변경

_includes/footer.html의 내용을 원하는 형태로 변경합니다.

글 검색 기능 추가

_pages 폴더 안에 search.md 파일 만들고 내용은 아래와 같이 입력합니다.

---
title: Search
layout: search
permalink: /search
---

_data/navigation.yml의 main: 안에는 아래와 같이 추가합니다.

  - title: "Search"
    url: /search

글 날짜 포맷 변경

VSCode에서 프로젝트 폴더를 열고 전체 검색으로 %B %-d, %Y를 찾아서 %F로 모두 바꾸기 합니다.
Date Format %F는 YYYY-MM-DD 형식으로 가장 친숙한 날짜 포맷입니다.

카테고리 추가

_pages/categories 폴더 밑에 category-카테고리명.md 파일을 만들고 아래와 같이 입력합니다.

---
title: "카테고리제목"
layout: category
permalink: /categories/카테고리명
author_profile: true
taxonomy: 카테고리제목(categories 페이지의 카테고리 제목 또는 글 연동에 사용됩니다.)
sidebar:
  nav: "categories"
---

_data/navigation.yml의 categories 부분에 아래의 예시들처럼 카테고리 정보를 추가합니다.

categories:
  - title: "카테고리제목1"
    url: /categories/카테고리명1/
  - title: "카테고리제목2"
    url: /categories/카테고리명2/

categories:
  - title: "1뎁스카테고리제목"
    children:
      - title: "2뎁스카테고리제목1"
        url: /categories/2뎁스카테고리명1/
      - title: "2뎁스카테고리제목2"
        url: /categories/2뎁스카테고리명2/