質問: hugoを使って吐き出した静的なHTMLやCSSファイル等をFTPからWebサーバにアップして、ブログが作る、ということを目標に作業をしています。(そもそも、大前提が間違ってたら教えて下さい。。) Themeは、Mainroadで、このインストール等は完了し、 ``` # サーバを起動 hugo server -D ``` このコマンドでサーバを起動すると、localhost:1313で、ある程度レイアウトされたサイトが見れます。 * ↓↓localhost:1313のページ↓↓ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/93e7c40649200ad5155fbb18d3a200fc.jpeg) しかし、このページと、"hugo"とコマンドを打って、生成された~/publicにあるindex.htmlをブラウザで開いた時の内容が異なります。index.htmlにはほとんどCSSや設定が反映されません。 * ↓↓public/index.htmlをブラウザで表示させた場合↓↓ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/3f1b6353ce829488df411367178230fa.jpeg) このindex.htmlにも、「さぶたいとる」などconfig.tomlで設定した内容が反映されてはいるのですが、肝心のCSSが反映されていなかったり、そもそもコンテンツも入っていなかったりと、必要な内容がほとんど反映されていません。。 テーマはMainroadを使っていますが、他のテーマでも同じ結果でしたので、そもそも私が理解できていないようです。。 最終的には、必要なファイルをftp経由で一式アップロードしたいです。一体、どのファイルをアップロードすればlocalhost:1313と同じデザインを得られるのでしょうか。 もし、分かる方がいれば教えて頂けると嬉しいです。
回答: publicフォルダをカレントフォルダにして、 静的ファイルのhttpサーバーを起動してみましょう。 python3があれば以下のコマンドで起動できます。 ``` > python3 -m http.server Serving HTTP on :: port 8000 (http://[::]:8000/) ... ``` そして、を開いてみましょう。 おそらくある程度は表示されると思います。 こうなる理由はHUGOのリソース参照が絶対パスだからです。 例えば`/dist/css/main-min.css`というパスを参照します。 index.htmlをブラウザにドロップして表示した場合、これらのファイルがファイルシステムのルート付近に置かれていることを期待します。 なので、静的ファイルサーバーを経由する必要があるのです。 追記 以下の設定を追加することで相対パスにして出力できます。 ``` relativeURLs = true ``` また、例えば以下の設定を入れてあるとして、coontentフォルダにコンテンツを入れているか確認しましょう。 ``` contentDir = "content" ``` ここから先に踏み込んでアドバイスするためにはconfig.tomlやフォルダツリーなどの開示が必要です。