Hugoブログ

Hugo & GitHub Pages

せっかくHugoでブログを書いているので、HugoのインストールからGitHub Pagesにデプロイするまでの方法を紹介します。 公式チュートリアルは全部英語なので、これからHugoを使おうと思っている人の参考になれば。自分用にもメモ。

Hugoとは

一般的にウェブサイトは、ユーザーがページを訪問する度にウェブサーバが動的にHTMLファイルを生成する仕組みになっています。Hugoは、Markdownで書かれたコンテンツをHTMLとしてレンダリングし、ウェブサイトを事前に生成する静的サイトジェネレータです。ウェブサーバが動的にページをビルドする必要がないため、ページが表示されるまでの時間が短縮されます。静的サイトジェネレータはGo言語で書かれたHugoの他にも、Rubyで書かれたJekyllやOctopressなどがあります。

ローカルでセットアップ

①〜④でHugoのインストールからテーマの適用までをカバーします。
＊このステップが既に完了している方はこちらへ → HugoをGitHub Pagesにデプロイする

① Hugoをインストール

ここから最新verをダウンロードするか、Homebrewを使って$ brew install hugoでインストールしてください。

② 新しいプロジェクトを作成

$ cdでホームディレクトリに移動して、$ hugo new site <project> で新しいプロジェクトを作ります。 <project>にはプロジェクト名を入れてください。

③ テーマを選択

Hugo Themesレポジトリから、テーマを選んでthemeディレクトリにクローンしてください。 <theme_URL>はテーマリポジトリのURLと置き換えてください。

$ cd themes  
$ git clone <theme_URL>　

④ ローカルでプレビュー

$ hugo server -t <theme> でHugoをローカルで立ち上げて、http://localhost:1313/ でサイトが正しく表示されていることを確認してください。 問題がなければCtrl+Cでサーバを止めてください。

記事の追加は$ hugo new post/new-post.mdで簡単にできます。

HugoをGitHub Pagesにデプロイする

ここからはプロジェクトをGithub Pagesにホスティングをする方法を説明します。

まず、GitHubに2つのリポジトリを用意します。

1. <username>.github.ioリポジトリ (必ずこの名前を使ってください)
   
2. <project>リポジトリ（プロジェクト名や好きな名前を使ってください)

<username>.github.ioリポジトリはUser PagesというGitHub Pagesフォルダ専用のリポジトリで、必ずこのネーミングスキームである必要があります。ここにpublicフォルダを追加します。<project>リポジトリには、ブログのコンテンツを追加します。

リモートリポジトリを用意したら、ローカルリポジトリにリモートを追加して、全てをステージングエリアに登録しておきます。

$ cd <project>
$ git init
$ git remote add origin https://github.com/<username>/<project>.git
$ git add .

次に、$ hugo -t <theme>でpublicフォルダを作成して、<username>.github.ioリポジトリをサブモジュールとして追加します。 publicフォルダが既にある場合は$ rm -rf publicで削除してください。$ hugo -t <theme>は既に存在するpublicフォルダを削除してくれないので、毎回自分で削除する必要があります。

$ hugo -t <theme>
$ cd public
$ git init
$ cd ..
$ git submodule add https://github.com/<username>/<username>.github.io.git public

ここまでの作業をコミットし、 <project>リポジトリにpushします。

$ git commit -m "generate project"
$ git push origin master

最後に、<username>.github.ioリポジトリにpublicフォルダをpushします。

$ cd public
$ git remote add public https://github.com/<username>/<username>.github.io.git
$ git add .
$ git commit -m "generate static site"
$ git push public master

https://<username>.github.io にアクセスすればブログを確認できます。
postの内容を反映させるには、MDファイルのdraft=trueを削除してください。