HugoとGithub pagesでブログサイトを構築する

はじめに

今回は静的サイトジェネレータHugoを用いてブログサイトを構築・Github pagesにデプロイする手順を紹介していきたいと思います．

以前までは全てのアウトプットをQiitaに投稿していましたが，Qiitaに投稿するまでもないようなアウトプットなどを残せる場所を残したいと思い，このサイトを作りました．

まずはHugoのインストールを行います．

このサイトよりzipファイルをダウンロードします．

以下のサイトの hugoのインストール今回はwindowsで構築するのでhugo_0.127.0_windows-amd64.zipをダウンロードし任意の場所に回答します(＊以後はhugo_pathとします)．

hugoのコマンドが実行できるようにpathを通します． pathを通す場所は，先ほどのzipファイルの解凍先です．

ここから新しいサイトの構築をしていきます．

コマンドプロンプトを開いてhugo_pathに移動します．(pathを通した後に再起動などをすれば移動しなくてもいいかもしれません．)

hugo new site {任意の名前}

実行後，このようにいくつかのファイルが生成されます．

initialized_hugo

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へのデプロイ方法について書いていきます．

まず適当はリポジトリを作成します．今回はyuudee_blogとします．

次にローカルのブログ用ディレクトリとリモートリポジトリを接続します．

git remote add origin {リポジトリのURL}

何か適当な記事を作成します．

コマンドラインでhugoと入力します．これによって記事用に作成したmarkdownファイルがHTMLに変換されwebページとして表示できるようになります．

{サイト名}以下のディレクトリを全てコミットします．この時hugoコマンドによって生成されたディレクトリをdocsにしないとGithub pagesでデプロイできない？ようなのでhugo.tomlに以下の内容を追記します．

publishDir = "docs"

Github側にコミットしたらsettingに進みpagesの項目を以下のように変更します．

githubpages_setting

画像を埋め込みたい際にはstaticディレクトリにimagesというフォルダを作成し，その中に画像を入れていきます．

参照する際はhttps://{ユーザ名}.github.io/{リポジトリ名}/images/{画像名}のような形式で書くようにしてください

現在はこのテーマからこのサイトに移行しました．