두번째 시간입니다.
첫번째 글이 궁금하신 분들은 아래를 클릭하세요.
Hugo + gihub.io 개발블로그 만들기 (1)
티스토리의 편리함은 종종 글을 올려주는데 도움을 주었지만, 개발블로그로 관리할 것의 고민은 늘 있었다. 블로그도 블로그지만, 책을 출판하고 싶은 욕심이 있었다. 종종 개발블로그를 보아왔지만, 개발블로거..
cozydatascientist.tistory.com
Content Organization
가장 빠른 방법은 기존에 만들어진 싸이트에 하나씩 수정하는 것이 가장 쉽고 간편하다. themes 사용하는 건, 단순하다. 쉽게 Build 하기 위해서다. 아래와 같이 이미 만들어진 구조가 있는데, 이것을 최소한 살리는 방향으로 가는 것이 좋다.
그러면, github.io에 호스팅하는 방법만 알면 되지 않을까?
$ cd themes/hugo-theme-techdoc/exampleSite/content
$ tree
.
├── _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
우선 README.md에 나와 있는대로 localhost에서 구동을 시켜본다. (README.md 참고)
### Preview exampleSite
```
cd /path/to/dir/themes/hugo-theme-techdoc/exampleSite
hugo server --themesDir ../..
```
그러면 위와 같은 이미지를 볼 수 있다.
이제 간단하게 수정을 해보자. 기본적인 것은 config.toml 에서 수정을 하면 된다. 잘 짜여진 config.toml은 아래와 같다.
baseURL = "https://example.com"
languageCode = "en-us"
DefaultContentLanguage = "en"
title = "Data Science | Evan"
theme = "hugo-theme-techdoc"
hasCJKLanguage = true
metaDataFormat = "yaml"
pygmentsCodeFences = true
pygmentsUseClasses = true
defaultContentLanguage = "en"
defaultContentLanguageInSubdir= false
enableMissingTranslationPlaceholders = false
[Params]
# Source Code repository section
description = "put your description"
github_repository = "https://github.com/thingsym/hugo-theme-techdoc"
version = "0.8.2"
# Documentation repository section
# documentation repository (set edit link to documentation repository)
github_doc_repository = "https://github.com/thingsym/hugo-theme-techdoc"
# Analytic section
google_analytics_id = "" # Your Google Analytics tracking id
tag_manager_container_id = "" # Your Google Tag Manager container id
google_site_verification = "" # Your Google Site Verification for Search Console
# Open Graph and Twitter Cards settings section
# Open Graph settings for each page are set on the front matter.
# See https://gohugo.io/templates/internal/#open-graph
# See https://gohugo.io/templates/internal/#twitter-cards
title = "Data Science | Evan"
images = ["images/og-image.png"] # Open graph images are placed in `static/images`
# Theme settings section
# Theme color
# See color value reference https://developer.mozilla.org/en-US/docs/Web/CSS/color
custom_font_color = ""
custom_background_color = ""
# Documentation Menu section
# Menu style settings
menu_style = "open-menu" # "open-menu" or "slide-menu"
# Date format
dateformat = "" # default "2 Jan 2006"
# See the format reference https://gohugo.io/functions/format/#hugo-date-and-time-templating-reference
# path name excluded from documentation menu
menu_exclusion = [
"archives",
"archive",
"blog",
"entry",
"post",
"posts"
]
# Global menu section
# See https://gohugo.io/content-management/menus/
[menu]
[[menu.main]]
name = "Home"
url = "/"
weight = 1
[[menu.main]]
name = "Twitter"
url = "https://twitter.com/thingsym"
weight = 2
# Markup configure section
# See https://gohugo.io/getting-started/configuration-markup/
[markup]
[markup.tableOfContents]
startLevel = 2
endLevel = 4
ordered = false여기에서 가장 좋은 건 이름부터 바꿔주는 것이다. 어차피 홈페이지는 결국엔 디자인 싸움이 아니던가? 처음부터 만들려면 힘들고 어렵다. 잘 되어진 것을 유지보수 하는 것이 소위 말하는 개발의 첫번째!
-
title = "Data Science | Evan"
-
description = "This is personal blog of someone who likes to write about Data Things"
그 외에 하나씩 스터디 하면서, 데이터 관련된 글도 작성하면서, 추가하려고 한다.
Github
이제 어떻게 github와 연동해야 할까? 하는 중에... 공식문서를 발견했다.
Quick Start
Create a Hugo site using the beautiful Ananke theme.
gohugo.io
음.. 역시, '처음엔 무조건 삽질을 하는군' 하며.. 프로그래밍하면서 늘 느끼는 건, 공식문서를 봐야한다. 근데, 처음에 공식문서를 본다고 감이 오는 건 아니다. 삽질을 한번 해보면 왜 공식문서를 봐야하는지 알때가 있다.
Github 연동하는 다양한 방법이 있지만, 여기에는 프로젝트를 만들때 부터 이미 git과 연동시켜 놓았다.
이제 공식문서를 빠르게 습득한다.
# Step 1. Create new Site
$ hugo new site quickstart
# Step 2. Add a Theme % Configuration
$ cd quickstart
$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo 'theme = "ananke"' >> config.toml
# Step 3. Add Some Content
$ hugo new posts/get_started.md
# Step 4. Start the Hugo server
$ hugo server -DGithub 저장소 2개 만들기
참조: https://github.com/Integerous/Integerous.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
-
하나는 Hugo의 컨텐츠와 소스파일들을 포함할 <YOUR-PROJECT> 저장소 생성한다. (나의 경우 data_science_with_evan라는 이름으로 생성)
-
다른 하나는 렌더링된 버전의 Hugo 웹사이트를 포함할 <USERNAME>.github.io 저장소 생성 (chloevan.github.io)
Remote와 Submodule 설정
-
깃헙에 만든 blog 저장소를 local의 blog 디렉토리의 remote로 등록한다.
-
$ cd /somefolder/data_science_with_evan
-
$ git init
-
$ git remote add origin git@github.com:integerous/blog.git
-
-
integerous.github.io 저장소를 blog의 submodule로 등록한다.
-
$ git submodule add -b master git@github.com:integerous/integerous.github.io.git public
-
이렇게 함으로 hugo 명령으로 public에 웹사이트를 만들 때, 만들어진 public 디렉토리는 다른 remote origin을 가질 것이다.
-
public이 중요하다. public이 결국 웹사이트
-
만약에 Permission Denied 문제가 발생이 되면 아래에서 해결한다.
-
Checking for existing SSH keys - GitHub Help
Checking for existing SSH keys Before you generate an SSH key, you can check to see if you have any existing SSH keys. Mac Windows Linux All Note: DSA keys (SSH-DSS) are no longer supported. Existing keys will continue to function, but you cannot add new D
help.github.com
Tips
-
Repository를 만들 때, user_name과 동일하게 만드는 것을 추천한다. github.io 저장소 이름을 지을 때, 아래와 같이, 같은 이름으로 만드는 것을 추천한다.
https://github.com/yourname/yourname.github.io.git-
테마를 선정할 때, configuration이 쉬운 것을 택한다.
-
배포할 때, 다른 환경이 필요한 경우가 있다. 난, techdoc을 활용하고 싶었는데, development 환경을 npm을 설정해야 부분이 있었다. npm 설정 시, 내 컴의 생각지도 못한 오류가 있어서, 밤새 삽질했고, 404에러가 계속 생겨났다. 중요한 파트는 아니라 쓸데없는 시간 낭비를 하고 싶지 않아 결국 테마를 바꾸었다. 정말 중요하다. 비 개발자의 경우 이러한 configuration 오류가 발생 시, 계속 허탕을 칠 수 있으니 주의 바란다.
Deploy
-
우선 project 폴더 내에서 hugo -t 테마이름을 실행한다.
-
public 폴더까지 만들었으면, 이제 git에 각각 저장하자.
-
public에서 git push 한 것은 your_name.github.io에 저장될 것이다.
-
그리고, 프로젝트 폴더로 와서 전체 git push를 진행하면 끝이다.
- 다음 코드처럼 입력하면 된다.
# project 폴더에 있다는 것으로 가정한다. 나의 경우 data_science_with_evan 폴더 내 였다.
# public을 먼저 push 할 것이다.
$ cd public # public으로 경로 이동
$ git add * #
$ git commit -m "your commit message"
$ git push origin master
# project 경로로 이동 후 다시 push 한다
$ cd ..
$ git add *
$ git commit -m "your commit message"
$ git push origin master
-
정상적으로 git push가 되었다면, http://user-id.github.io 복사 후 URL에 붙여넣기 하면 완성된 페이지를 볼 수 있을 것이다.
'블로그 관리' 카테고리의 다른 글
| Hugo + gihub.io 개발블로그 만들기 (1) (0) | 2020.03.14 |
|---|---|
| [SEO] 티스토리 싸이트 맵 구글 서치콘솔에 등록하기 (0) | 2018.12.31 |
