teccon forum

Hugoでのウェブサイト構築実践

5 min read

Hugoによるウェブサイト制作

Hugoは、高速な静的サイトジェネレーターで、簡単にSEO対応やレスポンシブデザインのウェブサイトを作成できるツールです。本記事では、Hugoを用いたウェブサイト制作の実践的な方法について、専門家向けに解説します。Hugoのインストールから、サイトの構築、デプロイメント、SEO最適化まで、段階ごとに体系的なアプローチを示します。

Hugoの概要と特徴

Hugoは、Go言語で書かれた静的サイトジェネレーターであり、以下の特徴を持ちます。

  • 超高速ビルド速度: Hugoは、数千ページ規模のサイトでも数秒でビルドを完了できます。
  • 簡単な設定: 設定ファイルはシンプルで、直感的に操作できます。
  • テンプレートシステム: 標準テンプレートやカスタムテンプレートを容易に活用でき、カスタマイズの自由度が高い。
  • マークダウン対応: コンテンツはマークダウン形式で記述し、HTMLに自動変換できます。

Hugoのインストール

前提条件

Hugoを使用するには、以下の要件を満たす必要があります。

  • Go言語が動作する環境 (macOS, Windows, Linux)
  • Gitのインストール（デプロイやバージョン管理に必要）

インストール手順

  1. Homebrew（macOS/Linux）:

    brew install hugo

  2. Windows（Chocolatey）:

    choco install hugo -confirm

  3. バイナリの直接ダウンロード:
    Hugoの公式サイトから最新のバイナリをダウンロードし、PATHに追加します。

インストール後、以下のコマンドで動作確認を行います。

hugo version

新規サイトの作成

インストールが完了したら、以下のコマンドで新しいサイトを作成します。

hugo new site my-site

これにより、my-siteディレクトリにサイト構造が生成されます。次に、テーマを選択します。Hugo公式のテーマリポジトリから好みのテーマを選び、Gitでクローンします。

テーマのインストール

例として、Anankeテーマをインストールします。

cd my-site
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

config.tomlファイルを開き、テーマを設定します。

theme = "ananke"

コンテンツの作成

Hugoでは、コンテンツをマークダウン形式で作成し、以下のコマンドで新規ページを追加できます。

hugo new posts/my-first-post.md

これにより、content/posts/ディレクトリに新しいマークダウンファイルが作成されます。作成されたファイルを編集し、以下のようにコンテンツを記述します。

 
## 初めての投稿
 
これはHugoで作成した初めての投稿です。Hugoを使うことで、静的サイトを高速に構築できます。

draftの値をtrueにしておくと、デフォルトでは下書き扱いになります。公開する際にはfalseに変更します。

ローカルサーバーの起動

ローカルでサイトのプレビューを確認するため、以下のコマンドを実行します。

hugo server -D

このコマンドにより、下書きも含めた状態でローカルサーバーが起動し、http://localhost:1313でサイトを確認できます。

ビルドとデプロイ

サイトが完成したら、ビルドして静的ファイルを生成します。

ビルド
次のコマンドでサイトをビルドします。

hugo

public/ディレクトリに静的ファイルが生成されます。このファイルをウェブサーバーにアップロードするだけで公開できます。

Hugoで生成された静的ファイルは、さまざまなホスティングサービスにデプロイできます。一般的なデプロイ先として、以下のサービスがあります。

  • GitHub Pages: HugoはGitHub Pagesとの相性が良く、簡単にデプロイできます。
  • Netlify: 自動ビルドとデプロイが可能な静的サイトホスティングサービスです。
  • Vercel: モダンなフロントエンド向けのホスティングサービスで、Hugoにも対応しています。

GitHub Pagesへのデプロイ

  1. リポジトリを作成します。
  2. publicディレクトリをGitHub Pages用のブランチとしてプッシュします。
cd public
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/repository.git
git push origin gh-pages

Graph View