Github 정적 웹사이트(블로그) 만들기 (edior + github page)

1. 토스트 에디터로 뷰어 만들기 with codepen

- vanilla js를 이용하지 않고, toast ui edior의 viewer를 사용해 마크다운 문법 적용(개발자 친화적)

- Toast ui editor viewer는 에디터를 로딩하지 않고 마크다운 콘텐츠를 보여줄 수 있도록 뷰어를 제공한다.

toast ui editor kor verson document : https://github.com/nhn/tui.editor/blob/master/docs/ko/getting-started.md )

( .. viewer : https://github.com/nhn/tui.editor/blob/master/docs/ko/viewer.md )

컨테이너 요소 추가

...
<body>
  <div id="viewer"></div>
</body>
...

브라우저 환경에서의 namespace 사용

const Viewer = toastui.Editor;

CDN에서 뷰어는 다음처럼 사용된다.

...
<body>
  ...
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.js"></script>
</body>
...

CSS - CDN환경

...
<head>
  ...
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.min.css" />
</head>
...

인스턴스 생성하기

옵션과 함께 인스턴스를 생성하여 다양한 API를 호출할 수 있다.

const viewer = new Viewer({
  el: document.querySelector('#viewer'),
  // height: '600px',
  initialValue: '# hello'
});

선택사항

template 엘리먼트를 사용하여 마크다운 소스코드 편하게 작성하기

<templates>
...
...
</templates>

Syntax highlights plugin

<!-- 신택스 하이라이터 플러그인 라이브러리 시작 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.css">
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<!-- 신택스 하이라이터 플러그인 라이브러리 끝 -->

<!-- 
const editor = new toastui.Editor({
...
plugins: [
[toastui.Editor.plugin.codeSyntaxHighlight, {highlighter:Prism}],
]
...
});
-->

Katex Plugin 직접 구현하여 사용 (수학 수식)

<!-- katex 플러그인 라이브러리 시작 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.css">
<!-- katex 플러그인 라이브러리 끝 -->

$$katex
x^2 + y^2 = 1
$$

UML 만들기 (https://plantuml.com/ko/)

눈누 - 지마켓 산스 ( https://noonnu.cc/font_page/366 ) 폰트 적용하기

/* 폰트 로딩 */
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 이미 토스트ui관련해서 폰트가 지정되어 있어서, 아래처럼 선택자를 길게 써야, 우리가 원하는 폰트가 적용된다. */
html > body, /* body 와 */
html > body .toastui-editor-contents { /* body 하위에 있는 .toastui-editor-contents 에 */
  font-family: "GmarketSansMedium"; /* 폰트변경 */
}

2. Repository 생성 후 Github page::Settings를 통해 정적 웹사이트 만들기

1. Repository 생성

2. github pages -> Branch::main::save

3. your site is live at `http://[깃허브닉네임].github.io/레포지토리이름' 접속

4. 웹사이트 생성 !

5. 편집을 원하는 경우

edit page : github.dev/[깃허브닉네임]/레포지토리이름

commit & push

1. 토스트 에디터로 뷰어 만들기 with codepen

2. Repository 생성 후 Github page::Settings를 통해 정적 웹사이트 만들기

티스토리툴바