初心者がGitHub PagesとHugoで自分好みのサイトをサクッと作った(現在工事中)

現在工事中です…。Hugoのドキュメントをしっかり読み込むところからやり直してます…。みんなはちゃんとドキュメント読んでから行動しようね!

はじめに

せっかく無料なのでGitHub Pagesでブログを作りました(貧乏性)。

その際に使ってみたHugoなどについてメモします。

なおサクッと作ってみただけなので、詳しいことはわかりません。逆に教えてもらいたいです…。

追記(2019/03/15)

なんかトレンドに乗ってしまって驚いています…。
この記事は「初心者が数日で作れたよ! Hugoすごいよ!」という内容です。
実際に使う場合は公式ドキュメント見てください!

GitHub Pagesとは

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
これに尽きます。

GitHubリポジトリから「直接』ホストされているWebサイト。編集後いつものようにpushするだけでWebサイトが更新される。

サーバーを提供してくれる『ホスティングサービス』とよばれるものです。

情報が多く、かつ無料で手軽に使えるので選びました。
いい世の中ですねぇ。

使い方

  1. GitHubアカウントを作る
  2. username.github.ioというリポジトリを作る
  3. ローカルにcloneする
  4. 生成した静的サイトをaddし、commitpushをする
  5. 終了! 簡単! https://username.github.ioにアクセスするとそこには作ったサイトが!

https://username.github.io/repositoryという感じにホストすることもできるようです。
詳しくは: 公式サイト

Hugoとは

HugoというのはGo言語により作られた静的サイトジェネレータです。

静的サイトジェネレータとは

静的サイトジェネレータというのはWordPressなどと同じように、Webページを生成するものです。

違いは、

  • WordPressなど
    • アクセスがあったときにサーバーで生成する
  • 静的サイトジェネレータ
    • あらかじめ生成しておく
    • 生成されたものをサーバーにホストしておく

無料のホスティングサービスでは、WordPressをインストールするなどのサーバーサイドなアレコレはできないことが多いです。
実際、GitHub Pagesではできないようです。
なので、Webページを生成したい場合は静的サイトジェネレータを用いる必要があります。

また、静的サイトジェネレータはあらかじめ生成しておくというアプローチをとるので、WordPressなどがそのつど生成するのに対しサーバーの負荷を減らすことができます。表示までにかかる時間も短縮でき、セキュリティも高められるそうです。
巷では「WordPressやめようぜ」とかいわれているそうです。

VuePressもおすすめ

静的サイトジェネレータには、様々なものがあります。
私は当初、VuePressというものを使おうと計画していました。
しかし、残念ながら私の環境ではエラーが出てしまい、使えなくもないのですが使いづらかったので、第二候補のHugoにご登場いただきました。

Hugoでテーマを自作

独自色を出そうと、テーマから自作しました。

ちょっと参考になったサイト(公式): Create a Theme | Hugo
とても参考になったサイト: 【Hugo】ゴリラでも分かる静的サイトジェネレーターHugoでオリジナルテーマ作り – Snaplog

さすがは「ゴリラでも分かる」と豪語しているだけあって、とてもわかりやすかったです。
上記サイトを見ればなんとかなります。特に書くことはありません。

作ったテーマ

どうせ自分用だからとものすごく汚い感じになっています(作り直したい)。
ご注意ください。

ディレクトリ構造

├── archetypes  
│   └── default.md       # `hugo new`で記事を書き始めるときのテンプレ  
├── config.toml          # 設定(よくわからない)  
├── content  
│   └── article.md  
├── layouts  
│   ├── _default  
│   │   ├── list.html    # 部品  
│   │   └── single.html  # これをもとに記事ページが生成される  
│   ├── index.html       # これをもとにトップページが生成される  
│   └── partials         # 共通する部分を部品として使い回せる  
│       ├── footer.html  
│       └── header.html  
└── static               # CSSやJavaScriptを置いておく場所  
    └── CSS  
        ├── master.css  
        └── normalize.css  

config.toml

baseURL = "https://username.github.io/"  
title = "サイト名"  

[blackfriday]  
    hrefTargetBlank = true  
    nofollowLinks = true  
    noreferrerLinks = true  
    extensions = [  
        "hardLineBreak"  
    ]  
    extensionsmask = [  
        "autoHeaderIds"  
    ]  

config.tomlについて: Configure Hugo | Hugo

blackfridayというのがMarkdownをHTMLに変換するものだそうです。
それの設定も変えています。基本的に名前通りです。
hardLineBreakというextensionsで、Qrunchのように改行で<br>するようになります。
autoHeaderIdsは見出しへのID付与です。うざったいのでextensionsmaskしました。

static

ここにCSSやJavaScriptを置いておきます。
今回私はJavaScriptを使っていません。

layouts

index.htmlは以下の通り。

{{ partial "header.html" . }}  
            <h1 class="entry-title">{{ .Site.Title }}</h1>  
            <p class="entry-info"><time datetime="{{ .Date.Format "2006/01/02" }}">{{ .Date.Format "2006/01/02" }}</time></p>  
            <section class="entry-content">  
                <h1>記事一覧</h1>  
{{ range .Paginator.Pages }}{{ if not .Params.meta }}{{ .Render "list" }}{{ end }}{{ end }}  
            </section>  
{{ partial "footer.html" . }}  

{{ hoge }}が生成時にデータを埋め込むためのものです。

{{ range .Paginator.Pages }}{{ if not .Params.meta }}{{ .Render "list" }}{{ end }}{{ end }}では、すべての記事を列挙しています。
(私にもよくわからない)。

partials/header.htmlは以下の通り。

<!DOCTYPE html>  
<html lang="ja">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>  

    <link rel="stylesheet" href="{{ .Site.BaseURL }}CSS/normalize.css">  
    <link rel="stylesheet" href="{{ .Site.BaseURL }}CSS/master.css">  

    <meta property="og:site_name" content="{{ .Site.Title }}">  
    <meta property="og:description" content="{{ .Description }}">  
    <meta property="og:title" content="{{ .Title }}">  
    <meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">  
    <meta property="og:url" content="{{ .Permalink }}">  
</head>  

<body>  
    <p class="for-w3m" lang="en">This web page is written in Japanese (UTF-8).</p>  
    <hr class="for-w3m">  
    <header>  
        <h1 class="spread-a"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>  
        <nav>  
            <ol>  
                <li class="spread-a"><a href="{{ .Site.BaseURL }}about">About</a></li>  
                <li class="spread-a"><a href="{{ .Site.BaseURL }}links">Links</a></li>  
            </ol>  
        </nav>  
    </header>  
    <hr class="for-w3m">  
    <main>  
        <article>  

{{ if not .IsHome }}でホームページかどうかで分岐します。
便利ですね。

{{ .Site.BaseURL }}CSS/normalize.cssでCSSを読み込むことができます。

OGPの設定も大まかなものはしました。
{{ .Title }}{{ .Permalink }}で記事のタイトルやURLを取得できます。

partials/footer.htmlは以下の通り。

        </article>  
    </main>  
    <hr class="for-w3m">  
    <footer>  
        <address lang="en">  
            <p>  
                My name is okayu.<br>  
                I am a Japanese high school student.<br>  
                I LOVE Web and VOICEROID!!!  
            </p>  
            <p><a href="https://misskey.xyz/@okayu" target="_blank" rel="noopener noreferrer">This</a> is my Misskey account.</p>  
            <p>more info: <a href="{{ .Site.BaseURL }}about">About | {{ .Site.Title }}</a></p>  
        </address>  
    </footer>  
</body>  

</html>  

_default/list.htmlは以下の通り。

<div>  
    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>  
    <p>  
        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006/01/02" }}</time> &ndash; {{ .Params.writer }}「{{ .Description }}」  
    </p>  
</div>  

_default/single.htmlは以下の通り。

{{ partial "header.html" . }}  
            <h1 class="entry-title">{{ .Title }}</h1>  
            <p class="entry-info">  
                <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006/01/02" }}</time>  
                &ndash;  
                {{ .Params.writer }}  
            </p>  
            <section class="entry-content">  
{{ .Content }}  
            </section>  
{{ partial "footer.html" . }}  

おわりに

これはひどい。あとで時間があったら作り直します…。
詳しい方いたらぜひご教授を!!!

追記(2019/03/15)

Hugoの日本語ドキュメント作成プロジェクトがあるそうです!
募集ツイート
英語できる人、ぜひご一考ください!