kanta's spike

HugoとGitHub Pagesを使って、プログラミングの学習記録サイトを作りたいと思います。

なぜ記録するのか？

ハッカーになろう(How To Became A Hacker)で「3. World Wide Web を使う方法を学び、HTML を書くこと。」は必須スキルと紹介されています。

このスキルを身に付けるために、プログラミングの学習記録をつけたいと思います。

何を記録するのか？

ハッキングの学び方(How To Learn Hacking)で、ハッキングの学習段階が紹介されています。

この学習方法でプログラミングを学んでいきます。

本サイトでは、学んだ事や成果物を以下のルールで記録します。

どうやって記録するのか？

スタティックサイトジェネレータであるHugoを使ってサイトを作成します。 スタティックサイトジェネレータとは、静的コンテンツの作成に特化した手軽にWebサイトを構築できるツールです。

今回はあらかじめ用意したプログラミング学習記録用の Hugo Themeをベースにサイトを作成します。

サイトの作成

1. Hugoでサイトを作成
2. プログラミング学習記録用の Hugo Themeのインストール手順に従いインストールおよびセットアップ
3. 設定ファイル(config.toml)をカスタマイズ(titleやbaseURL、publishDirなどを変更してください) (参考: 作成例)

次に、動作確認します

ターミナルで以下を実行します。

hugo server --disableFastRender --ignoreCache --cleanDestinationDir

http://localhost:1313/にアクセスするとサイトを確認できます。

注意: baseURLに’https://kantas-spike.github.io/portfolio/'のようなサブディレクトリを指定した場合は、http://localhost:1313/portfolio/にアクセスする必要があります。

LiveReloadが有効になっているので、設定やページを変更した場合、直ちにブラウザ上に反映されます。

動作確認を終了するには、ターミナルで Ctrl+C を押します。

記事を追加します

Blogに記事を追加する場合は、以下を実行します。

hugo new blog/create-my-portfolio-site.md

すると、content/blog/create-my-portfollio-site.md が作成されます。 このファイルを編集して記事を書きましょう。

また、コマンドは以下のルールになっています。 本サイトでは、セクション名部分にblog、til、mytools、ihcを指定可能です。

hugo new セクション名/記事名.md

記事の内容が確認できたら、コミットしましょう。

注意: 記事ファイルのフロントマター部分のdraftがデフォルトでtrueになっています。 hugoは、ドラフト状態のファイルを出力しないため、記事が書けたら、draft行を削除するか、draft: falseに変更しましょう。

draft: false # デフォルトはtrue

最後に、サイトを生成します

ターミナルで以下を実行すると、publishDirで指定したフォルダにサイトが出力されます。

GitHub Pagesの利用する場合は、あらかじめ publishDir = "docs" に変更してください。

hugo --cleanDestinationDir

どこに公開するのか？

無料で簡単に始められるGitHub Pages を使ってサイトを公開します。 (参考: HugoのHosting & Deploymentページに、各種ホスティングサービスへのデプロイ方法が記載されています。)

GitHub Pagesの種類にあるように、 GitHub Pagesには以下の2種類あります。

1. ユーザー・組織ページ(URL: <https://<USERNAME|ORGANIZATION>.github.io/>)
2. プロジェクトページ(URL: https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/)

今回は、「2. プロジェクトページ」を採用します。

GitHub リポジトリの準備します

GitHub リポジトリを作成し、カスタマイズしたポートフォリオサイトの雛形をプッシュします。 (ただし、kantas-spike/portfolioをフォークした人はリポジトリの作成は不要です。)

docsをプッシュします

さらに、以下のコマンドによりサイトを生成し、 docs をリポジトリにプッシュします。

hugo --cleanDestinationDir

リポジトリのGitHub Pages を設定し、サイトを公開する

GitHubリポジトリページのSettingsページを表示します。 Pagesを選択し、Sourceに公開するサイトのブランチ名とフォルダ名を指定します。

今回は、Branch: main、フォルダ: /docsを選択します。

すると、以下のように公開サイトのURLが表示されます。

Your site is published at https://kantas-spike.github.io/portfolio/

このURLが、あなたのポートフォリオサイトになります。

以上で、サイトが公開されました。URLにアクセスできるまに少し時間(数分ぐらい？)がかかる場合があります。

まとめ

HugoとGitHub Pagesを使えば、手軽にサイトを作成できます。

プログラミングの学習記録を継続的に更新していきましょう。

また、今後、ポートフォリオサイト自体に機能やレイアウト、デザインを変更したくなると思います。 ポートフォリオサイトのテーマをインクリメンタルハッキングサイクルの対象にすると良さそうです。

参考

Hugoの簡単な使い方を動画にもまとめています。