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

Hugoとは

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

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

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

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

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

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

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

Mainloadのインストール

サイト作成に成功するとこんな風に出てきます。サイトフォルダへ移動し、リポジトリを作成し、Mainloadをインストールします。ここではgit bashを立ち上げてください。

$ git submodule add https://github.com/vimux/mainroad.git themes/mainroad
fatal: not a git repository (or any of the parent directories): .git

$ git init
Initialized empty Git repository in soyo2/.git/

soyo2 (master)
$ git submodule add https://github.com/vimux/mainroad.git themes/mainroad
Cloning into 'soyo2/themes/mainroad'...
remote: Enumerating objects: 2218, done.
remote: Counting objects: 100% (85/85), done.
remote: Compressing objects: 100% (60/60), done.
remote: Total 2218 (delta 33), reused 64 (delta 19), pack-reused 2133
Receiving objects: 100% (2218/2218), 1.42 MiB | 6.66 MiB/s, done.
Resolving deltas: 100% (1299/1299), done.

soyo2 (master)

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

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

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

theme: "Mainload"

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

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

                   | JP
-------------------+------
  Pages            | 866
  Paginator pages  | 634
  Non-page files   |   3
  Static files     |   9
  Processed images |   0
  Aliases          | 129
  Sitemaps         |   1
  Cleaned          |   0

Built in 30496 ms
Watching for changes in soyo2\{archetypes,content,data,layouts,static,themes}
Watching for config changes in soyo2\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とコマンドしてください。

次回は小説サイトにするためのコーディングを説明していきます。