VSCode+Hugo+GitHubでつくるブログ

VSCode+Hugo+GitHubでつくるブログ#02

～Hugoの執筆環境をセットアップしよう！～

はじめに

みなさんこんにちは！千葉達也です。
今回はVSCode+Hugo+GitHubでつくるブログシリーズの第2回として、Hugoの執筆環境を構築し、とりあえずブログ記事を投稿できるようにしたいと思います。

外部にブログを公開する設定を行うのは数回後になります！

それではよろしくお願いします！

対象

  • VSCode+Hugoでブログを作りたい方

前提

  • Windowsな環境であること
  • Hugoをインストールしてあること
  • GitとVSCodeをインストールしていること
    • まだな方は、こちらの記事を参考にインストールしてください。
    • GitHubとの連携まで済ませておいてください。

VSCodeでHugoを使う

このシリーズの目的の一つがVSCodeで執筆を行うことですので、VSCodeでHugoを使えるようにセットアップしてやる必要があります。ということで、

拡張機能のインストール

HugoをVSCodeで楽に扱うための拡張機能が複数存在しています。
公式のドキュメントには以下の7つが記載されています。

  • Front Matter
  • Hugo Helper
  • Hugo Language and Syntax Support
  • Hugo Themer
  • Hugofy
  • Prettier Plugin for Go Templates
  • Syntax Highlighting for Hugo Shortcodes

今回はHugofyをインストールして作業していきたいと思います。
手順は以下の通り。

  1. VSCodeの拡張機能のところにある検索フォームにHufofyと入力
  2. Hugofyを見つけたらインストール
  3. コマンドhugofy: versionを実行
    • Versionが表示されたらOK

これで完了です

Hugoの作業用フォルダの設定

ここではHugoの作業用フォルダを設定します。
手順は以下の通りです。

  1. お好きな場所にフォルダを一つ配置する
    • 名前は何でも良いです
  2. VSCodeでそのフォルダを開く
  3. コマンドhugofy: New Siteを実行する

Congratulations! Your new Hugo site is created in ディレクトリと表示され、フォルダ・ファイルが生成されたら完了です。

使いたいテーマをダウンロード＆作業フォルダにセット

Hugoの公式サイトから使いたいサイトのテーマを探し、ダウンロードしておいてください。
私は今回Stackというテーマを使用することにしました。ということで、Stackの場合の手順を記載します。

  1. StackのGitHubリポジトリにアクセス
  2. 最新のリリースをダウンロードして展開
    • 執筆時の最新版はVersion3.26.0でした
  3. 展開したテーマのフォルダhugo-theme-stack-X.XX.Xの名前をhugo-theme-stackに変更
  4. hugo-theme-stackをHugoの作業用フォルダに生成されたthemesというフォルダに移動
  5. VSCodeでコマンドhugofy: Set Themeを実行し、hugo-theme-stackを指定

サイトの起動確認

さぁではHugoの簡易サーバー機能でサイトを閲覧できるか確認してみましょう！
テーマStackの場合の手順は以下の通り。

  1. Hugoの作業フォルダフォルダ\themes\hugo-theme-stack\exampleSite\hugo.yamlをHugoの作業フォルダ直下にコピー
  2. 元々存在したhugo.tomlを削除
  3. VSCodeでコマンドhugofy: Start Serverを実行
  4. 既定のブラウザに次の画像のような画面が表示されたら完了

sample_page

とりあえず投稿してみる

続いて、とりあえずブログ記事を投稿できるように設定してみましょう。

  1. VSCodeでコマンドhugo: New Postを実行

  2. Enter filenameと表示されるので、ファイル名を入力

    • とりあえずtest.mdにしておきます
      かならず拡張子まで入力してください！

  3. Hugoの作業フォルダ\contentにpostというフォルダが生成されます
    また、その中にtest.mdが生成さていますので、これを開きます

  4. ファイルの上部には、

    1
2
3
4
5

    +++
title = 'Test'
date = 20XX-XX-XXTXX:XX:XX+09:00
draft = false
+++

    というように、（多分）TOML形式で設定が書かれています。
    なので、設定が記述されている部分よりも下にマークダウンで何か書いてみましょう。

    • 今回は以下のように書いてみました 
      1
2

      ## This is test page
Hello. **This is test page.**
    • 保存を忘れずに！

  5. コマンドhugofy: Start Serverを実行してみましょう。
    下のような画面下表示されると思います。

    test_1

  6. そうしたら、Testという記事を見てみましょう。
    下のような画面が表示されると思います。

    test_2

  7. できましたね！

まとめ

とりあえずこれでVSCode+Hugoでブログ記事を投稿できるようになりました。いや～よかった！
では、次回は今回使用しているテーマであるStackの設定をもう少し細かく詰めていこうと思います！
それではまたお会いしましょう！

参考文献

  • 今回は特にありません。
© 2024 - 2026 TATSUYA Chiba
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。