본문으로 건너뛰기

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

모든 태그 보기

· 약 2분

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 안녕

참조

· 약 2분

공식 문서에 따르면 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) {
var id = args[0];
var tabs =
args[1] && args[1] !== "default" ? args[1] : "js,resources,html,css,result";
var skin = args[2] && args[2] !== "default" ? args[2] : "light";
var width = args[3] && args[3] !== "default" ? args[3] : "100%";
var 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>'
);
}

· 약 1분

공식 문서에 따르면 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" />

여담

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