게시 됨 업데이트 됨Etc

기술 블로그 만들기 - Github-pages, Hexo

1. 노션을 사용하는 것에 대한 불편함

(1) 노션의 단점

  • 읽기 어려운 URL + 제목을 수정하면 같이 변경되는 URL

    → 해보니 Hexo도 비슷한 이슈가 있음. 하지만 노션이 공유하기 어려운 것도 사실임.. 블로그로서 만들기가 어려움.

  • 페이지 로딩이 느림

    → Hexo는 기본적으로 정적사이트를 생성해주기 때문에 이 부분은 해결이 됨.

    정적 웹사이트란, 서버에서 배포하기 전까지는 이미 올려진 데이터만을 보여주기 때문에 페이지 내에서 글 수정이 불가능하며 그렇기 때문에 가볍다는 장점이 있다. 페이지를 로드한 후에는 서버와 통신할 필요가 없으니까.

덧붙여,

(2) 대체 플랫폼

  • Notion + Cloudflare

  • Tistory

  • Velog

  • Github-pages

    → 내가 지금까지 해본 건 Tistory/Notion(오직 노션)/Github(레포지토리를 DB 삼아 md 파일 만듦. 사이트를 따로 생성하지 않음.)/Jekyll(페이지 껍데기만 만듦)/OneNote/EverNote 였다.

    그 중 고유한 Url을 생성할 수 있고 디자인을 코드단으로 만질 수 있는 Jekyll이 제일 재밌었는데 그래서 Github-pages를 사용하기로 함.

    단, Jekyll은 제외하고.(왠지 한 번 만들고 실패해서 손이 안 감.)

(3) Github-pages 적용에 필요한 것

  • 정적 사이트 생성기(Static Site Generator): Jekyll(ruby), Hugo(Go), Hexo(Node.js), Gatsby 등
    • 정적 웹 사이트 생성기: DB 통신 등을 해서 서버에서 HTML 페이지를 실시간으로 만들던 동적 사이트 방식이 아닌, 완성된 HTML 파일을 바로 전달.

고민은 길지 않았다. 서버 문외한인 내가 가장 많이 들어본 Node.js 기반 Hexo를 사용하기로 결정했다.

(4) Hexo 적용 후 불편했던 점

하는 김에 hexo를 이용하면서 불편했던 점도 적어봄. 위에 나열된 노션의 단점은 모두 커버되었으나 일부 사용하기 어려운 점이 있었다.

  • 페이지를 업데이트하려면 코드를 수정해서 배포해야하기 때문에 바로 수정된 걸 볼 수 없다.(hexo에서 제공하는 draft 기능을 사용하는 데에도 동일한 문제있음)

    → 노션의 이용을 병행하여 draft(초안)은 노션에 작성하기로 함. (일단 나는 편해짐.)

  • 여러 PC에서 배포를 할 수 있는 수월한 방법을 찾지 못함.

    • 방법(링크)은 찾았는데 기존 .deploy_git을 다른 PC에 동기화해줘야(동일하게 옮겨줘야) 하는 번거로움때문에 시도 안 하는 중..
    • Github에 올린 코드를 받아서 hexo-cli만 설치하여 올리려고 보니 hexo server 명령어가 기능을 잘 안 하고(기존 작업하던 PC OS는 윈도우, 새로 시도한 PC는 맥), 커밋 안 한 다른 PC에서 수정하던 게 마음에 걸려서 골치아파지더라.

  • 목차 생성 시 h1 아래에 h2가 아닌 h3으로 하위헤더를 바로 생성할 경우, 아래 이미지와 같이 일부가 생략된다.

(5) 노션의 장점

노션의 이용을 병행하려고 보니 장점을 빼놓을 수가 없다.

  • 접근성이 좋다. 웹, 앱 어디서든 편집할 수 있다.

  • 동기화가 잘 된다. 엄청 잘 된다! 처음 노션을 고른 이유가 동기화였다.

  • 편리한 단축키. ctrl + x로 한 행을 삭제하거나 슬래시(/)로 페이지를 만들 수 있게 하거나 여러가지로 잘 사용중.

  • 편집이 편하고 예쁘다! (잘 쓰진 않지만 수정된 내용은 히스토리로 남아서 혹시모를 상황에 대비가 가능하다.)

    • 드래그앤드랍으로 행 옮기거나 블록처리 가능한 점.
    • 어디서든 특정 부분을 하이라이트 하기 좋음. md는 코드 내에서는 볼드체가 불가능하거나 불편한 점이 있음. 이것도 따로 방법을 찾아봐야 할듯.
    • 폰트가 읽기 좋음. md는 바꾸기 귀찮아서 디폴트로 사용중인데 영어는 거의 잘 나오는데 PC에서 한국어가 픽셀 깨지듯이(예민) 나옴.
    • 헤더를 만들었을 때 딱 읽기 좋은 형태로(상하단 여백, 텍스트 강조) 노출됨. md는 가끔 h1 쓰는데도 읽으면서 가독성 떨어져서 일일이 bold 넣어줘야함.

2. Hexo 환경설정

(1) node.js 및 npm 버전 확인

내 경우 React.js 시작하기 에서 node.js와 npm이 설치된 상태여서 Hexo에 필요한 버전만 확인했다.

  • Mac에서 node.js 및 npm설치 homebrew는 Mac에서 패키지 관리를 용이하게 하기 위한 툴이다. 이걸 먼저 설치. 
    1
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    그리고 node.js를 설치하면 npm도 함께 설치되기 때문에 아래 명령어로 node.js를 설치. 
    1
    brew install node
1
2
3
4
> node -v
v14.15.5
> npm -v
6.14.11

Hexo를 사용하기 위해서는 node.js는 v12이상을 권하고 있다.(최소 v10.13)

(2) Hexo 설치

1
> npm install -g hexo-cli

(3) Hexo 초기화

1
> hexo init testBlog

위 명령어로 초기화하면 아래와 같은 파일구조로 기본 설정파일들이 생성된다.

(4) 파일구조

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml: 환경설정(사이트 설정;웹사이트 제목, URL 설정, include 설정 등 가능)
  • package.json: 데이터 파일. EJS, Stylus, Markdown 렌더러들은 기본으로 설치됨.
  • scaffolds: 새 포스트/페이지를 생성했을 때 기본으로 만들어질 레이아웃을 정의.

(5) 명령어

  • 서버 실행: hexo s (server)
  • 정적파일 생성: hexo g (generate, public/이 생성된다.)
  • 배포: hexo d (deploy)
  • 생성 및 배포: hexo d -g (hexo deploy -generate)
  • 클린: hexo clean (public/이 삭제된다.)

커맨드라인에서 hexo clean을 하게되면 마지막 INFO에 아래와 같이 뜨는 것을 볼 수 있다. 즉, DB와 public 폴더가 초기화된다.

1
2
3
INFO  === Registering Hexo extensions ===
INFO  Deleted database.
INFO  Deleted public folder.

3. 커스텀

(1) 사이드바

_config.icarus.yml 편집

4. 포스팅 - 이카루스 테마(icarus theme) 사용

(1) 새 포스트 생성

흔히 알고 있는 하나의 포스팅을 쓸 때 사용한다.

1
hexo new post "title"

(2) 이미지 폴더 생성

주의
1. 파일명은 대소구분을 한다. “png”와 “PNG”는 다르다.
2. 아래 방법으로 하게되면 hexo clean 명령어 사용 시 public/아래의 파일은 날아가므로 여기에 파일을 넣지 않도록 할 것.

  1. _config.yml에서 post_asset_folder 속성을 true로 바꾼다.

  2. 포스트 생성 시(hexo new post) 포스트의 제목과 같은 폴더가 자동으로 생성될텐데 여기에 이미지 파일을 넣는다.

  3. 이렇게 되면 ![](/2022/02/04/006-create-personal-blog-with-githubpages-and-hexo/006-02.png)와 같이 접근할 수 있다.
    내 경우 _config.yml에서 permalink를 “:year/:month/:day/:title/“로 해두어 저렇게 나온다.

주의
![](./image01.png)처럼 상대경로를 사용하게되면 포스팅을 클릭하여 나타난 페이지에서는 정상적으로 이미지가 노출되나 사이드메뉴의 카테고리 중 하나를 클릭했을 때 페이지에서 상대경로가 맞지 않아 이미지가 깨지게 된다.

(3) 새 페이지 생성

페이지는 생성할 경우 해당 페이지명으로 된 폴더와 하위에 index.html 파일이 생성되며 포스트와 다르게 상단 탭에 연결할 수 있는 것으로 보임. 따라서 category와 tag는 사용할 수 없고 about처럼 상단에 추가할 수 있다.

1
hexo new page "page"

(4) Scaffolds(머리말) 속성

  • title 대괄호가 잘 안 들어가서 이스케이프문자를 넣어야하나했는데 그냥 큰따옴표로 묶어서 해결해버림.
  • date 내가 지정해주지 않아도 자동으로 DB에 발행일이 들어가는가 보더라. 딱히 그럴 일이 없어서 이게 수정이 되는지는 확인 안해봄.
  • categories, tags categories, tags는 여러개 지정할 수 있는데, 다음과 같이 두 가지 방법이 있다. 
    1
    2
    3
    4
    categories:
      - ctg1
      - ctg2
    tags: [tag1, tag2]

(5) toc 띄우기

이카루스 default 테마에서는 toc 속성이 false로 되어있는지 처음에는 나타나지 않으나 아래와 같이 true로 명시해주면 바로 [카탈로그]라고 뜬다. 사이드에 위치하는데 position 옵션에서 left/right를 지정할 수 있다.

창의 너비가 작아지면 우선적으로 보이는게 left라서 나는 left로 해두고 left sidebar의 sticky 옵션을 true로 바꾸었다.

1
2
3
4
5
6
7
8
toc: true
widgets:
	-
	position: left
	type: toc
	index: true
	collapsed: true
	depth: 3

(6) 로컬 테스트

http://localhost:4000/에서 확인한다.

로컬 테스트는 배포 전 로컬의 파일 변경만으로 확인할 수 있는데, 아래 케이스에 해당한다.

  • configuration이 변경된 경우
    • 서버를 내렸다가(ctrl + C) 다시 올려야(hexo s) 적용이 된다.

로컬에서 테스트가 끝나면 아래 명령어로 배포 후 1-2분 후 적용되었는지 https://dl137584.github.io/에서 확인할 수 있다.

1
hexo d -g

(7) about 페이지 생성

1
hexo new page about

(public에 about 폴더를 만들고 별짓을 다했는데 그냥 new page하면 되는 거였어..)

page 명이 “about”인 이유는 _config.icarus.yml에서 navbar:menu:About에 설정한 이름을 따라간 것.

1
2
3
4
5
6
7
8
9
# Page top navigation bar configurations
navbar:
    # Navigation menu items
    menu:
        Home: /
        Archives: /archives
        # Categories: /categories
        # Tags: /tags
        About: /about

(8) 초안 작성

1
hexo new draft title

이렇게 생성된 포스트는 _posts/가 아닌 _draft/에 위치하게 된다. 작성은 했는데 바로 배포하고 싶을 때 md 파일을 _draft 폴더로 옮기면 배포해도 포스팅이 노출되지 않기 때문에 편하게 쓸 수 있다.

만약 테스트 시 draft 파일도 보이도록 하고자한다면 서버를 올릴 때 –draft 옵션을 붙여주면 된다.

1
hexo server --draft

5. 마크다운 활용

노션의 callout(설명) 구현

인용과 차이를 두면서 노션의 callout UI와 같이 일부영역 강조를 편하게 사용하고 싶어서 마크다운의 테이블 구조를 활용하여 아래와 같이 만들었다. 인용 외에 참고사항 등에 사용할 예정이다.

Title
Contents1
Contents2

좌우 여백은 위의 경우 제법 넓게 나타나는 편인데, 가운데 영역(Title, Content1, Content2)의 총 너비가 짧아서 그렇다. Title이나 Content의 길이가 길어질 경우 여기에서 사용한 것처럼 여백이 줄어들게 된다.

마크다운 코드는 아래와 같이 사용하였다.

1
2
3
4
5
　 | Title | 　
--- | --- | ---
 | Contents1 | 
 | Contents2 | 
 |  |

기술 블로그 만들기 - Github-pages, Hexo

https://dl137584.github.io/2022/02/04/006-create-personal-blog-with-githubpages-and-hexo/

Author

LEEJS

Posted on

2022-02-04

Updated on

2022-02-19

Licensed under

댓글

카테고리

광고

×