소개

프로그래밍을 모르기 때문에 잘못되었다면 알려주세요. 보자 보이지 않고 조사하면서 하고 있습니다. 이 기사를 쓰게 된 경위는, HUGO가 Go 언어로 폭속이라고 하는 것을 이전에 보았던 것과, GitHub Pages로라면 무료로 Web 페이지를 만들 수 있다고 알았기 때문입니다.

환경은 Windows.
GitHub Pages의 URL처는 https://(USERNAME).github.io/와 https://(USERNAME).github.io.(PROJECT)/의 2 종류가 있다고 하지만, 후자의 경우로 해 간다. 자세한 내용은 Host on GitHub에 설명이 있습니다.

준비

우선, Install Hugo을 읽어 보았다.
우선 Git과 Go와 HUGO를 설치한다.
HUGO는 extended를 선택했다. 무인과의 차이는 SCSS/SASS를 서포트하고 있는지 어떨까. 잘 모르겠지만 우선 extended를 설치하고 있었다.

$ git version
git version 2.20.1.windows.1

$ go version
go version go1.11.5 windows/amd64

$ hugo version
Hugo Static Site Generator v0.54.0/extended windows/amd64 BuildDate: unknown

GitHub에 리포지토리 만들기

GitHub에서 리포지토리를 만듭니다. 이름은 hugo-test로 했다.

병아리 만들기

htps : /// ぇめ s. 고후고. 이오/에서 원하는 테마를 선택합니다. 나는 aether 라고 하는 것으로 해 보았다.
작업 디렉토리를 test로 했다. HUGO에게는 hugo-test를 생성해 주었다. 이름은 뭐든지 좋다.

$ hugo new site hugo-test
<hugo-testっていうディレクトリができて、下にも色々できる>

$ cd .\hugo-test\
$ git init
$ git add --all
$ git commit -m "hugo new site hugo-test"
$ git remote add origin https://github.com/Blank71/hugo-test.git
$ git push -u origin master
<GitHubにpushした>

$ cd .\themes\
$ git clone https://github.com/josephhutch/aether.git
<選んだテーマを持ってくる>

$ cd ..
$ git add --all
<エラーを吐かれた>
$ git fetch
$ git add --all
$ git comment -m "clone aether"
$ git push -u origin master
<テーマをcloneしてきて、それをpushした>

이 이후는 test\hugo-test\로 작업을 한다.

초기 설정

config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

config.toml

baseurl = "https://blank71.github.io/hugo-test/"
title = "blank71 hugo-test"
author = "blank71"
canonifyurls = true
paginate = 3
theme = "aether"
publishDir = "docs"
hasCJKLanguage = true
languageCode = "ja-jp"

baseurl는 원본 URL입니다. https://(USERNAME).github.io/(PROJECTNAME)/로 설정합니다.

canonifyurls = true -> baserurl로부터의 절대 패스로 한다.

pagenate -> 한 페이지에 표시 할 페이지 수.

theme -> 자신이 사용하는 테마를 쓴다.

publishDir -> GitHub Pages로 표시할 수 있도록 docs/ 아래에 놓도록 한다.

hasCJKLanguage = true -> 일본어를 포함해요.

기사 작성

라고 하는 것으로, 001이라고 하는 페이지를 작성.

$ hugo new posts/001.md
~\gufo-test\content\posts\001.md created

~\hugo-test\content\posts\001.md를 살펴보면 다음을 할 수 있다.

001.md

---
title: "001"
date: 2019-02-16T14:58:22+09:00
draft: true
---

우선 써 보자.

001.md

---
title: "001"
date: 2019-02-16T14:58:22+09:00
draft: false
---
test<br>
テスト

draft = false 하면 기사를 게시할 수 있습니다.

$ hugo
$ hugo server

http://localhost:1313/hugo-test/에서 자신의 페이지를 볼 수 있습니다.




단문이라면 괜찮지 만 개요가 나오는 것이 싫기 때문에

<!--001-->    #中身はなんでもいい
<!--more-->
test<br>
テスト

라고 썼다. 개요는 규정의 문자수까지 기술되지만 <!--more-->가 있으면 종료해 준다.

그리고 본문의 최초의 문자가 커지는 것도 싫기 때문에, .\hugo-test\themes\aether\statics\에 있는 main.min.css와 style.css의 .dropcase에 관한 기술을 삭제하는 것으로 해결했다.
(추기 0220: README에 dropCap의 기술이 있고, 이것을 false로 하면 대문자가 되지 않는다.)

GitHub Pages에서 본다.

Git을 잘 모르고 오류가 발생하기 때문에 .\hugo-test\themes\aether\의 .git 폴더가 삭제되었습니다.

$ hugo
$ git add --all
$ git commit -m "hugo"
$ git push origin master

GitHub 프로젝트의 Settings에 가서 GitHub Pages > Source > master blanch/docs folder로 한다. 잠시 후 htps://b ㎁ k71. 기주 b. 이오 / 후고 - st / 에서 볼 수 있게 되었다.

감상

처음으로 진지하게 코드 편집이라고 했다. Visual Studio Code는 굉장히 사용하기 쉽게 느꼈다. Git을 잘 이해하지 못했기 때문에 거기에 관해 주저하는 경우가 많았다. 자신이 불만으로 생각한 곳은, 적당히 스스로 코드를 개변하거나 할 수 있게 되고 싶다. HTML/CSS를 할 수 있도록 하자.