HUGOで作成したサイトをFTP経由でサーバにアップしたい

Question

Hugoで出力したファイルをFTP経由でアップしてサイトに表示したい

hugoを使って吐き出した静的なHTMLやCSSファイル等をFTPからWebサーバにアップして、ブログが作る、ということを目標に作業をしています。（そもそも、大前提が間違ってたら教えて下さい。。）

Themeは、Mainroadで、このインストール等は完了し、

# サーバを起動
hugo server -D

このコマンドでサーバを起動すると、localhost:1313で、ある程度レイアウトされたサイトが見れます。

• ↓↓localhost:1313のページ↓↓

しかし、このページと、"hugo"とコマンドを打って、生成された~/publicにあるindex.htmlをブラウザで開いた時の内容が異なります。index.htmlにはほとんどCSSや設定が反映されません。

• ↓↓public/index.htmlをブラウザで表示させた場合↓↓

このindex.htmlにも、「さぶたいとる」などconfig.tomlで設定した内容が反映されてはいるのですが、肝心のCSSが反映されていなかったり、そもそもコンテンツも入っていなかったりと、必要な内容がほとんど反映されていません。。

テーマはMainroadを使っていますが、他のテーマでも同じ結果でしたので、そもそも私が理解できていないようです。。

最終的には、必要なファイルをftp経由で一式アップロードしたいです。一体、どのファイルをアップロードすればlocalhost:1313と同じデザインを得られるのでしょうか。

もし、分かる方がいれば教えて頂けると嬉しいです。

Answer 1

publicフォルダをカレントフォルダにして、
静的ファイルのhttpサーバーを起動してみましょう。

python3があれば以下のコマンドで起動できます。

> python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

そして、http://localhost:8000を開いてみましょう。
おそらくある程度は表示されると思います。

こうなる理由はHUGOのリソース参照が絶対パスだからです。
例えば/dist/css/main-min.cssというパスを参照します。

index.htmlをブラウザにドロップして表示した場合、これらのファイルがファイルシステムのルート付近に置かれていることを期待します。

なので、静的ファイルサーバーを経由する必要があるのです。

追記

以下の設定を追加することで相対パスにして出力できます。

relativeURLs = true

また、例えば以下の設定を入れてあるとして、coontentフォルダにコンテンツを入れているか確認しましょう。

contentDir = "content"

ここから先に踏み込んでアドバイスするためにはconfig.tomlやフォルダツリーなどの開示が必要です。

Comments

[keiji_kc]

アドバイスありがとうございます！

さらに色々とやったら、index.htmlをブラウザにドロップしても、レイアウトが保持されるようになりました。

しかし、pythonでサーバを立ち上げても、index.htmlを直接ブラウザで呼び出しても、肝心の記事コンテンツが読み込まれません。。

もし、アドバイス頂けましたら幸いです！

[keiji_kc]

ありがとうございます。

contentDirの設定で無事見ることができました！

[nobonobo]

よかった！