웹 사이트를 시작하는 도구로 사용되는 Hugo

Qita를 처음 사용하기 1년 전에는 이벤트 사이트를 만들어야 하기 때문에 Hugo를 사용했기 때문작업 기록(+Hugo etc.)을 남겼다.Hugo는 1년 동안 상당히 숙련되어 일상적으로 사용할 수 있다.
이번에는 비교적 긴 사이트를 만들려고 하기 때문에 나는 이전의 기록을 복습하면서 Hugo의'지속적 사용'노트를 기록하기로 결정했다.
첫 번째는 설치부터 사이트까지의 초기 제작(이하, 주제 hugo-future-imperfect를 응용한 후 Hugo 사이트 화면)이다.

※ 지난번에는 linux기에서 작업했는데, 이번에는 윈도우즈 10에서 작업했어요. - 그냥 해봤어요기본 Windows 10 사용 시작. 그래서 적당히 조개껍질로 작업했어요.귀찮아 보이는 인사이더 프리뷰 등에 참가하고 싶지 않은 분들은 참고여기.하시고, 미리 싸이그윈(babun)을 가져오면 조개 껍질 작업이 순조롭게 진행됩니다.

"Hugo를 선택해야 하는 이유"에 대한 링크 세트 참조

동적 CMS에 비해 Hugo를 선택했습니다.

Jekyll 포기하고 Hugo(+ 설치 방법 등) 선택

초기 가져오기 Hugo

[1] 설치 작업(Windows wih bash 편)

Go제 Hugo는 바이너리 설치를 기반으로 합니다.
공식화OS별 설치 방법 페이지
※ 다음은 윈도우즈에 설치된 예(2015년 5월 현재).조개 지령을 사용하지 않는 사람은 이 방법에 따라 가져오는 것이 비교적 순조로울 것이다.
http://ureta.net/2015/05/hugo-on-windows/

1-1 대상 폴더 설치 준비

설치 페이지에 따라 설치 위치는 c:\Hug\bin입니다.
mkdir -p c:\Hugo\bin

1-2 바이너리의 도입

릴리즈 페이지 아래 Downloads에서 자신의 환경에 맞는 파일을 다운로드합니다.자신의 경우 "hugo 0.15 윈도우즈amd64.zip"

1-3 바이너리를 작업 폴더로 이동하고 이름 바꾸기

압축 파일에서exe를 꺼내 설치 폴더 c:\Huge\bin 이후hugo로 이동합니다.이름을 exe로 바꾸다.

c:\Hugo\bin>mv hugo_0.15_windows_amd64.exe hugo.exe
c:\Hugo\bin>ls
hugo.exe

1-4 작업 폴더에서 PATH 차단

나는 조개껍질의 설치 방법을 잘 모른다.
c:\Huge\bin을 Cortata의 환경 변수에 추가하고 =>PATH를 입력합니다.
※ 명령행은 여기서 잠시 재시작

[2] 로컬 작업 폴더에 사이트 만들기

2-1 작업 폴더 사이트 만들기 및 사이트 초기 생성(new site)

C:\Users\geeks>cd c:\Hugo
c:\Hugo>mkdir sites
c:\Hugo>hugo new site sites

c:\Hugo>tree
フォルダー パスの一覧:  ボリューム Windows7_OS
ボリューム シリアル番号は 00000285 AA06:BFF6 です
C:.
├─bin
└─sites
    ├─archetypes
    ├─content
    ├─data
    ├─layouts
    └─static

=>sites 이하의 사이트가 초기에 생성되었습니다.

2-2페이지 만들기

hugo new 를 사용합니다.
문장은 기본적으로 Mardown 형식으로 기술되어 있다.

c:\Hugo\sites>hugo new aboud.md
c:\Hugo\sites\content\aboud.md created

c:\Hugo\sites>cd content
c:\Hugo\sites\content>ls
aboud.md

c:\Hugo\sites\content>mv aboud.md about.md

c:\Hugo\sites\content>nano about.md

※ bash on 윈도우즈는 ubuntu를 기반으로 nano는 텍스트를 약간 편집하는 데 사용할 수 있습니다(단, 현재 일본어는 잘 편집할 수 없습니다).
about.md

+++
date = "2016-04-11T13:02:12+09:00"
draft = true
title = "AboutUs"

+++

# 私達について　
Apple信者などの集まり。林檎は健康果実！
このサイトでは平日Macをいじくってコード書いてる輩が,週末に行うリンゴ圃場での作業記録を淡々と記します。

2-3 사이트 테마 다운로드 및 응용(옵션)

Hugo의 매력 중 하나는 사이트의 주제를 충실하게 하고 더 많은 위원회를 늘리는 것이다.이번에는 허고-future-imperfect를 시도해 보겠습니다.
다운로드한 테마는sites/theemes 아래에 설정되어 있습니다. (다음은 약간의 오류가 있는 작업 기록입니다.)

c:\Hugo\sites>git clone https://github.com/jpescador/hugo-future-imperfect
c:\Hugo\sites>mkdir themes
c:\Hugo\sites>mv hugo-future-imperfect themes

hugo-future-imperfect의readme를 읽고 필요한 초기 설정을 진행합니다(본 주제의 경우 우선theemes\hugo-future-imperfect\exampleSite 이하를sites 바로 아래로 복사합니다).
그리고 config.toml 편집

baseurl = "http://hugo.spf13.com/"
languageCode = "JP"
title = "Ringo Star Imperfect"
theme = "hugo-future-imperfect"
preserveTaxonomyNames = true
paginate = 3
disqusShortname = "shortname"
googleAnalytics = ""

[params]
    # Sets the meta tag description, usually reserved for the main page
    description          = "元テーマはHTML5 UP theme. Powered by Hugo"
    # This will appear on the top left of the navigation bar
    navbarTitle          = "林檎は健康果実。"
    # Social media buttons that appear on the sidebar
    socialAppearAtTop    = true
    socialAppearAtBottom = true
    # set this to the section name if section is not post
    viewMorePostLink     = "/blog/"

（以下,略）

테스트에 들어간 사이트\contentent\블로그를 편집합니다.hugo-future-imperfect를 활용하면 적당한 디자인으로 블로그를 바로 시작할 수 있다.

2-4 사이트 미리보기.

hugo 서버를 사용합니다. -t 옵션은 주제를 지정합니다.
c:\Hugo\sites>hugo server -t hugo-future-imperfect -D -w
실행 화면은 처음과 같다.

금후의 일

githubpage에 디버깅 프로세스를 구축합니다.

사이트 유지의 분업 체제의 응당 상태를 연구

JS의 활용법