markdownで記事を作成して無料ブログをつくる[Github Pages+Hugo]

2 min read

はじめに

GitHub Pagesを用いると、無料でWebサイトを公開できます。静的サイトジェネレータ（今回はHugoを利用）と組み合わせることでブログを簡単に作れることを知り、試してみたくなりました。そのまとめです。GitHub Pagesと静的サイトジェネレータに関する非常に分かりやすい記事が多数ありましたが、自分用のまとめとして作成しました。

全体通して，参考にした記事たち 参考1：Hugo + GitHub Pages（独自ドメイン適応）でサイトを作成・公開する
参考2：【2018年版】Hugoとgithub pagesでブログ作る方法【Circle CIも回します】

Hugoとは

ブログを作成する際，コンテンツの作成や編集のしやすさからWordPressのようなCMSを利用することが多い．しかし，CMSを使用するにはCMS自体のインストールや設定，データベースの準備など少し複雑な作業が必要となる．小規模なブログの場合，HTMLファイルを用いた静的なサイトを作成したほうがコストが低くなる場合がある．とはいえ，HTMLファイルをいちいち手動で作成するのはめんどくさい．そのため，HTMLファイルを半自動生成するようなツール(静的サイトジェネレータ)が存在し，その一つがHugoである．

Hugoは，Go言語で開発された静的サイトジェネレータである．Hugoを使うとデータベースを使用することなく静的なHTMLファイルやCSSファイルによるブログを作成できる．コンテンツは，Markdown形式で記述して，ビルドすると静的なHTMLファイルによるウェブサイトが生成される．

hugo-logo.png

Hugoのメリットしては，

  • ビルド，表示処理が早い
  • データベース不要で管理が簡単

ということがあげられる．

参考1：静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る
参考2：Hugoとは？静的サイトジェネレータについて解説

Hugoでサイトを作成

Hugoのインストール

1
2

# Homebrew(macOS)の場合
brew install hugo

その他の方法でのインストール方法は，Install Hugo

サイトの作成

1
2
3

hugo new site test # testは好きな名前
cd test
hugo # このコマンドで生成

サーバーでプレビュー

1

hugo server

http://localhost:1313で確認できる

フォルダの中身の確認

1
2
3
4
5
6
7
8
9

.
├── archetypes # (初期生成されない)Hugo Pipes で処理するファイルを保存するためのファイル
├── config.toml # hugoの設定ファイル
├── content # 記事ファイルを置くファイル
├── data # サイトの全ページから参照したいデータを記述したファイル
├── layouts # テーマファイルを一部修正したいときやレイアウトパーツを追加したいときに利用するファイル
├── public # 生成されるhtmlなどのコード(これを公開する)
├── static # サイト内の静的ファイルを置くファイル
└── themes # テーマファイルを置く

参考1：HUGO のディレクトリ構成
参考2：Directory Structure

テンプレートを利用する

Hugo Themesから好きなテーマを選択し，themesフォルダの中にcloneする．

1
2

cd themes
git clone テーマフォルダ

config.tomlに以下の行を追記する．

1

theme = "選んだテーマ名"

temple.png

ブログ記事を作成する

1
2

cd test
hugo new post/new-post.md

new-post.mdの中身

1
2
3
4
5
6
7

---
title: "タイトル"
date: 2020-08-16T15:17:23+09:00
draft: false # trueの場合は表示されない
tags: ["python", "ros"] 
---
あとは，記事をmarkdownで記載
  • hugoコマンドで、public以下に静的ファイルが生成
1
2

cd test
hugo

Github Pages

Githubにリポジトリを作成する

Githubの画面右上のプラスアイコン「+」をクリックし，「New repository」を選択する． フォルダ名は，「アカウント名.github.io」にする． 公開URLは https://アカウント名.github.io となる．

github.png

参考：自分で作ったWebページをインターネット上に公開しよう！

publicフォルダをここに上げる．

Github Pagesではフォルダ直下のhtmlファイルしか，公開してくれないため，hugoで作成したtestフォルダ内のpublicフォルダを「アカウント名.github.io」にアップロードする． Githubへのアップロード方法は，初心者用：GitHubにファイルをアップロードする方法（超基本） を参考． testフォルダ自体は，別のリポジトリを作成してそちらで管理する.もしくは，branchで分ける．

その他

hugo 実行方法

ローカルのサーバーで確認

1

hugo server

ローカルのサーバーで確認(ドラフトも対象)

1

hugo server -D

latex 数式を使うための編集

/layouts/partials/add_mathjax.htmlを作成

1
2
3
4
5
6
7
8
9

<script>
    MathJax = {
        tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
        }
    };
</script>

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

/layouts/partials/site-header.htmlに追記

1

{{ partial "add_mathjax.html" . }}

参考：MathJaxを用いてHugoで数式を表現する

google Analytics

config.tomlに以下の行を追加

1

googleAnalytics = "測定ID"

Google Analyticsとの連携のための組み込みテンプレート({{ template “_internal/google_analytics_async.html” . }})が古いため変更を追加

layouts/partials/head.htmlを編集

1
2

- {{ template "_internal/google_analytics_async.html" . }}
+ {{- partial "analytics" . -}}

layouts/partials/analytics.htmlを作成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
<script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', '{{ . }}');
</script>
{{ end }}
{{ end }}

参考：Hugoで未だ対応していないgtag.jsを利用して Googleアナリティクスする

Sitemapを作成

layouts/sitemap.xmlを作成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{{ range .Data.Pages }}{{ if .IsPage }}
<url>
  <loc>{{ .Permalink }}</loc>
  {{ if not .Lastmod.IsZero }}
  <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>
  <changefreq>weekly</changefreq>
  {{ end }}
</url>
{{ end }}{{ end }}
</urlset>

layouts/robots.txtを作成

1

Sitemap : {{ $.Site.BaseURL }}sitemap.xml

config.tomlを編集

1

enableRobotsTXT = true

URL /sitemap.xml で表示されます。 https://yuhi-sa.github.io/sitemap.xml

参考：XMLサイトマップの作り方

作成したサイト