열심히 만든 웹을 Github Pages를 통해 자랑해보자
이때 사용할 수 있는 간편한 패키지가 있다

1
2
3
4
5
6

npm i -D gh-pages
gh-pages -d dist

# or

npx gh-pages -d dist

gh-pages

• Github Pages 기능을 통해 정적 웹을 호스팅 할 수 있다
• gh-pages라는 패키지를 사용하면 간편하게 배포할 수 있다
• gh-pages를 설치하고 gh-pages -d {빌드 디렉터리} 명령을 하면,
• gh-pages라는 브랜치가 자동으로 생성되고 빌드 디렉터리의 내용이 깃헙 저장소에 올라간다
• github pages 세팅도 자동으로 된다

• package.json이 프로젝트 루트 디렉터리에 존재해야 한다
• 바닐라 웹 프로젝트를 진행한 경우에도 gh-pages를 사용하고 싶다면,
• npm init -y 명령으로 임시로 package.json을 생성하고
• npx로 gh-pages를 실행하면 된다

옵션 사용하기

1

npx gh-pages -d dist -b dist --dotfiles --tag \"🚀update\"

• -d dist dist 디렉터리를
• -b dist 원격 레포의 dist 브랜치에
• --dotfiles 닷 파일을 포함하고,
• --tag \"🚀update\" 태그도 지정해 줄 수 있다

• 더 많은 옵션은 -h로 확인

nextjs 배포하기

1
2

touch .nojekyll
npx gh-pages -t true -d out

• .nojekyll 파일을 생성해 줘야 한다
• gh-pages는 기본적으로 지킬 기반으로 동작한다
• 그러면 _로 시작하는 파일들을 제대로 동작하지 않는다
• 그래서 지킬을 사용하지 않는다는 것을 .nojekyll파일을 생성하여 알릴 수 있다
• gh-pages로 배포할 때 -t true 옵션을 사용하는데,
• .(dot)으로 시작하는 파일을 포함하여 배포하라는 뜻이다
• 옵션을 사용하지 않는 다면 .nojekyll이 제외된다

참고

• https://github.com/tschaub/gh-pages

• 2020.01.04 처음 느린 웹 보고서를 확인하고 그냥 방치 했는데…
• 나날이 늘어가는 느린 URL들…

• jsdelivr 적용 후, 지금까지!

상황

• 구글 서치 콘솔에서 블로그에 대한 보고서를 보는데, 느린 웹 문제가 있었다
• 어떻게 블로그를 빠르게 할 수 있는지 고민해보았다

• https://derek-mun.com/contents/Contents-Github-page-image-loading-speed.html
• 그러다가 이미지에 cdn을 적용하면 속도를 개선할 수 있겠다는 생각을 하였다

내 환경

• hexo 프레임워크로 블로그를 운영하고 있다
• 블로그 글이 점점 많아지고, 글에 많은 이미지를 포함하는 글도 있다

해결 : jsdelivr 적용

• jsdelivr는 npm과 github에서 사용할 수 있는 무료 CDN이다
• 오픈소스 프로젝트를 위한 CDN이라고 한다
• jsdelivr는 아무런 설정 없이 누구나(npm, github 사용자) 사용할 수 있는 게 장점이다

jsdelivr 사용법

https://chinsun9.github.io/images/web-dark-theme20210531/preview.png (원본)
https://cdn.jsdelivr.net/gh/chinsun9/chinsun9.github.io@master/images/web-dark-theme20210531/preview.png (CDN 적용)

• https://cdn.jsdelivr.net/gh/`{username}`/`{reponame}`@{`branch`}/`{filepath}`
• 사용 방법이 엄청나게 간단하다

• 참고 ; 변환도구 ; https://www.jsdelivr.com/github

hexo에서 적용

• 포스트를 작성할 때 cdn을 적용한 url을 적어줘도 상관은 없지만,
• 이미 작성된 글들에 대해 수행해야 하는 불편함이 있다
• hexo 모듈을 살펴보니 node_modules/hexo/lib/plugins/filter/after_post_render/index.js에서 추가적인 작업을 해줄 수 있다는 것을 알게 되었다

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

'use strict';

module.exports = (ctx) => {
  const { filter } = ctx.extend;

  function lazyProcess(htmlContent) {
    let rootUrl =
      'https://cdn.jsdelivr.net/gh/chinsun9/chinsun9.github.io@master';
    return htmlContent.replace(
      /<img(.*?)src="(.*?)"(.*?)>/gi,
      function (str, p1, p2) {
        if (/src="data:image(.*?)/gi.test(str)) {
          return str;
        }
        if (p2.indexOf('http') === 0) {
          return str;
        }
        return str.replace(p2, rootUrl + p2);
      }
    );
  }

  filter.register('after_post_render', require('./external_link'));
  filter.register('after_post_render', require('./excerpt'));
  filter.register('after_post_render', function (data) {
    data.content = lazyProcess.call(this, data.content);
    return data;
  });
};

• 코드 참고 ; https://github.com/zhepama/hexo-generator-cdn/blob/master/lib/process.js
• 생성된 html에서 이미지 태그 문자열을 정규식으로 뽑는다
• rootUrl로 선언한 cdn을 위한 이미지 prefix와 기존 filepath를 결합한다

• node_modules 아래에 있는 파일을 수정한 것이라, 좋은 접근은 아닌 것 같다
• 이런 경우에 어떻게 노드 모듈 외부에서 함수를 오버라이딩할 수 있는지…
• 일단 나는 이렇게 해서 사용하고 있다

경과

• 2021-03-12 이미지에 cdn 적용했다

• 10일 후에 점점 느린 URL이 없어지고 있는 것을 확인할 수 있다

• 지금은 느린 웹이 없다!

주의사항

• 이미지를 수정해도 즉시 반영되지 않는다
• 즉시 반영을 원한다면 이름을 바꿔주자

참고

• https://derek-mun.com/contents/Contents-Github-page-image-loading-speed.html
• https://hexo.io/ko/api/filter.html
• https://github.com/zhepama/hexo-generator-cdn/blob/master/lib/process.js

• 나도 멋진 깃허브 블로그를 만들어보고 싶었다. (지금 이 블로그!)

• Hexo 라는 블로그 프레임워크가 있었다

• 한글로 된 공식 문서도 있어서 접근하기 좋았다

• 나는 카인드패밀리님의 영상을 보고 따라하면서 만들어 보았다

• Hexo를 이용하면 멋진 블로그를 뚝딱하고 만들 수 있다

• 간단하게 설명하자면,

• Hexo에서 원하는 테마를 받아와서 글을 쓰고, 내 github.io 저장소와 연결하고 배포하는 거다

따라하기

• 먼저 nodejs와 git이 설치되어 있어야 한다
• 또, https://chinsun9.github.io/ 와 같은 url을 얻고싶으면 {자기 깃허브 아이디}.github.io이름의 저장소가 있어야한다
• 준비되었다면 cmd를 열고 hexo cli를 전역으로 설치한다
• 나는 vscode에서 터미널을 열어서 진행했다. vscode가 최고다

1

npm i hexo-cli -g

• hexo 프로젝트 생성

• 적당한 빈 디렉터리로 이동한다음에 아래 명령어를 실행한다

• 혹시 다른 테마를 적용하길 원하는 사람은 테마 적용방법을 찾아 보기 바란다. 여기선 icarus를 설명한다

1
2

hexo init
npm i hexo-theme-icarus

• 다음엔 icarus테마를 위한 config를 생성한다

1

hexo config theme icarus

1
2
3
4
5
6
7
8

INFO  Validating config
ERROR {
  err: [Error: EISDIR: illegal operation on a directory, read] {
    errno: -4068,
    code: 'EISDIR',
    syscall: 'read'
  }
} Plugin load failed: %s hexo-theme-icarus

• 위 같은 오류가 나면 무시하고 다시 명령을 실행한다

1

hexo config theme icarus

1
2
3
4
5
6
7

INFO  === Checking package dependencies ===
ERROR Package bulma-stylus is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
ERROR or:
ERROR yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

• 그러면 다른 오류메시지가 나온다
• 이러이러한 패키지가 필요하다하면 추가로 설치해준다

1

npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

• 현재까지 설치된 패키지 목록

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

{
  // ...
  "hexo": {
    "version": "5.2.0"
  },
  "dependencies": {
    "bulma-stylus": "^0.8.0",
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-inferno": "^0.1.3",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-theme-icarus": "^4.0.1"
  }
}

• 종속성이 해결되면 다시 실행

1

hexo config theme icarus

1
2
3
4
5
6
7
8
9

INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
WARN  None of the following configuration files is found:
WARN  - C:\git\tmp blog\_config.icarus.yml
WARN  - C:\git\tmp blog\node_modules\hexo-theme-icarus\_config.yml
INFO  Generating theme configuration file...
INFO  C:\git\tmp blog\_config.icarus.yml created successfully.
INFO  To skip configuration generation, use "--icarus-dont-generate-config".
INFO  === Registering Hexo extensions ===

• 위처럼 메시지가 나오면 성공이다

• 이제 최상위 디렉터리에 _config.yml 이라는 파일이 있는데 아래 처럼 수정한다

• 블로그가 될 저장소 주소를 적어준다

1
2
3
4
5

theme: icarus
deploy:
  type: git
  repo: https://github.com/chinsun9/chinsun9.github.io
  branch: master

• 여기까지 성공적으로 됬다면 로컬에서 확인해 볼 수 있다

1

hexo server -p 3000

• 새 포스트를 써보자

1

hexo new "타이틀"

1
2
3
4

INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Created: C:\git\2020-github-pages-hexo\source\_posts\new-post20200916.md

• 위와같은 메시지가 나오는데 vscode터미널같은 경우 ctrl+click을 통해 바로 저 파일을 열어 볼 수 있다

• 열어서 열심히 md 언어로 포스팅을 하고 저장한다

• 이제 배포를 해보겠다

• hexo-deployer-git을 설치한다

1
2

npm i hexo-deployer-git -g

• 그러면 다음 명령어를 사용할 수 있다

1
2

hexo generate
hexo deploy

• 위처럼 명령어를 두번쓰기 귀찮아서 명령어 하나로 묶어 버렸다
• 하는 김에 hexo 커밋까지..

1
2
3
4
5
6
7
8
9
10
11

{
  // ...
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "test": "hexo server",
    "start": "hexo generate & hexo deploy & git add . & git commit -m "
  }
  // ...
}

• 글을 하나 쓰고 나면 npm start 명령어로 배포하고 커밋한다.
  npm start "커밋메시지"
• 이런식으로 써서 편하게? 관리하려고 했다