Hugo Content Management [4] - Shortcodes

Shortcode Hugo는 다양한 shortcode 플러그인들을 제공하고 있다. markdown이 제공하는 편리한 문법들로도 충분하지만, code snippet이나 유튜브 영상등을 추가할 때 유용하게 사용할 수 있다. Shotcode 사용하기 shortcode는 { {< shortcodename parameters >} } 의 용법으로 간단하게 사용할 수 있다. shortcodename : 사용할 shortcode의 이름 (ex. highlight, figure..) parameter : 사용할 shortcode가 어떻게 정의되었느냐에 따라 달라짐 Built-in Shortcodes figure figure는 마크다운이 제공하는 이미지관련 문법보다 더 다양한 기능을 제공한다. parameter를 통해 첨부할 이미지의 title, caption, link등을 지정할 수 있다....

December 30, 2019 · 1 min · 129 words · ralpioxxcs

Hugo Content Management [3] - Front Matter

Front Matter? front matter란 작성하고자 하는 컨텐츠(파일)의 제목, 날짜, 작성자 등의 기본적인 속성들을 나타내는 meta-data 형식이다. Formats Hugo는 다음 3가지의 마크업 언어를 지원한다. TOML : +++ YAML : --- JSON : {, } 을 이용해 front matter의 시작과 끝을 지정한다. 예를들어, a.md라는 새로운 파일을 만들었다면 --- title: "this is title!" date: 2019-12-27T13:39:03+09:00 draft: true --- this is the markdown file 이렇게 파일의 시작 부분에 front matter를 설정해주면, 위처럼 front matter에 설정한대로, title과 date가 입력이된것을 볼수있다....

December 30, 2019 · 1 min · 123 words · ralpioxxcs

Hugo Content Management [2] - Page Bundle

Hugo에서는 Page Bundles이라는 개념을 사용해 컨텐츠를 관리한다. Page Bundles에는 2가지 종류가 있다. Leaf Bundle Branch Bundle Left Bundle left bundle은 단독 페이지를 구성하는데 사용되고, index.md 파일을 포함하는 폴더로 구성된다. 3 of Leaf Bundle Example content/ ├── project │ ├── index.md ├── posts │ ├── my-post │ │ ├── content1.md │ │ ├── content2.md │ | ├── image1.png │ | └── index.md │ └── study │ ├── first.md │ └── second.md │ └── index....

December 30, 2019 · 2 min · 254 words · ralpioxxcs

Hugo Content Management [1] - Contents Path

Hugo가 어떻게 각각에 컨텐츠에 접근하고, 폴더를 조직화하여 블로그를 구성하는지 알아보자. 컨텐츠 구성 (root) └── content └── project | └── index.md // <- https://example.com/project/ ├── posts | ├── firstpost.md // <- https://example.com/posts/firstpost/ | └── secondpost.md // <- https://example.com/posts/secondpost/ └── study ├── first.md // <- https://example.com/study/first/ └── second.md // <- https://example.com/study/second/ 위 처럼 각각 project, posts, study 총 3개의 카테고리가 있다고 가정할 때, Hugo는 section, slug, path, url의 변수들을 이용해 컨텐츠를 관리한다....

December 30, 2019 · 1 min · 199 words · ralpioxxcs

Getting Started Hugo [4] - 레포지토리 연동 및 웹 호스팅

나만의 블로그를 구축하는데 성공하였다. 이제 로컬에 저장돼있는 hugo 사이트를 github repository와 연동하여 실제로 주소를 갖는 블로그를 만들어보자. Step 1. github repository 생성 github에 로그인하여 총 2개의 repository를 생성한다. blog 폴더 자체를 저장할 repository hugo로 빌드된 결과파일들을 저장할 repository 두번째 repository의 이름은 [github계정명].github.io의 형식으로 만들어야 한다. remote repository 연동 c://hugo/blog 경로에서 $ git init .으로 로컬 repository를 생성한다. $ git remote add origin [첫번째 repository url]를 입력한다. $ git submodule add -b master [두번째 repository url] public을 입력하여 hugo로 빌드될 public폴더를 서브모듈로 연결한다....

December 29, 2019 · 1 min · 130 words · ralpioxxcs