티스토리의 편리함은 종종 글을 올려주는데 도움을 주었지만, 개발블로그로 관리할 것의 고민은 늘 있었다. 블로그도 블로그지만, 책을 출판하고 싶은 욕심이 있었다.
종종 개발블로그를 보아왔지만, 개발블로거 보다는 사람들에게 보다 쉽게 데이터 분석을 알려줄 수 있는 Tools 소개하는 책을 출판하고 싶은 욕심은 늘 있어왔다.
기존에 회사를 다닐 때는 원치 않는 일도 종종 해서, 개발블로그를 작성 및 관리할 기회가 없었지만, 앞으로는 이쪽 분야로만 계속 일을 해야 하니, 전통 통계, 머신러닝, 딥러닝, 시각화 등 빅데이터와 관련된 종합적인 글을 주기적으로 쓰는데 주안점을 두려고 한다.
티스토리는 아마 백업용으로 관리가 되지 않을까 싶다. 티스토리 나름의 편리함이 있기 때문이다.
그럼 시작해보자.
Reference
-
블로그 구축기 1 (Hugo github.io). (2019, February 22). Retrieved March 14, 2020, from https://ialy1595.github.io/post/blog-construct-1/
-
Integerous. (2020, March 12). Integerous/Integerous.github.io. Retrieved March 14, 2020, from https://github.com/Integerous/Integerous.github.io
-
Korea, D. T. (2019, January 30). GitHub Pages를 이용한 기술 블로그 제작 후기. Retrieved from https://medium.com/deliverytechkorea/github-pages%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B8%B0%EC%88%A0-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%A0%9C%EC%9E%91-%ED%9B%84%EA%B8%B0-77ce4b5e5564
-
kim, yoj. (2018, September 17). Hugo와 Github Pages를 이용한 기술 블로그 만들기 (1). Retrieved March 14, 2020, from https://yojkim.me/posts/how-to-make-blog-with-hugo/
블로그 구축기 1 (Hugo + github.io) | ialy's blog
22 Feb 2019, 20:07 블로그 구축기 1 (Hugo + github.io)
ialy1595.github.io
Integerous/Integerous.github.io
:memo: Hugo로 github.io 블로그 만들기. Contribute to Integerous/Integerous.github.io development by creating an account on GitHub.
github.com
GitHub Pages를 이용한 기술 블로그 제작 후기
개발자와 디자이너 부부의 첫 공식 작업 — 신범철, iOS Developer
medium.com
Hugo와 Github Pages를 이용한 기술 블로그 만들기 (1) | yojkim dev.
최근들어서 공부한 것에 대한 기록물이 필요하다는 사실을 뼈저리게 깨닫게 되었고 기술(?) 및 기타 활동을 적는 블로그 활동을 다시 시작해보려했다. 이전에 블로그를 구성했었을때는 Github pages와 기본적으로 지원하는 jekyll을 활용해서 구성해보았었는데 이전에 jekyll을 한 번 사용해봤으니 다른걸 해보고 싶다는 생각에 이번에는 hugo를 활용해서 블로그를 구성했고 여러분이 보고 있는 이 블로그가 바로 그 결과물이다. Homebrew를 이용해서
yojkim.me
1, 2번 글을 통해서 대략적인 감을 익혔고, 3번 글을 통해서 Hugo Vs. Jekyll 차이점을 알 수 있었고, Ruby라는 환경설정을 다시 해야 하는 번잡스러움을 피하기 위해 Hugo를 선택하는데 주저함이 없었다. 그러나, 자동배포에 관심이 많으신 '개발자 (Developer)'분들에게는 오히려 Jekyll이 더 낫지 않나 싶습니다 (사실 잘 모르겠다). 마지막 4번글을 통해서 Mac에서 Hugo를 활용한 github.io 개발 블로그를 만들었다.
Why Hugo?
큰 이유는 없다. 편하다고 한다. Go 언어가 기반인 것은 흥미가 있다. 나의 첫 언어인 R 다음에 선택할 언어로 늘 항상 Go를 염두에 두고 있기 때문이다. Okay. Let's get it.
Installation
당연한 얘기이지만, github 블로그를 만드는 것이니, 당연히 git이 설치가 되어야 한다. git 설치는 어렵지 않으니 Pass. git 환경구축은 여기서는 다루지는 않겠다. git이 처음이신 분들은... (어떡하지? 나중에 한번 작성해서 공유하겠습니다.)
brew install hugoHomebrew를 이용해서 매우 간편하게 hugo를 설치할 수 있다. (macOS 기준)
brew가 없어요? 여기 클릭하세요! Homebrew
Homebrew
The Missing Package Manager for macOS (or Linux).
brew.sh
Check If hugo is correctly installed
~ % which hugo /usr/local/bin/hugo # show your version ~ % ls -l $( which hugo ) lrwxr-xr-x 1 your_user_name admin 30 Mar 14 21:03 /usr/local/bin/hugo -> ../Cellar/hugo/0.67.0/bin/hugo
위 소스 코드가 정상적으로 나온다면 잘 설치가 된 것이다.
Create New Site
엥? 별다른 설정 없이 바로 New Site를 만들라고 한다. 일단, 기본 파일에 만들수는 없으니, 새로운 폴더를 만들고 거기에서 다음 명령어를 실행해본다. 난 다음과 같이 만들었다.
~ % cd Documents Documents % mkdir hugoBlog Documents % cd hugoBlog hugoBlog % hugo new site name_of_project
name_of_project 대신에 난 data_science_with_evan 이라 명했다.
hugo new site name_of_project 명령어를 입력하면 여러 형태의 파일이 구성된다. 폴더 트리구조는 아래와 같다.
. └── data_science_with_evan ├── archetypes │ └── default.md ├── config.toml ├── content ├── data ├── layouts ├── static └── themes
Directory Structure
디렉토리 구조에 대한 자세한 설명은 아래 싸이트에서 확인하기를 바란다. 추후에 기회가 되면 번역해서 작업하도록 한다. 오늘은 일단 싸이트 구경좀 하자~ ^^
https://gohugo.io/getting-started/directory-structure/
Directory Structure
Hugo's CLI scaffolds a project directory structure and then takes that single directory and uses it as the input to create a complete website.
gohugo.io
config.toml
여기에서 중요한 것은 사실 이거다. config.toml 파일을 열면 아래와 같이 구성되어 있다.
baseURL = "http://example.org/" languageCode = "en-us" title = "My New Hugo Site"
그런데, 처음에 웹사이트 만들때는 기본으로 만들 것이니, 일단 건드리지 않는다.
Theme Settings
hugo에는 다양한 종류의 웹사이트 테마가 있다. 블로그를 운영해보신 분들은 아시겠지만, 기본적으로 제공하는 테마가 있는데, hugo도 제공한다.
다양한 종류의 테마가 있는데, 여기에서 하나 마음에 드는 것을 고른다. 난 Techdoc이란 테마를 설정했다.
개인 취향이니 본인이 원하는 걸 선택하면 될 것 같다. 이 다음이 중요하다. 다운로드 버튼을 클릭하면 github 화면으로 이동하는데 거기에서, git 주소를 복사(copy)한다. 다시 프로젝트로 와서 /themes/에 경로를 지정한다.
themes % git clone https://github.com/thingsym/hugo-theme-techdoc.gittree 구조는 아래서 보는 것처럼 매우 많다.
. └── hugo-theme-techdoc ├── LICENSE.md ├── README.md ├── archetypes │ └── default.md ├── exampleSite │ ├── config.toml │ ├── content │ │ ├── _index.md │ │ ├── about.md │ │ ├── archives │ │ │ ├── hello_world.md │ │ │ ├── hello_world1.md │ │ │ └── hello_world2.md │ │ ├── blog │ │ │ ├── hello_world.md │ │ │ ├── hello_world1.md │ │ │ └── hello_world2.md │ │ ├── chapter1 │ │ │ ├── 1.md │ │ │ ├── 2.md │ │ │ ├── 3.md │ │ │ ├── 4.md │ │ │ └── _index.md │ │ ├── chapter2 │ │ │ ├── 1.md │ │ │ ├── 2.md │ │ │ ├── 3.md │ │ │ ├── 4.md │ │ │ └── _index.md │ │ ├── chapter3 │ │ │ ├── 1.md │ │ │ ├── 3.md │ │ │ ├── 4.md │ │ │ ├── _index.md │ │ │ └── chapter3-2 │ │ │ ├── 1.md │ │ │ ├── 2.md │ │ │ ├── 3.md │ │ │ ├── 4.md │ │ │ └── _index.md │ │ ├── entry │ │ │ ├── hello_world.md │ │ │ ├── hello_world1.md │ │ │ └── hello_world2.md │ │ ├── getting-started │ │ │ ├── _index.md │ │ │ ├── configuration.md │ │ │ ├── installation.md │ │ │ └── screenshot.md │ │ ├── hello_world.md │ │ ├── post │ │ │ ├── creating-a-new-theme.md │ │ │ ├── goisforlovers.md │ │ │ ├── hugoisforlovers.md │ │ │ └── migrate-from-jekyll.md │ │ ├── posts │ │ │ └── hello_world.md │ │ └── sample │ │ ├── _index.md │ │ ├── build-in-shortcodes.md │ │ ├── custom-shortcodes.md │ │ └── table-of-contents.md │ └── static │ └── images │ ├── og-image.png │ └── pexels-photo-196666.jpeg ├── gulpfile.js ├── images │ ├── screenshot-edit-link.png │ ├── screenshot-open-menu.png │ ├── screenshot-slide-menu.gif │ ├── screenshot-theme-color.png │ ├── screenshot.png │ └── tn.png ├── layouts │ ├── 404.html │ ├── _default │ │ ├── baseof.html │ │ ├── list.html │ │ └── single.html │ ├── blog │ │ ├── li.html │ │ ├── list.html │ │ ├── single.html │ │ └── summary.html │ ├── index.html │ ├── partials │ │ ├── content-footer.html │ │ ├── custom-css.html │ │ ├── custom-head.html │ │ ├── edit-meta.html │ │ ├── edit-page.html │ │ ├── footer.html │ │ ├── global-menu.html │ │ ├── head.html │ │ ├── last-updated.html │ │ ├── menu │ │ │ ├── open-menu.html │ │ │ └── slide-menu.html │ │ ├── meta │ │ │ ├── chroma.html │ │ │ ├── google-analytics-async.html │ │ │ ├── google-site-verification.html │ │ │ └── tag-manager.html │ │ ├── notification.html │ │ ├── pagination.html │ │ ├── powered.html │ │ ├── prepend-body.html │ │ ├── sidebar-footer.html │ │ ├── sidebar.html │ │ ├── site-header.html │ │ └── table-of-contents.html │ ├── posts │ │ ├── list.html │ │ └── single.html │ └── shortcodes │ ├── button.html │ └── panel.html ├── package-lock.json ├── package.json ├── src │ ├── js │ │ ├── jquery.backtothetop │ │ │ ├── jquery.backtothetop.js │ │ │ └── jquery.backtothetop.min.js │ │ ├── keydown-nav.js │ │ ├── main.js │ │ └── sidebar-menu.js │ └── scss │ ├── _component.scss │ ├── _foundation.scss │ ├── _function.scss │ ├── _project.scss │ ├── _structure.scss │ ├── _variable.scss │ ├── chroma.scss │ ├── foundation │ │ ├── _element.scss │ │ ├── _normalize.scss │ │ ├── _reset.scss │ │ └── _stack.scss │ ├── function │ │ ├── _calc-font-size.scss │ │ ├── _calc-stack.scss │ │ ├── _contrast-color.scss │ │ └── _strip-unit.scss │ └── theme.scss ├── static │ ├── css │ │ ├── chroma.css │ │ ├── chroma.min.css │ │ ├── theme.css │ │ └── theme.min.css │ └── js │ └── bundle.js ├── theme.toml └── webpack.config.js 35 directories, 123 files
config.toml
여기에서 중요한 것은 사실 이거다. /themes/hugo-theme-techdoc 폴더가 있는지 확인한다. 다른 테마를 설정했다면, 당연히 다른 이름이 들어갈 것이니 체크한다.
그 다음 해야할 일은 config.toml 파일을 열고 theme = "hugo-theme-techdoc" 입력한다.
baseURL = "http://example.org/" languageCode = "en-us" title = "Data Science | Evan Jung" themes = "hugo-theme-techdoc"
위와 같이 수정했다.
Server
수정이 끝나고 나면 한번 localhost에서 실행이 되는지 확인해보자. 보통 이러한 테마에는 README.md 파일이 있는데, 서버 실행에 대한 설명이 나와 있다.
내 README.md 파일에는 아래와 같이 있었다.
### Preview site To preview your site, run Hugo's built-in local server. ``` hugo server -t hugo-theme-techdoc ``` Browse site on http://localhost:1313
위 서식대로 따라해본다. 이 때, 디렉토리는 개인 프로젝트(나의 경우 data_science_with_evan) 하단에서 실행해야 한다는 점을 유의하자
data_science_with_evan % hugo server -t hugo-theme-techdoc그다음 http://localhost:1313 실행하면 아래와 같은 화면이 나왔다.
오! 신기하다!
그 다음 진행해야 하는 것이 Content Organization인데, 이 부분은 다음에 한다.
아직! github.io 형태의 웹사이트가 만들어진 것은 아니다!
역시 뭐든지 글쓰면서 동시 병행하니, 3-4시간만에 뚝딱 만들어지는 건 없나보다! 그럼 내일 계속 만들어봅시다.
'블로그 관리' 카테고리의 다른 글
| Hugo + gihub.io 개발블로그 만들기 (2) (1) | 2020.03.16 |
|---|---|
| [SEO] 티스토리 싸이트 맵 구글 서치콘솔에 등록하기 (0) | 2018.12.31 |