ハーマ先生
は～い！今日の講義を担当させていただくハーマ先生です！
ハーマ先生って誰やねんと思ったら記事の最下部に説明書いてあるから見てね～(投げやり)
世界一わかりやすい！～講義形式で学ぶサイト制作～:第15回
ハーマ先生
こんにちは！今日は、Hugoという静的サイトジェネレーターについて詳しく解説していくよ。HugoはGo言語をベースにしているから、非常に高速で、特に大規模な静的サイトのビルドに向いているんだ。
Go言語って何？そして、Hugoは他のツールとどう違うの？
ウィーブ・ウェブ君
ハーマ先生
Go言語はGoogleが開発したプログラミング言語で、特に高速処理が得意なんだ。だから、Hugoはサイトを作るスピードがとても速いんだよ。他の静的サイトジェネレーターと比べても、数千ページのサイトでも一瞬でビルドできるのが大きな特徴だね。
1. Hugoでできること
ハーマ先生
まず、Hugoで何ができるか見てみよう。
多言語対応もできて、大規模なサイトを高速にビルドできるなんてすごいね！
ウィーブ・ウェブ君
- 高速ビルド: Hugoは、大規模なサイトでも非常に高速にHTMLファイルを生成できる。たとえば、何千ページのブログサイトでも数秒でビルド可能なんだ。
- 多言語対応: Hugoは、サイトを複数言語で構築できる。国際的なプロジェクトにも対応できる点が強みだね。
- テーマとカスタマイズの柔軟性: 豊富なテーマが用意されており、それをベースに自分好みにカスタマイズ可能。
- テンプレートエンジン: Hugoは、Goのテンプレートエンジンを活用して、効率よくコンテンツの生成ができる。
2. Hugoのインストール方法
Hugoを使ってみたいけど、まずはどうやってインストールすればいいの？
ウィーブ・ウェブ君
ハーマ先生
Hugoは、インストールも簡単だよ。まずは自分のOSに合わせてインストール手順を説明するね。
ステップ1: Hugoのインストール
Hugoは、ホームページやブログを構築するためのツールだけど、インストールはとても簡単だよ。
- macOS:
- Homebrewを使ってインストール：bashコードをコピーする
brew install hugo
- Homebrewを使ってインストール：bashコードをコピーする
- Windows:
- Chocolateyを使ってインストール：bashコードをコピーする
choco install hugo-extended -confirm
- Chocolateyを使ってインストール：bashコードをコピーする
- Linux:
- パッケージマネージャー（aptやdnfなど）を使ってインストール。bashコードをコピーする
sudo apt install hugo
- パッケージマネージャー（aptやdnfなど）を使ってインストール。bashコードをコピーする
ステップ2: Hugoのバージョン確認
インストールが成功したら、次のコマンドでバージョンを確認してみよう。
hugo version
ハーマ先生
これで、Hugoのインストールは完了だよ！
3. 新しいHugoプロジェクトを作成する
ハーマ先生
インストールできた！次はどうするの？
次に、Hugoを使って新しいサイトを作成しよう。ほんの数秒でプロジェクトを作ることができるんだ。
ウィーブ・ウェブ君
ステップ3: 新しいサイトの作成
以下のコマンドで、新しいHugoサイトを作成するよ。
hugo new site my-hugo-site
cd my-hugo-site
ハーマ先生
これで、Hugoのプロジェクトが作成されたよ。my-hugo-siteというフォルダが作られて、その中に必要なファイルが自動で生成されているんだ。
4. テーマの導入とカスタマイズ
ハーマ先生
でも、デザインがシンプルすぎる。もっとおしゃれにしたいな…
それなら、Hugoのテーマを使おう！Hugoには豊富なテーマが用意されているから、それを使ってデザインを一気にアップグレードできるよ。
ウィーブ・ウェブ君
ステップ4: テーマのインストール
- Hugo Themes で好きなテーマを選び、GitHubからクローンする。
git init
git submodule add https://github.com/themename/theme-name.git themes/theme-name
config.tomlファイルでテーマを指定。
theme = "theme-name"
ハーマ先生
これで、テーマが適用されて見た目が一気に変わるよ！
ウィーブ・ウェブ君
5. コンテンツの作成
ウィーブ君: 「次は、サイトの中身を作ってみたいんだけど、どうすればいい？」
シャキシャキ先生: 「」
次は、サイトの中身を作ってみたいんだけど、どうすればいい？
ウィーブ・ウェブ君
ハーマ先生
Hugoでは、Markdownで記事を書いて、それを静的なHTMLに変換できるんだよ。次は実際にコンテンツを作ってみよう！
ステップ5: 記事を作成
以下のコマンドで新しい記事を作成するよ。
hugo new posts/my-first-post.md
このコマンドを実行すると、content/posts/フォルダにMarkdownファイルが生成されるんだ。このファイルを開いて記事を書いてみよう。
---
title: "初めてのHugoサイト"
date: 2024-10-05
draft: true
---
## こんにちは、世界！
これは私の初めてのHugoで作成したブログです。
ウィーブ君: 「これでMarkdown形式で記事を書いて、簡単に静的なページが生成されるんだね！」
これでMarkdown形式で記事を書いて、簡単に静的なページが生成されるんだね！
ウィーブ・ウェブ君
6. サイトをビルドしてプレビューする
ハーマ先生
次に、Hugoでサイトをビルドして、ローカルサーバーでプレビューしてみよう。
ステップ6: サイトのビルドとプレビュー
以下のコマンドで、Hugoの開発サーバーを起動するよ。
hugo server
ブラウザでhttp://localhost:1313にアクセスすると、作成したサイトが表示されるよ。記事を書き換えるたびに、ページが自動的に更新されるのも便利だね。
7. Hugoのビルド高速化の秘密
Hugoが速いって聞いたけど、どうしてそんなに高速なの？
ウィーブ・ウェブ君
ハーマ先生
Hugoが速い理由は、Go言語の特性を最大限に活かしているからだよ。Go言語は、並列処理が得意だから、大量のページを一気にビルドできるんだ。たとえば、1,000ページ以上あるブログサイトでも、数秒でビルドが終わるよ。
8. Hugoのデプロイ方法
ローカルでサイトを確認できたけど、これをインターネットで公開するにはどうすればいいの？
ウィーブ・ウェブ君
ハーマ先生
Hugoのサイトをインターネットに公開するには、いくつかの方法があるけど、最も簡単なのがGitHub Pagesだよ。GitHub Pagesは無料でホスティングできて、Hugoとも相性が良いんだ。
ステップ7: GitHub Pagesへのデプロイ
- GitHubでリポジトリを作成。
- 以下のコマンドでサイトをビルドし、GitHubにプッシュ。
hugo
cd public
git init
git remote add origin https://github.com/username/username.github.io.git
git add .
git commit -m "Initial commit"
git push -u origin master
ハーマ先生
これで、GitHub PagesにHugoサイトがデプロイされるよ。数分後には、https://username.github.ioでサイトが公開されるはずだ。
まとめ
Hugoの特徴を振り返る:
- 高速なビルド: Go言語をベースにしているため、大規模なサイトでも数秒でビルドが可能。
- テーマの柔軟性: 豊富なテーマが用意されており、デザインを自由にカスタマイズできる。
- 多言語対応: 多言語のウェブサイトも簡単に作成でき、国際的なプロジェクトにも最適。
- GitHub Pagesと連携可能: 簡単にGitHub Pagesでホスティングでき、無料でインターネット上にサイトを公開できる。
次のステップでは、さらに高度なプラグインやSEO対策の設定、サイトの高速化のテクニックも学んで、プロフェッショナルなサイト作りにチャレンジしてみましょう！
コメント