Start Up A New Hugo Installation
2021-08-11
カスタムテーマで新しいHugoサイトを作る
さて、私は自分のサイトをサーバーからサーバーレスに移行するために忙しく働いてきました。サーバーレスのモデルをたくさん見ました。それらはすべて、ある種のベンダーロックインの問題を抱えています。現時点では、どんなフォーマットからでもデータを取り出して、新しいフォーマットに詰め込むことができると確信しています。ですから、ベンダーのロックインはそれほど気になりません。私は安全で信頼性が高く、低価格の月額料金を求めています。私のサイトは、定期的なトラフィックがある私のビジネスのためのものか...それほど多くはないが、かなり定期的なものか、このサイトのように事実上のゴーストタウンとなっているものです。24時間体制で待機しているサーバーにお金を払う必要はありません。
プロバイダー
プロバイダーはAWSに決定しました。少し複雑だったり、学習曲線が高かったりしますが、より安く運用できる自信があります。また、セキュリティ面でも安心感があります。
静的ジェネレータ
スタティック・サイト・ジェネレーターは、Hugoに決めました。Hugoは高速ですし、私はreactフレームワークに偏見を持っています。私はreactフレームワークを知りませんし、今すぐには学びたくありません。シングルページアプリケーションの複雑さはあまり必要ないと思っています。今のところ、JAMstackはシンプルで、安全性も高く、私には合っているようです。
スタックは
aws cognito、api-gateway、lambda、dynamodbでhugoをバックアップします。dynamodbで気に入っているのは、信じられないほど寛大な無料の永久ティアです。私は、データベースの代替品は通常、自分でレンタルサーバーを運用するよりもコストがかかるため、これまでサーバーレスになることを避けてきました。dynamoが提供する25GB以下の永久無料を使えば、pay as you goの低コストサーバーレスのメリットを享受することができます。
Hugoカスタムテーマのレシピ
既製のテーマの方がはるかに速くて便利なのは確かですが、私自身のフロントエンドの仕事はあまり見栄えが良くないのですが、それでも私はDIYでカスタマイズしたテーマを好みます。しかし、Hugoで新しいカスタムテーマを立ち上げるのは、少し難しいです。でも、一度起動してしまえば、それは素晴らしいことです。
コマンドを紹介します。
新しいhugoサイトを立ち上げるには、次のコマンドを使います。
hugo new site <name-of-site>
すると、hugoがサイトの骨格を設定してくれます。ディレクトリに移動して、次のコマンドを実行してください。
hugo new theme <name-of-your-custom-theme>
そうすると、hugoは新しいテーマをthemesフォルダに入れてくれます。次に、次のコマンドで新しいコンテンツを作ります。
hugo new post.md
そうすると、hugoはcontentフォルダの中にpost.mdという名前のファイルを作成します。このファイルを編集して、一番下にちょっとしたコンテンツを追加することができます。そして、次のコマンドを使います。
hugo server
とすると、ページが生成されます。hugoが指示したページ（http://localhost:1313）に行くと、大きな何もない状態になっています。
設定
新しいテーマを使うためには、設定が必要です。config.yamlファイルを編集します（私はtomlよりもyamlの方が好きなので、このフォーマットに変更しています。 お好きなようにお使いください）。エントリを入れます。
theme: <name-of-your-custom-theme>
と入力しても、まだ少し必要なことがあります。このページ[https://gohugo.io/templates/single-page-templates/]に行って、提案されているhtmlを
./themes/<nam-of-your-custom-theme>/layouts/_default/single.html
にコピーしてください。 ファイルにコピーしてから再実行してください。
hugo server
を再実行し、ページにアクセスします。ページがきれいに表示されるはずです。
スタイリングの追加
Hugoの素晴らしいところの一つに、scssプリプロセッサが組み込まれていることがあります。新しいテーマのディレクトリに cd して、assets という新しいディレクトリを作ります。その中に、sassという新しいディレクトリを作ります。そこにsassファイルを置くことができます。(以下のコードを使用する場合は、メインのファイルをmain.scssという名前にしてください)
次に、テーマの「head」というパーシャルファイルにコンテンツを追加します。ここにあるでしょう。
./themes/<nam-of-your-custom-theme>/layouts/paritals/head.html
そして、そこに以下のようなコードを貼り付けます。
{{ $sass := $sass | toCSS }}。
{{ $sassを使って }}。
<link rel="stylesheet" href="{{ .RelPermalink }}">。
{{ 終わり }}。
これで、コンテンツのスタイルを思いのままにすることができます。
Happy coding!