Hexo blog markdown 수식 표현 mathjax

분명 MarkDown math tutorial대로 수식을 작성하고 Ipython notebook에서도 정상적으로 출력되는걸 확인했지만,
Hexo post는 아래처럼 읽어내지를 못한다.
으아악 아니야!

Hexo plugin 설치

다른 블로그 모듈을 사용하는 방법도 있지만, Hexo를 설치했으니 그대로 사용하기 위해 우선 구글링으로 해결해본다.
검색 결과 hexo에서 사용하는 랜더링 모듈에 수식표현 문법이 포함되어 있지 않아서 발생하는 문제였다.

기본 renderer 교체

Hexo의 기본 renderer인 marked를 제거하고 mathjax를 지원하는 kramed로 교체한다.

1
2
$ npm uninstall hexo-renderer-marked --save
$ npm install hexo-renderer-kramed --save

설치가 완료되면 ..\node_modules\hexo-renderer-kramed\lib\renderer.js에서 formatText 함수의 반환값을 변경해준다.

1
2
3
4
5
6
// Change inline math rule
function formatText(text) {
// Fit kramed's rule: $$ + \1 + $$
return text;
// return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$'); // (: default)
}

mathjax 설치

kramed 랜더러에 설정값을 넣어줄 mathjax 랜더러를 설치한다.

1
$ npm install hexo-renderer-mathjax --save

마찬가지로 ..\node_modules\hexo-renderer-mathjax\mathjax.html에서 스크립트 source url을 교체한다.

1
2
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<!-- <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> --> <!--: default -->

Mathjax 활성

이제 사용하고 있는 _config.theme.yml에서 mathjax를 활성화 시켜주면된다.

1
2
3
mathjax:
enable: true
# mathjax: false # : default

markdown 문법을 사용할 예정이라 문법 추가 설정은 하지 않는다.

예제

오…

외부링크

Hexo 테마변경(Feat. icarus)

Hexo 블로그 만들기

테마 선택

hexo themes에서 다양한 오픈소스 테마를 얻을 수 있다.

icarus 시작하기

icarus에서 지원하는 여러 테마중에 바닐라 Icarus로 설정할 예정이다.

테마를 설치하면서 Error 메세지를 보고 해당하는 hexo 랜더러 플러그인을 npm으로 설치해줘도 문제없지만,
에러 메세지에 알러지가 있다면

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

위 명령어로 우선 CSS 프레임워크 bulma-stylusinferno 랜더러 플러그인을 받아오자.

icarus 테마 페이지에서 install via NPM 탭 명령어로 icarus 테마 기본설정을 설치한다

1
$ npm install -S hexo-theme-icarus

이카루스 테마를 설치했으면 _config.ymlExtensions 영역의 theme 값을 변경해준다.

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: icarus

hexo s로 local에서 적용을 확인하고 hexo g -d로 적용, 배포를 진행하면된다.

추가링크

github 블로그 만들기(Hexo)

Hexo 설치

Node.js 설치

터미널로 hexo 언어를 설치하기 위해 툴을 받아올 nodejs를 설치한다.
이 때, 버그 활발히 픽스가 진행중인 신버전보다 구버전 넘버를 권장한다.

Node.js: https://nodejs.org/en/

node를 설치할 때 path 설정(시스템 환경 변수)은 필수로 체크하며, 프로그램의 각종 오류를 c/c++로 해결하는 패치를 배포하기 때문에 chocolatey; c/c++ 환경 변수 설정도 체크하는걸 권장한다.
(chocolatey 설정이 좀 오래 걸리더라)

node가 정상적으로 동작하는걸 확인하기 위해 다음 명령를 터미널에 입력해 설치된 node.js의 버전을 확인할 수 있다.

1
$ node -v

#

각종 노드 명령어 확인은 다음 명령어로 확인할 수 있다.

1
$ npm

#

노드의 동작을 확인했으면 node.js 명령어를 이용해 원래 목적이었던 Hexo 언어를 설치한다

1
$ npm install -g hexo-cli

hexo 툴을 이용해 블로그 관리 툴을 불러와서 임의의 디렉토리명으로 저장한다.
1
$ hexo init 디렉토리명(myblog)

(hexo툴로 불러온 디렉토리명은 myblog로 통일해서 부르겠다)

myblog 디렉토리로 진입하거나 Pycharm 등의 편집 프로그램을 통해 진입한 뒤 git bash에 다음 명령어를 입력한다.

1
2
3
$ npm install
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save

서버 생성과 배포를 위한 툴이 설치되었으니 서버 작동의 확인을 위해
1
$ hexo server

를 입력한 뒤 나오는 http 로컬 주소로 진입한다.
myblog를 github에 백업하려면 myblog repository를 생성하여 백업을 진행한다.

Hexo 블로그 배포하기

로컬 주소가 정상 작동되는게 확인됐으면 블로그를 온라인으로 배포해야하는데, 이 역할을 github에 특정 repository를 생성하여 진행한다.
repository 명은 [유저아이디.github.io]으로 생성한다.

github.io repository를 만들었으면 해당 repository에 블로그 형식을 저장하고 배포 주소를 설정해야한다.
_config.yml 파일에 진입해서 URL 정보와 깃허브 연동 주소를 설정한다.

1
2
#URL
url: https://유저아이디.github.io

1
2
3
4
5
# Deployment
deploy:
type: git
repo: https://github.com/유저아이디/유저아이디.github.io.git
branch: main

변경된 항목대로 서버를 생성하기 위해
1
$ hexo generate

를 입력하고
1
$ hexo server

로 정상 적용되었는지 로컬에서 확인한다.
정상적으로 적용되었다면 사이트 배포를 위해
1
$ hexo deploy

명령어를 사용해 사이트를 배포한다.
사이트 주소는 위 #URL에서 입력한 [https://유저아이디.github.io]와 동일하다.

외부링크