Help us understand the problem. What is going on with this article?

HUGOとGitHub Pagesで自分のBlogページを作ってみた(Windows)

More than 1 year has passed since last update.

はじめに

プログラミング分からないので、間違っていたりしたら教えてください。見よう見まねで調べながらやってます。この記事を書くに至った経緯は、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としといた。

雛形を作る

https://themes.gohugo.io/ から好みのテーマを選ぶ。僕は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.jpg
002.jpg

短文なら大丈夫だが、概要が出てくるのが嫌なので

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

と書いた。概要は規定の文字数まで記述されるが<!--more-->があると終了してくれる。

あと本文の最初の文字が大きくなるのも嫌だから、.\hugo-test\themes\aether\statics\にあるmain.min.cssstyle.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とする。しばらくすれば、https://blank71.github.io/hugo-test/で見ることが出来るようになった。

感想

初めて真面目にコード編集とかした。Visual Studio Codeは凄く使いやすく感じた。Gitをよく理解していないので、そこに関して躓くことが多かった。自分が不満に思ったところは、適宜自分でコードを改変したりできるようになりたい。HTML/CSSを出来るようにしよう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした