# GitHub Pages 초기 설정

# 1. 서론.
- 블로그는 서비스형과 설치형이 있습니다.  
- 서비스형인 싸이월드 블로그와 네이버 블로그를 이용하면서 내가 작성한 컨텐츠 원본을 내 디스크에 저장하지 못한다는 것이 아쉬워 설치형 워드프레스로 운영했던 적이 있습니다. 내 서버에 내가 생성한 컨텐츠가 저장되니 온전히 내것이었죠.  
- 하지만, 여러 번의 이사, 컴퓨터 교체, 워드프레스 및 플러그인의 잦은 업데이트로 인해 항상 관리해주어야 한다는 부담감과 귀찮음에 운영을 중단했고, 이후 블로그는 아니지만 페이스북에 한동안 빠졌다가 글 작성을 완전히 멈췄습니다.  
- 그래도 개발 관련 사항을 정리해야겠다는 생각은 항상 가지고 있어서 GitHub Pages 서비스 오픈 시기부터 눈여겨 보다가 이제서야 이용하게 되었습니다. 내 Git 저장소에 저장되어 온전히 내것이고, 설치형이 아니라서 관리의 귀찮음도 없는 너무 편리한 서비스입니다.

 

# 2. GitHub Pages.
- 참고: https://pages.github.com

## 2-1. Git 저장소 생성.
- https://github.com 에 가입되었다면 Repositories - New를 선택해 저장소를 생성합니다.
- 저장소 이름: 아이디.github.io
- 공개설정: Public (Private으로 설정하면 GitHub Pages로 사용할 수 없습니다.)

## 2-2. 사이트 생성.
- 터미널을 이용해 Git 명령어로 간단하게 사이트를 만들 수 있습니다.
- 아래 명령어 중 **아이디** 부분을 자신의 GitHub 아이디로 교체해 주세요.
- Git 저장소 복제.
    ```console
    $ git clone https://github.com/아이디/아이디.github.io
    ```
- 테스트 HTML 작성.
    ```console
    $ cd 아이디.github.io
    $ echo "Hello World" > index.html
    ```
- Git 푸시.
    ```console
    $ git add -all
    $ git commit -m "Initial commit"
    $ push -u origin main
    ```
- 이제 웹 브라우저로 https://아이디.github.io 에 접속해 보면 Htllo World가 출력될 것입니다.

 

# 3. Hugo.
- 사이트를 작성하는 방법은 다양하지만, MarkDown으로 작성한 글을 MarkUp으로 변환해 주는 툴들이 인기입니다.
- 저는 https://jamstack.org/generators 에 나열된 다양한 툴 중 Hugo를 선택했습니다.

* 참고: https://gohugo.io/getting-started/quick-start
## 3-1. Hugo 설치.
- 리눅스 사용자라면,
    ```console
    $ snap install hugo
    ```
- 맥 사용자라면,
    ```console
    $ brew install hugo
    ```
    or
    ```console
    $ port install hugo
    ```

## 3-2. 사이트 생성.
- 작업 디렉토리 생성.
    ```console
    $ mkdir hugo-workspace
    $ cd hugo-workspace
    ```
- myblog라는 사이트 생성.
    ```console
    $ hugo new site myblog
    ```

## 3-3. 테마 설치.
### 3-3-1. 테마 다운로드.
- MarkDown 파일을 Git으로 관리하려면,
    ```console
    $ cd myblog
    ```
    - MarkDown으로 작성한 파일을 Git으로 저장/관리하기 위해 Git 초기화.
        ```console
        $ git init
        ```
    - myblog의 submodule로 테마 복제.
        ```console
        $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
        $ git submodule init
        $ git submodule update
        ```
- MarkDown 파일을 관리하지 않고 publish만 이용하려면,
    - 테마 파일을 다운받아 myblog/themes/ 디렉토리 하위에 압축해제.

### 3-3-2. 테마 설정.
- config.toml에 theme = "ananke" 라인 추가.
    ```console
    echo 'theme = "ananke"' >> config.toml
    ```

## 3-4. 페이지 작성.
- posts 라는 카테고리에 first-post 페이지 작성하는 예.
    ```console
    hugo new posts/first-post.md
    ```
- myblog/content/posts/first-post.md 파일이 생성되며, 아래와 같은 기본 내용이 적상됩니다.
    ```console
    ---
    title: "First Post"
    date: 2020-12-15T20:47:11+09:00
    draft: true
    ---

    ```
- 그 아래부터 MarkDown 형식으로 작성하면 됩니다.

## 3-5. 사이트 확인.
- hugo 서버 시작.
    ```console
    $ hugo server -D
    ```
- **http://localhost:1313** 으로 접속하면 적용한 테마와 작성한 페이지가 표시됩니다.
- 히지만, 아직 사이트에 배포된 것이 아니기 때문에 **http://아이디.github.io**에 접속해도 확인할 수 없을 것입니다.

## 3-6. MarkUp으로 변환.
- 작성한 MarkDown 페이지를 MarkUp으로 변환.
    ```console
    $ hugo
    ```
- myblog/public/ 디렉토리에 MarkUp으로 변환된 파일들이 생성됩니다.
- 해당 파일들을 **아이디.github.io** 저장소에 저장하고 웹 브라우저로 http://아이디.github.io에 접속해서 확인하면 됩니다.

## 3-7. public 디렉토리를 Git으로 관리.
- MarkUp으로 변환된 결과물을 매번 직접 **아이디.github.io** 저장소에 복사하는 수고를 덜기 위해 Git submodule로 관리하면 편합니다.
    ```console
    $ git submodule add -b main https://github.com/아이디/아이디.github.io.git public
    ```
- 이후 public 디렉토리는 Git으로 관리되며, commit -> push 후 **http://아이디.github.io**에 접속해 보면 업데이트가 되어 있을 것입니다.