HugoとGithub pagesでブログサイトを構築する
はじめに
今回は静的サイトジェネレータHugo
を用いてブログサイトを構築・Github pagesにデプロイする手順を紹介していきたいと思います.
以前までは全てのアウトプットをQiitaに投稿していましたが,Qiitaに投稿するまでもないようなアウトプットなどを残せる場所を残したいと思い,このサイトを作りました.
Hugoのダウンロード
まずはHugoのインストールを行います.
このサイトよりzipファイルをダウンロードします.
以下のサイトの
今回はwindowsで構築するのでhugo_0.127.0_windows-amd64.zip
をダウンロードし任意の場所に回答します(*以後はhugo_path
とします).
環境変数の設定
hugoのコマンドが実行できるようにpathを通します. pathを通す場所は,先ほどのzipファイルの解凍先です.
サイトの初期化
ここから新しいサイトの構築をしていきます.
コマンドプロンプトを開いてhugo_path
に移動します.(pathを通した後に再起動などをすれば移動しなくてもいいかもしれません.)
hugo new site {任意の名前}
実行後,このようにいくつかのファイルが生成されます.
テーマの設定
Hugoには多くのテンプレートテーマが準備されています.
今回はHugo Themesの中のbeautifulhugo
というテーマを使用します.
gitよりテーマのファイルをクローンしてきます.(themeディレクトリで)
git clone https://github.com/halogenica/beautifulhugo.git
hugo.toml
に以下の内容を追記します.
theme = 'beautifulhugo'
これで起動できます.
hugo serve
細かい設定について
細かい設定などはbeautifulhugo
の中のexample site
の中に書いてあるのでそちらをディレクトリごとコピーすればいいかなと思います.
記事の作成
以下のコマンドを実行して新しいファイルを作成します.
hugo new post/{日付}/{ファイル名}.md
私は画像を記事ごとのディレクトリに分けて保存しているため{日付}
というディレクトリを間に挟んでいます.
記事のヘッダーについて
各記事のヘッダーは以下のように記述します.
---
title: {タイトル}
subtitle: {サブタイトル}
date: {投稿日}
tags: {タグ,複数指定する場合は,[]で囲む}
bigimg: [{src: {パス}, desc: {キャプション?}}]
---
また先ほどのhugo new post/{日付}/{ファイル名}.md
などで新規ファイルを作成するとヘッダーのデフォルトが
+++
title:
subtitle:
+++
みたいな感じになりますが,そちらはarchetype/default.md
の中身を書き換えれば反映させることができます.
Github pagesの利用
ここからは実際にブログとして運用するためにGithub pagesへのデプロイ方法について書いていきます.
まず適当はリポジトリを作成します.今回はyuudee_blog
とします.
次にローカルのブログ用ディレクトリとリモートリポジトリを接続します.
git remote add origin {リポジトリのURL}
何か適当な記事を作成します.
コマンドラインでhugo
と入力します.これによって記事用に作成したmarkdownファイルがHTMLに変換されwebページとして表示できるようになります.
{サイト名}以下のディレクトリを全てコミットします.この時hugo
コマンドによって生成されたディレクトリをdocs
にしないとGithub pagesでデプロイできない?ようなのでhugo.toml
に以下の内容を追記します.
publishDir = "docs"
Github側にコミットしたらsetting
に進みpages
の項目を以下のように変更します.
画像を埋め込みたい際にはstatic
ディレクトリにimages
というフォルダを作成し,その中に画像を入れていきます.
参照する際はhttps://{ユーザ名}.github.io/{リポジトリ名}/images/{画像名}
のような形式で書くようにしてください
(2024/09/14追記)
現在はこのテーマからこのサイトに移行しました.