Hugoで小説サイトを作成する　その１

2022-07-08

Hugoとは

Hugoは、Go言語で記述された、高速で動く静的サイトジェネレーターです。
動的サイトとは異なり、作成されたコンテンツを公開するため、訪問者はストレスを感じません。また、作成者にとっても、少ないギガで公開できるうえ、セキュリティ的にもかなり安全で、労力を必要としません。（サーバーのパスワードを堅牢にするくらい？）データをローカルに置き、ビルドされたPublicフォルダの中身をサーバーにアップロードするだけなので、サイト運営がかなり楽になります。Markdownで書いていくため慣れないかもしれませんが、慣れない人は文章を打った後に、変換サイトなどで変換して貼り付けるだけでオッケーです。また、定義すれば、html"も本文内で使用できます。（でも面倒なのでお勧めしない）

☆持っていたほうが良い書籍
Windows関連
Go言語
html"、CSS　

☆環境。
OS: Windows10
エディタ：Sublime Text4
FTPクライアント：Filezilla
サーバー：さくらレンタルサーバー　ライトプラン
CMS:Hugo v0.101
テーマ：Mainroad

（１）Hugoのインストール（拡張バージョンを使う場合）

　今回は使用しませんが、使用するときのために備忘録として残します。
　最初に、Windowsパッケージの「Chocolatey」をPowerShellを管理者権限で起動しインストールしたうえで、「Go」と「Git」と「hugo extented」をインストールします。下記サイトを参考になさってください。とてもわかりやすいです。

Windows10にChocolateyをインストールする
 WindowsでGoの開発環境構築
 WindowsにGitをインストールする手順

powershell

choco install hugo-extended -confirm

インストールされたか確認

hugo version

インストールされていたら

hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio

ってな感じのが出てきます。

（2）Hugoのインストール(拡張バージョンを使用しない場合)

choco install hugo -confirm

インストールされていたら(上と同じコマンドで確認)

hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66 windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio

と、出てきます。

Pathを通す必要があるかもしれませんので、その時は通してください。詳しくはこちらをどうぞ→Windows10で実行ファイルへのパスを通す手順

Hugoがインストールされたら、Mainroadテーマでサイト作成にかかります。コマンドプロンプトを立ち上げ、ここからは適当なフォルダへ移動してください。私はいつもドキュメントフォルダでサイト作成をしておりますので、

cmd（コマンドプロンプト）

>cd ドキュメント
>hugo new site <name of site>

「そよそよ」というサイトを作るなら、hugo new site soyo2とかにします。日本語でも作れますが、コマンド打つときにいちいち日本語に変えるのが面倒くさいので、英語入力したほうが良いです。

>hugo new site soyo2

Congratulations! Your new Hugo site is created in C:\soyo2.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

>cd soyo2

Mainroadのインストール

　Mainroadをインストールします。gitを使うと楽なのですが、Mainroadは拡張版ではなくても動きますので、ついでにGitも使わないやり方で行きます。 Mainroadへ移動して、「code」という緑色のボタンをクリックすると、一番下に「ダウンロードZIP」が出てきますので、クリックしてダウンロード　→　解凍　→　Mainroad-masterフォルダをThemeフォルダへ移動します。この時私はリネームしてMainroadにしています。

私はもともとmarkdown形式の小説のコンテンツを持っているので、６００以上の小説をcontentフォルダへコピーします。こんな構成になります。

├─archetypes
├─content
│  ├─ai（愛だと信じていた）
│   (他の小説のコンテンツがたくさん並ぶ) 
│  └─yukino（雪のように舞う桜の中で）
├─data
├─layouts
├─public  
├─resources
│  └─gen
│      ├─assets
│      └─images
├─static
│  ├─css
│  └─img
├─themes
│     └─mainroad　⇐解凍したフォルダ
└─config.toml

テキストエディタを立ち上げ（私の場合はSublime Text）config.tomlファイルに以下を付け加えます。

theme: "Mainroad"

上書き保存してビルドし、ローカルサーバーに立ち上げます。

>hugo
>hugo server
Start building sites …
hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66 windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio

                   | JA
-------------------+------
  Pages            | 883
  Paginator pages  |  82
  Non-page files   |   9
  Static files     |  10
  Processed images |   0
  Aliases          | 135
  Sitemaps         |   1
  Cleaned          |   0

Built in 8799 ms
Watching for changes in C:\Users\hoge\{archetypes,content,data,i18n,layouts,static,themes}
Watching for config changes in C:\Users\hoge\Duments\soyo\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

ブラウザを立ち上げて、http://localhost:1313/ にアクセスすると、サイトが表示されます。終了するときはCtrl+cとコマンドしてください。 home 次回は小説サイトにするためのコーディングを説明していきます。