静的サイトジェネレーター"hugo"をWindowsで使う時の最初の手順

PC・携帯・インターネット

静的サイトジェネレーター"hugo"をWindowsに導入した時の備忘録です。

ダウンロードしてデモサイトが表示できるようになるまでの流れをまとめました。

なお、使用したhugoのバージョンは0.64.1、テーマはMainroadの0.48です。
　
　

１．hugoのダウンロードとインストール

　(1)以下のサイトからOSに合わせたzipファイルをダウンロードして解凍する
　
　　　https://github.com/gohugoio/hugo/releases
　
　(2)フォルダ（例　c:\hugo\bin）を作成してhugo.exeを置く
　
　(3)hugo.exeのフォルダ(c:\hugo\bin)のpathを設定する
　　　Windowsのシステム
　　　→システムの詳細設定
　　　　→環境変数
　　　　　→システム環境変数
　　　　　　→新規
　　　　　　
　　　　　　変数名：path
　　　　　　変数値：c:\hugo\bin
　　　　　　
　(4)path設定の確認
　　　コマンドプロンプトでUsersフォルダ等で、
　　　hugo[enter]
　　　を実行して、

　　　Building sites・・・
　　　Error: ・・・
　　　と表示されればＯＫ
　　　（まだ必要なファイルがないからエラーになる）
　　　
　(5)サイトのファイルを生成する
　　　ファイルをc:\hugo\demo以下に生成する場合は、
　　　コマンドプロンプトでc:\hugoに移動して、
　　　hugo new site demo[enter]
　　　を実行すると、
　　　demoフォルダ以下にサイトのファイルが生成される。
　　　

２．テーマをダウンロードしてファイルをコピーする

　(1)以下のサイトでテーマを選んでzipファイルをダウンロードする
　
　　　https://themes.gohugo.io/
　
　　　（注）IEでは正しく表示されないのでChrome等で行う
　　　
　(2)ダウンロードしたファイルを解凍して
　　　c:\hugo\demo\themesにコピーする
　　　
　(3)コピーしたテーマファイルの中の
　　　exampleSiteフォルダの中のファイル・フォルダ一式を
　　　c:\hugo\demo以下にコピーする
　　　（既存のファイル・フォルダに上書きする）
　　　
　(4)テーマファイルの中の各フォルダ
　　　assets
　　　layouts
　　　static
　　　をc:\hugo\demo以下にコピーする
　　　（既存のファイル・フォルダに上書きする）
　　　
　(5)exampleSiteフォルダにコピーしたテーマフォルダの名称を変更する
　　　フォルダ名を
　　　c:\hugo\demo\config.toml内の
　　　　theme = “xxxx"の名称と一致するように変更する 　
　

３．テーマのデモを表示

　(1)コマンドプロンプトで
　　　c:\hugo\demoフォルダから
　　　hugo server[enter]
　　　を実行する
　　　
　　　Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
　　　Press Ctrl+C to stop
　　　と表示されたことを確認
　　　
　(2)Webブラウザで
　　　http://localhost:1313/
　　　にアクセスすると、テーマのデモが表示される
　　　

４．Webサイトの公開ファイルを生成

　(1)コマンドプロンプトで
　　　c:\hugo\demoフォルダから
　　　hugo[enter]
　　　を実行すると、
　　　c:\hugo\demo\public以下にファイルが生成される
　　　
　　　public以下のファイル一式がWebサーバーで公開するファイルです。
　　　
　
　
demo以下のフォルダは以下のようになっています

c:\hugo\demo\
　　　archetypes
　　　assets　　　・・・cssファイル
　　　content　　　・・・各記事のmarkdownファイル
　　　data
　　　layouts　　　・・・サイトの各パーツの設定
　　　public　　　・・・Webサイトで公開するファイル
　　　resources
　　　static　　　・・・画像ファイル
　　　themes　　　・・・ダウンロードしたテーマ
　　　
　　　config.toml・・・サイト全体の設定ファイル
　　　

記事のmarkdownファイルを追加する時は、
コマンドプロンプトで
hugo new xxxxx.md[enter]
又は
hugo new post/xxxxx.md[enter]（ブログの投稿記事）

（注）markdownファイルはUTF-8で保存すること

　
　
関連記事
ブログサイトの引越しとhugoの導入をしました
静的サイトジェネレーター"hugo"で作成したブログの記事をブログ村に登録できるようにする