자바스크립트를 활성화 해주세요

h035 docsy 테마를 설치해 보았습니다

 ·  ☕ 3 min read

docsy는 구글에서 만든 hugo theme입니다. 소스 레포지토리는 https://github.com/google/docsy/ 인데, 여기에서는 설치를 https://github.com/google/docsy-example 를 clone해서 쓰라고 소개하고 있는 겁니다.

이렇게 생겼습니다.

Image

설치

추천하는 설치 방법은 이쪽입니다. 요즘 출시되는 많은 hugo 테마가 그렇듯이 새로운 Page포맷을 정의해서 배포하기 때문에, 기존의 site 디렉토리의 theme에 설치하는 것보다 샘플사이트에서 다운받아서 시작하라고 얘기하고 있습니다.

git clone --recurse-submodules --depth 1 https://github.com/google/docsy-example.git blog
cd blog
hugo server

SCSS를 수정해서 publish하고 싶은 경우에는 PostCSS를 설치하라고 힙니다.

npm install CSCC

실행되는 페이지의 이미지는 다음과 같습니다.

  • 왼쪽에는 파일 익스플로러와 같은 형태, 오른쪽에는 페이지 스트럭쳐가 보이는 형태의 구조입니다.
  • 느낌은 doxygen이나 javadoc과 같았지만,
  • 기본적인 마크다운의 렌더링은 지금까지 봐온 테마 중에서는 가장 깔끔한 느낌이 들었습니다.
  • 검색기능이 장착된 것이 마음에 들었습니다.

Content 디렉토리 구조

살펴보니, Content 디렉토리의 구조가 다음과 같은 구조로 되어 있었습니다.

├─en
│  ├─about
│  ├─blog
│  │  ├─news
│  │  │  └─first-post
│  │  └─releases
│  ├─community
│  └─docs
│      ├─Concepts
│      ├─Contribution guidelines
│      ├─Examples
│      ├─Getting started
│      ├─Overview
│      ├─Reference
│      ├─Tasks
│      │  └─Ponycopters
│      └─Tutorials
└─no
    └─docs

Goorm IDE

https://www.goorm.io/ 에서 docsy theme를 설치해 살펴보았습니다. 설치와 실행은 이하의 명령어를 일괄 실행하는 것으로 가능합니다.

VERSION=1.14.6
OS=linux
ARCH=amd64

# download and untar
wget https://golang.org/dl/go$VERSION.$OS-$ARCH.tar.gz
tar -C /usr/local -xzf go$VERSION.$OS-$ARCH.tar.gz
echo "export PATH=$PATH:/usr/local/go/bin:$HOME/go/bin" >> $HOME/.profile
source $HOME/.profile

# GOPATH
mkdir ~/go
echo "export GOPATH=$HOME/go" >> $HOME/.profile
source $HOME/.profile
echo $GOPATH

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended

cd /workspace/
git clone --recurse-submodules --depth 1 https://github.com/google/docsy-example.git
cd docsy-example

# docsy-yoflv.run.goorm.io
hugo server --bind 0.0.0.0 -p 80 --baseUrl=docsy-yoflv.run.goorm.io
apt install tree

그런데 content의 구조가 hierachy 구조로 되어 있습니다. 한 번에 몰아서 작성하기가 당장은 곤란합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
root@goorm:/workspace/docsy-example/content/en(master)# tree .
.
├── _index.html
├── about
│   ├── _index.html
│   └── featured-background.jpg
├── blog
│   ├── _index.md
│   ├── news
│   │   ├── _index.md
│   │   ├── first-post
│   │   │   ├── featured-sunset-get.png
│   │   │   └── index.md
│   │   └── second-post.md
│   └── releases
│       ├── _index.md
│       └── in-depth-monoliths-detailed-spec.md
├── community
│   └── _index.md
├── docs
│   ├── Concepts
│   │   └── _index.md
│   ├── Contribution guidelines
│   │   └── _index.md
│   ├── Examples
│   │   └── _index.md
│   ├── Getting started
│   │   ├── _index.md
│   │   └── example-page.md
│   ├── Overview
│   │   └── _index.md
│   ├── Reference
│   │   ├── _index.md
│   │   └── parameter-reference.md
│   ├── Tasks
│   │   ├── Ponycopters
│   │   │   ├── _index.md
│   │   │   ├── configuring-ponycopters.md
│   │   │   └── launching-ponycopters.md
│   │   ├── _index.md
│   │   ├── beds.md
│   │   ├── porridge.md
│   │   └── task.md
│   ├── Tutorials
│   │   ├── _index.md
│   │   ├── multi-bear.md
│   │   └── tutorial2.md
│   └── _index.md
├── featured-background.jpg
└── search.md

결론적으로는

  • 문서를 써가면서 구조를 잡아가는 타입의 글 작성이라면, content의 구성이 여러번 바뀌어야 할 것 같습니다.
  • 하지만, 이미 구조화되어 있는 구성이라면 한 번만 구성을 잡아주면 될 듯 합니다.
  • md파일 안에서도 이렇게 hugo markup을 사용하는 페이지 구성은 없었는데,
  • 결국은 커스터마이징이 필요할 것 같습니다.

레퍼런스

공유하기

tkim
글쓴이
tkim
Software Engineer