静的サイトジェネレーター"hugo"をWindowsで使う時の最初の手順
静的サイトジェネレーター"hugo"をWindowsに導入した時の備忘録です。
ダウンロードしてデモサイトが表示できるようになるまでの流れをまとめました。
なお、使用したhugoのバージョンは0.64.1、テーマはMainroadの0.48です。
1.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: ・・・
と表示されればOK
(まだ必要なファイルがないからエラーになる)
(5)サイトのファイルを生成する
ファイルをc:\hugo\demo以下に生成する場合は、
コマンドプロンプトでc:\hugoに移動して、
hugo new site demo[enter]
を実行すると、
demoフォルダ以下にサイトのファイルが生成される。
2.テーマをダウンロードしてファイルをコピーする
(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"の名称と一致するように変更する
3.テーマのデモを表示
(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/
にアクセスすると、テーマのデモが表示される
4.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"で作成したブログの記事をブログ村に登録できるようにする