GitHubPagesとHugoCongoでブログを作成する手順
目次
Hugoのテーマの一つCongoとGitHub Pagesでブログを作りました。
はじめに #
こんにちは、IKです。
自分が行ったことを文書として記録しておこうと考え、記述します。
今回は、参考にしたリンクと手順を箇条書きで書いていく形の簡単な文書であるため、適宜リンク先に飛び参考にしてください。
環境 #
| 筆者の環境 | |
|---|---|
| OS | Windows10 |
| デプロイ方法 | GitHub Pages |
| 使用テーマ（Hugo） | Congo |
Hugoのインストール #
まず、Hugoのインストール、環境構築から始めます。
下記のリンクが参考にします。
Hugoのテーマ設定前まで参考にして、Hugoの環境を構築してください。
Congoのインストール #
Hugoのテーマの一つであるCongoのインストールを行います。
下記のリンクを参考にします。
インストール手順の中の「Install using git」を参考にしてください。
具体的には、下記のコマンドを利用してください。
※ mywebsiteは任意の名称（quickstartなど）になります。
cd mywebsite
git init
git submodule add -b stable https://github.com/jpanther/congo.git themes/congo
Configの構造設定 #
Configのディレクトリ構造変更を行っていきます。
下記のリンクを参考にします。
「Organising content」 , 「Basic configuration」の順で参考にしてください。
Congo公式ドキュメント（Getting Started）
具体的には、下記の図のようなディレクトリ構造にします。
.
├── assets
│ └── img
│ └── author.jpg
├── config
│ └── _default
├── content
│ ├── _index.md
│ ├── about.md
│ └── posts
│ ├── _index.md
│ ├── first-post.md
│ └── another-post
│ ├── aardvark.jpg
│ └── index.md
└── themes
└── congo
- 変更手順 （quickstartは任意の名称）
- 既存の設定ファイル（quickstart直下の
.tomlファイル）を削除。 quickstart/themes/congo/configのディレクトリをquickstart直下にコピー。
Configの内容変更 #
Config（./config/_defalut/）の内容を変更していきます。
下記のリンクを参考にします。
Special thanks to sunset0916 !
- 変更手順
languages.en.tomlからlanguages.ja.tomlに変更。menus.en.tomlからmenus.ja.tomlに変更。- それぞれの
.tomlファイルの中身をsunest0916.netの内容を参考にしながら変更。
コンテンツやアイコンの追加 #
コンテンツやアイコン（favicon）を追加していきます
下記のリンクを参考にします。
- Content
Congo公式ドキュメント（Content Examples） - Favicon
Congo公式ドキュメント（Partials）
適宜、hugo serve -D でサーバを起動し、http://localhost:1313で確認しながら進めてください。
デプロイ方法 #
最後に、GitHub Pagesでブログを公開しましょう。
GitHub PagesでWebサイトを公開 #
まず、GitHub PagesでWebサイトを公開します。
下記のリンクを参考にします。
静的ページの生成 #
次に、ローカル環境で作成したサイトを静的ページ（HTML化）として生成します。
下記のリンクの「静的ページの生成」を参考にします。
ゼロからHugoでWebページをつくって，GitHub Pagesで公開するまで
- 手順
hugoコマンドを入力。quickstart/public直下にhtml、css、jsで作成されたページが作成される。
※public直下のindex.htmlを開いてもディレクトリの参照形式の関係で綺麗に表示されませんが、気にしないでください。
GitHub Pagesにブログを公開 #
最後に、作成した静的ページをGitHub Pagesに公開します。
「GitHub PagesでWebサイトを公開」の際に作成したローカルディレクトリにpublic直下のファイルをすべてコピーしてpushしてください。
※反映までに5分ほどかかることがあります。
ブログ内に画像を入れる方法 #
このブログを上げる際に手こずったのでそれについても書いておきたいと思います。
まず、ブログのヘッダ画像を入れる方法で困りましたが、
ヘッダ画像ファイルの名称にthumbを付けることで解決しました。
featureを付けると、ブログ内でヘッダ画像が冒頭に表示されます。
次に、ブログ内に画像を入れる方法で困りましたが、
Hugoの拡張機能（Hugo Extended）を入れることで解決しました。
具体的なコマンド
winget install Hugo.Hugo.Extended
役に立ったリンク
Resize : image this feature is not available in your current Hugo version
Windows Hugo
終わりに #
Hugo Congo インストールからGitHub Pagesに公開まで行いました。
Hugo Congoは公式ドキュメントがかなりわかりやすかったので基本的にはそこを参考に作成しました。
気が向いたらQiitaなどにも上げようと思います。
初めてのブログであるため、分かりにくい部分が多かったと思いますがご了承ください。
お読みいただきありがとうございました。