Hugoをインストール





Hugoとは

  • 静的サイトジェネレーターで簡単にシンプルなブログが作れる
  • GatsbyやHexoとは違いnode.js製ではない
  • Go言語で作られている
  • テーマが他の静的サイトジェネレーターより豊富
  • データベース不要で、ページの表示が速い

Hugoのダウンロード

Hugo GitHubでZipファイルをダウンロードする
windowsの場合はWindows-64bit.zipか32bitの場合はそちらををクリック

Hugoというフォルダを作成する

今回はC:\Hugo

C:\Hugoに\binフォルダを作る

binフォルダに解凍した、hugo.exeをいれる

C:\Hugo\binにパスを通しHugoをどこからでも使えるようにする

今回はコマンドラインからではなく、GUIでパスを通す

  1. C:\Hugo\binをコピーする
  2. ［コントロールパネル］→［システムとセキュリティ］→［システム］→［システムの詳細設定］→[環境変数(N)]
  3. Pathとか書かれた欄を選択し、編集をクリック
  4. 新規をクリックして、先ほどコピーしたC:\Hugo\binを貼り付ける
    これでパスが通る
    補足:何故かこの設定で通らず、not findと出たが、環境変数でこのパスの順番を一番上にしたらできるようになった

Hugo公式のクイックスタート通りに進めていく

1
hugo version

でインストールされているか確認

C:\Hugo\の場所で

1
hugo new site quickstart

でサイトを作成する

1
cd quickstart

で移動する

1
2
3
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo theme = "ananke" >> config.toml

これでanankeというテーマを追加する
echoでconfig.tomlにテーマannankeを追記する

1
hugo new posts/my-first-post.md

で記事を追加する

1
hugo server -D

でローカルサーバーを立ち上げるとサイトができている
プラウザでhttp://localhost:1313/にアクセスすると見れる

公式サイト通りやってみたがエラーが出た

http://localhost:1313/アクセスしたが画像が表示されなかった
テーマを変えると設定が色々と変わり、Dirが違ったりする
テーマのREADMEに、themeフォルダにあるexampleSiteフォルダのconfig.tomlや他のファイルをquickstarフォルダのconfig.tomlに上書きしてと書いてあるのでコピーする
その後,config.tomlの5行目、themesDir = “../..”の記述を消してhttp://localhost:1313/を開くと
画像が表示された

参考リンク

Hugo公式サイト