Hugo + GitHub Pagesでブログを作った話
Page content
Hugo + GitHub Pagesを使ってブログを作った。
Hugo
静的サイトジェネレータ。テーマが豊富でカスタマイズ性が高い。
markdownでブログが書けるなんて素晴らしい。
導入
自分のUbuntu 18.04環境では、aptだとバージョンが古かったので、snapでインストール。
$ sudo snap install hugo --channel=extended
$ cd /usr/bin
$ sudo ln -s /snap/bin/hugo hugogitからでも取れる。
$ git clone https://github.com/gohugoio/hugo.git
$ cd hugo
$ go install --tags extendedGitHub Pages
GitHub上の静的ファイルをwebページとして公開する機能。
Hugoで生成したファイルをGitHub Pagesで公開する感じ。
導入
- GitHubでレポジトリを作る
- レポジトリ名は、
[github_user].github.ioにする
- レポジトリ名は、
- このリポジトリ上の静的ファイルが
https://[github_user].github.ioに公開される
ここから実際にブログを作る。
GitHub上にレポジトリを2つ用意
- blog
- hugoのソースや記事のmdファイルを配置するレポジトリ
- [github_user].github.io
- この名前で作る
- 静的ファイルを配置するレポジトリ
Hugoで静的サイトを作成
$ hugo new site blog
$ cd blogHugoの設定
テーマを入れる
- テーマ一覧から気に入ったのを選ぶ
- 「Demo」を押すとサンプルが見れて楽しい
blog/thmem以下にテーマを落とす$ cd themes $ git clone https://github.com/[theme_name] $ cd ../
- テーマ一覧から気に入ったのを選ぶ
Hugoの設定ファイルを編集する
blog/config.tomlを編集これ以外にもテーマによって設定項目が色々あるが、テーマのページを見ると大抵書いてある
baseURL = "https://[github_user].github.io/" languageCode = "ja" title = "My Blog" theme = "[theme_name]"
記事を作成
$ hugo new post/first.mdこんな記事ができる。
---
title: "First"
date: 2019-04-15T00:00:00+09:00
draft: true
---draft: trueだと未公開になるので、公開する際はfalseにする- markdownで記事を書く
- 記事のデフォルト項目は
archetypes/default.mdで弄れる
- 記事のデフォルト項目は
ローカルサーバで確認
$ hugo server --buildDrafts --watch--buildDraftsをつけるとdraft: trueの記事もプレビューできる--watchをつけておくと記事を更新するたびにプレビューも更新される- http://localhost:1313 で確認
hugoコマンドでビルドし公開用ディレクトリが作成されるけど、その前にGihHub Pagesとの連携の準備をします。
GitHubに公開
「blog」をpushする
$ git init $ git remote add origin git@github.com:[github_user]/blog.git $ git add -A $ git commit -m "initial commit" $ git push origin master「blog」の公開用ディレクトリをサブモジュール化する
hugoでビルドすると、blog/publicに公開用ファイル一式が作成されるなので、
[github_user].github.ioレポジトリをサブモジュールとしてblog/publicに追加しておくと、ビルドしてpushすることで、GitHub Pagesを使ってブログが公開できる$ git submodule add git@github.com:[github_user]/[github_user].github.io.git public
ビルドして公開
$ hugo $ cd public $ git add -A $ git commit -m "initial article" $ git push origin master
少し待ってhttps://[github_user].github.ioにアクセスすると公開されてるはず。
おわり
自動化とか諸々はまたの機会に。
以下参考サイト
