UbuntuにHugoをインストール

Hugoは、静的サイトジェネレーターの中でも非常に人気があり、シンプルで高速なサイト作成を支援します。本記事では、UbuntuにHugoをインストールし、設定する方法について、詳細に説明します。これから、手順ごとに進めていきますので、実際にUbuntu環境でHugoを使ってウェブサイトを構築する準備を整えていきましょう。

Hugoのインストール方法

1. 必要なパッケージの更新

   関連記事

   • 
     ミオスタチン抑制法と筋肉増加
   • 
     甲状腺低下症と頭痛の関係
   • 
     拒否を乗り越える方法

   最初に、Ubuntuのパッケージリストを最新の状態に更新します。これにより、必要なパッケージを問題なくインストールできます。

   bash
   CopyEdit
   sudo apt update
   sudo apt upgrade
   

2. Snapを利用したインストール

   UbuntuにはSnapパッケージが標準でインストールされている場合が多いです。Snapを使うと、簡単にHugoをインストールできます。以下のコマンドでHugoをインストールします。

   bash
   CopyEdit
   sudo snap install hugo --channel=extended
   

   ここで、--channel=extendedは、Hugoの「Extended」バージョンをインストールするためのオプションです。Extendedバージョンには、追加のCSSやJavaScriptの処理機能が含まれています。これにより、より高度なカスタマイズが可能になります。

3. インストールの確認

   インストールが完了したら、以下のコマンドでインストールが成功したかを確認します。

   bash
   CopyEdit
   hugo version
   

   上記のコマンドを実行すると、インストールされたHugoのバージョンが表示されます。これで、Hugoが正しくインストールされたことが確認できます。

Hugoのプロジェクト作成

1. 新しいサイトの作成

   Hugoでは、新しいプロジェクトを作成するために以下のコマンドを使用します。プロジェクトのディレクトリを指定して、新しいサイトを作成します。

   bash
   CopyEdit
   hugo new site <サイト名>
   

   例えば、mywebsiteという名前のサイトを作成する場合、以下のコマンドを実行します。

   bash
   CopyEdit
   hugo new site mywebsite
   

   このコマンドにより、新しいプロジェクトフォルダが作成され、その中に必要な初期ファイルとディレクトリ構造がセットアップされます。

2. テーマの追加

   Hugoはテーマを使ってウェブサイトのデザインを簡単にカスタマイズできます。テーマを追加するには、以下の手順を踏みます。

   • Hugoのテーマは、GitHubなどから取得することができます。例えば、hugo-theme-anankeというテーマを使用する場合、以下のコマンドを実行してテーマをダウンロードします。

     bash
     CopyEdit
     cd mywebsite
     git init
     git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
     

   • これで、themesフォルダにテーマが追加されます。

3. 設定ファイルの編集

   新しいサイトを作成した後、config.tomlという設定ファイルを編集して、テーマを適用します。このファイルはプロジェクトのルートディレクトリにあります。エディタで開き、以下の内容を追加します。

   toml
   CopyEdit
   baseurl = "https://example.com"
   languageCode = "ja"
   title = "私のウェブサイト"
   theme = "ananke"
   

   ここで、baseurlにはサイトのURL、languageCodeには言語コード、titleにはサイトのタイトル、themeには使用するテーマ名を設定します。

4. コンテンツの作成

   Hugoでは、コンテンツを作成する際に、Markdownファイルを利用します。新しいコンテンツページを作成するには、以下のコマンドを使います。

   bash
   CopyEdit
   hugo new posts/my-first-post.md
   

   これにより、content/posts/my-first-post.mdというファイルが作成され、Markdown形式で記事を執筆できるようになります。このファイルをエディタで開き、コンテンツを追加します。

   markdown
   CopyEdit
   ---
   title: "最初の投稿"
   date: 2025-02-24T15:00:00+09:00
   draft: true
   ---
   
   ここに記事の内容を書きます。
   

   draft: trueと設定しておけば、公開前の下書き状態にできます。

5. ローカルサーバーの起動

   サイトの作成が完了したら、ローカルサーバーを立ち上げて、ブラウザでサイトを確認できます。以下のコマンドでローカルサーバーを起動します。

   bash
   CopyEdit
   hugo server
   

   コマンドを実行後、ブラウザでhttp://localhost:1313にアクセスすると、作成したサイトが表示されます。

サイトのビルドと公開

1. サイトのビルド

   サイトをビルドして静的なHTMLファイルを生成するには、以下のコマンドを使用します。

   bash
   CopyEdit
   hugo
   

   このコマンドは、publicというディレクトリを生成し、その中にサイトの最終的なHTMLファイルを保存します。

2. ウェブサーバーへのアップロード

   ビルドされたサイトをインターネット上に公開するには、publicディレクトリ内のファイルをウェブサーバーにアップロードします。通常、FTPやSFTPを使って、サーバーにファイルを転送することが一般的です。

終わりに

Hugoは、高速でシンプルな静的サイトジェネレーターで、静的なブログやポートフォリオサイト、企業のウェブサイトなどの作成に非常に適しています。UbuntuでHugoをインストールしてプロジェクトを作成する方法を紹介しましたが、これをもとに独自のカスタマイズを加えて、自分だけのウェブサイトを作成することができます。