Netlify CMS

블로그 플랫폼에 의존적이지 않고, 개발자st 블로그를 운영하고자 2017년부터 hexo를 이용해 블로그를 운영하고 있습니다.

마크 다운과 파일시스템을 이용하여 블로그 포스트를 작성하고, git을 이용하여 버전 관리를 하는것은 개발자로서 꽤나 매력적이었습니다.

하지만 랩탑을 항상 소지하고 있지 않다면,
다양한 환경에서 블로그를 작성하기 위해 nodejs를 설치하고, hexo-cli 를 설치하는것은 언제나 부담스러운 일입니다.

제 블로그는 Github Actions 를 이용하여 포스팅만 작성하면 자동으로 빌드하여 배포가 되지만,
또 다른 문제점은 포스팅에 이미지가 들어가게 될 경우 작업의 복잡도가 올라가게 됩니다.

위와 같은 이유로 hexo를 온라인에서도 작성할 방법을 고민하고 검색하였고, netlify-cms 라는 서비스를 알게 되어 적용하고자 했습니다.

사실과 오해

작년에 해당 서비스를 처음 접하였을때는 gatsby 블로그를 알아보다가 알게 된 것이라 두가지 오해가 있었습니다.

1. graphQL으로 포스트를 관리한다.
2. netlify로 블로그를 호스팅 할때만 사용이 가능하다.

이번에 작업을 진행하면서 알게된 내용은 틀린 부분들이 있었습니다.

1. graphQL으로 포스트를 관리한다.

   1. git-gateway라는 자체적인 방식을 이용하여 git repository를 저장소로 사용합니다.

2. netlify로 블로그를 호스팅 할때만 사용이 가능하다.

   1. admin에 접근하기 위해서는 netlify를 이용해 호스팅을 해야하는것은 맞지만, 기존에 github pages로 제공하던 블로그와 별개로 다른 환경에 별도의 배포본을 이용하여 사용할 수 있다.
   2. 위와 같은 이유로 저는 기존의 깃허브 블로그(https://blog.hodory.dev)[https://blog.hodory.dev] 와
      netlify-cms를 이용하기 위한 https://hodory-blog.netlify.app/ 를 따로 사용하고 있습니다.

설정방법

기존의 Travis-CI를 이용하여 Hexo 블로그를 배포하기 위해,

ChangJoo Park님의 포스팅인 Travis CI를 이용한 Github Pages + Hexo 블로그 자동 배포하기를 참고하여 아래와 같은 YAML 파일을 작성하여 Travis CI 서비스를 이용해서 배포하였습니다.

기존의 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# .travis.yml
language: node_js
node_js:
  - "10"
# Hexo source 코드는 master branch에서 작업되고 있어야합니다.
branches:
  only:
    - master
before_install:
  - npm install -g hexo
install:
  - npm install
before_script:
  - git config --global user.name "INPUT_YOUR_USER_NAME"
  - git config --global user.email "INPUT_YOUR_EMAIL"
  - sed -i "s/__GITHUB_TOKEN__/${__GITHUB_TOKEN__}/" _config.yml
# 블로그를 빌드 후 배포합니다.
script:
  - hexo clean
  - hexo generate
  - hexo deploy

Github에서 자체적으로 Github Actions라는 기능을 베타로 제공중이여서 신청을 해두었고,

어제 승인되어 repo에 아래 이미지와 같은 탭이 생겼습니다.🎉

해당 기능을 이용해 보기 위해 travis.yml 파일을 Github Actions에 맞게 아래와 같이 바꾸어보았습니다.

변경사항

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

# .github/workflows/hexo-deploy.yml

name: Node CI

on: 
  push:
    branches:
    - master

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Hexo-Cli Install
      run: npm i -g hexo
    - name : Change Environment
      env:
        GITHUB_TOKEN: "INPUT_YOUR_GITHUB_ACCECSS_TOKEN"
      run: |
        git config --global user.name "INPUT_YOUR_USER_NAME"
        git config --global user.email "INPUT_YOUR_EMAIL"
        sed -i "s/__GITHUB_TOKEN__/${GITHUB_TOKEN}/" _config.yml
    - name: NPM Install
      run: npm install
    - name: Hexo Clean
      run: hexo clean
    - name: Hexo Generate
      run: hexo g
    - name: Hexo Deploy
      run: hexo d

Github Actions문서에 따르면 기존의 Secret Config 부분은 repo의 아래의 탭에서 지정이 가능합니다.

해당 Secrets를 사용시에는 사용하려는 step에서 with 키워드를 이용해 설정하거나, env 를 이용해서 아래와 같이 설정 할 수 있습니다.

1
2
3
4
5
6

steps:
- name: Test Set Secret With
	with: ${{ secrets.YOUR_SECRET }}
- name: Test Set Secret Env
	env:
		my_secret : ${{ secrets.YOUR_SECRET }}

사담

Github Actions는 이미 만들어진 환경을 사용 할 수도 있고, Github Repo에 있는 도커 스크립트를 이용할 수도 있는것으로 보입니다.

1
2
3
4
5
6

steps:    
  - uses: actions/setup-node@74bc508  # 특정 커밋을 지정
  - uses: actions/setup-node@v1.0     # 특정 릴리즈 버전 지정
  - uses: actions/setup-node@master   # 브랜치 지정
  - uses: docker://alpine:3.8         # Docker Hub에서 제공하는 이미지와 태그 지정
  - uses: ./.github/actions/my-action # 해당 repo 안에 정의된 파일 지정

또한, if 제어문도 사용이 가능하고, 쉘을 선택하여 처리한다거나 Cron-Job등이 사용가능하고

jobs.<job_id>.strategy.matrix를 활용하여 os와 실행환경(ex. node | php) 버전을 조합하여 빌드 테스트가 가능하다고 합니다.

1
2
3
4
5
6
7
8
9

runs-on: ${{ matrix.os }}
strategy:
  matrix:
    node: [6, 8, 10]
    os: [ubuntu-16.04, ubuntu-18.04]
steps:
- uses: actions/setup-node@v1
  with:
    node-version: ${{ matrix.node }}

이와 같이 정의할 경우에는 3개의 노드버전과 2개의 os 버전을 조합하여 6가지의 job이 실행됩니다.

이외에도 다양한 기능을 제공하여 깃허브를 이용하고 있다면 한번쯤은 이용해봐도 좋을 서비스라고 생각합니다.

이번에도 Gracefullight님의 제안으로, dev 도메인을 구매하기로 하였습니다.

기존의 아이디를 사용하여 khzero.dev를 쓸까 하다가,

이왕 구매하는거 깃허브 아이디도 바꾸고, 도메인도 맞춰서 사자!

라고 생각을 했었습니다…그때 멈췄어야 했는데요…

WARN No layout 자동 배포를 했더니 빈 파일들만 올라가요!!

한줄 요약 : theme 폴더를 레포지토리에 추가하시면됩니다.

아래의 내용은 해당 원인을 찾아가던 본인의 경험담입니다…

블로그를 직접 만드는데, 시간을 투자하는것 보다 포스팅을 하는게 더 가치 있겠다 싶어

현재 블로그를 Hexo + Github Page를 이용하여 운영하고 있습니다

기존에는 배포를 Hexo-cli를 이용하여 아래와 같은 명령어를 사용하여 배포 했습니다.

1
2
3

$ hexo clean
$ hexo generate
$ hexo deploy

쉘에서 해당 명령어를 작성하는것 또한 귀찮아져서 package.json 파일을 이용하여,

1
2
3
4
5
6
7
8

/*
 * package.json
 */
{
    "scripts": {
        "deploy": "hexo clean && hexo d -g"
    }
}

해당 스크립트를 작성해서 npm deploy명령어로 배포를 하고, 소스는 별도의 레포지토리에 관리하고 있었습니다.

Hexo 명령어 정리

# 초안 생성

명령어

1

$ hexo new draft [파일명]

예제

1

$ hexo new draft hello-world