본문으로 건너뛰기

"hexo" 태그로 연결된 3개 게시물개의 게시물이 있습니다.

모든 태그 보기

Github Actions로 Hexo 배포 자동화하기

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

개념​

Docker 이미지로 생성된 후에 그 위에서 돌아간다. 자세한 개념은 시간날 때 추가 예정

레파지토리 토큰 발급​

여기를 참조해 레파지토리의 secret 으로 등록한다.

서브모듈​

themes directory 하위의 테마들은 각각의 repo를 가지고 있다. 이 테마들을 CI 중에 가져오기 위해선 서브모듈로 등록해주고 초기화시켜줘야한다.

## 서브모듈 테마 추가
git submodule add 테마깃경로 themes/테마명

## 싱크
git submodule update --init --remote

여기서 remote 옵션을 쓰지 않을 경우 최신 마스터를 pull 하지 않는다. 서브모듈을 쓰는 이유는 내가 관리하지 않기 위함이니 꼭 추가해주자.

소스​

주석 없어도 하나하나가 무슨 느낌인지는 받아들여질 것 같다.

name: Node CI

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node: [20.x]

    steps:
      - uses: actions/checkout@master

      - name: SETUP_NODE_${{ matrix.node }}
        uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}

      - name: BEFORE_INSTALL
        run: npm i -g hexo workbox-cli

      - name: BEFORE_SCRIPT
        run: |
          git config --global user.name 'gracefullight'
          git config --global user.email '[email protected]'
          sed -i "s/__GITHUB_TOKEN__/${{ secrets.HEXO_DEPLOY_TOKEN }}/" _config.yml

      - name: THEME_INSTALL
        run: |
          git submodule update --init --remote --recursive

      - name: NPM_INSTALL
        run: npm install

      - name: HEXO_CLEAN
        run: hexo clean

      - name: HEXO_GENERATE
        run: hexo generate

      - name: WORKBOX_BUILD
        run: workbox injectManifest

      - name: HEXO_DEPLOY
        run: hexo deploy

GITHUB_TOKEN​

secrets.GITHUB_TOKEN 은 예약된 토큰이다. 빌드 이미지에서 현재 repo를 접근하기 위한 토큰임을 알아두자.

결론​

travis-ci 안녕

참조​

hexo jsfiddle tag를 호출하지 못하는 현상

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

공식 문서에 따르면 jsFiddle tag의 사용법은 이렇다.

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

대괄호로 둘러 쌓인 부분은 생략이 가능하다.

shorttag는 URL 창에서 바로 보여질 수도 있지만 그렇지 않을경우 Save 또는 Update 버튼을 누르면 나오는 Embed 메뉴에서 확인할 수 있다. image from hexo

문제점​

https인 github.io에서 http로 jsfiddle을 호출해서 차단된다.

해결​

node_module\hexo\lib\plugins\tag\jsfiddle.js 파일의 jsfiddle 치환 함수를 변경한다.

function jsfiddleTag(args, content) {
  const id = args[0];
  const tabs =
    args[1] && args[1] !== "default" ? args[1] : "js,resources,html,css,result";
  const skin = args[2] && args[2] !== "default" ? args[2] : "light";
  const width = args[3] && args[3] !== "default" ? args[3] : "100%";
  const height = args[4] && args[4] !== "default" ? args[4] : "300";

  // http://jsfiddle.net > //jsfiddle.net
  return (
    '<iframe scrolling="no" width="' +
    width +
    '" height="' +
    height +
    '" src="//jsfiddle.net/' +
    id +
    "/embedded/" +
    tabs +
    "/" +
    skin +
    '" frameborder="0" allowfullscreen></iframe>'
  );
}

hexo image tag의 alt 속성 사용

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

공식 문서에 따르면 image tag 의 사용법은 이렇다.

![image from hexo]([class names] /path/to/image [width] [height] [title text
[alt text]])

대괄호로 둘러 쌓인 부분은 생략이 가능하다.

문제점​

Input​

test.png 에 test_title, test_alt 속성을 추가하고 싶은 경우 아래처럼 사용하면 되어야한다.

![image from hexo](/test.png test_title test_alt)

Output​

하지만 결과는 참담하다.

<img src="/test.png" title="test_title test_alt" />

해결​

Input​

속성을 quotes 와 double quotes 로 두번 감싸줘야한다.

![image from hexo](/test.png "'test_title'" "'test_alt'")

Output​

<img src="/test.png" title="test_title" alt="test_alt" />

여담​

공식 문서에 설명이 업데이트되면 좋겠다. 이미지에 캡션다는 법을 찾다가 결국 내 블로그에는 안 달기로 마음먹었다.