Zenn
Open7

Netlify ＋Hugo + Netlify CMS で爆速&格安で HP制作

oo
  1. hugoのインストール
brew install hugo
  1. Hugoプロジェクトの作成
hugo new site your-site-name
cd your-site-name
  1. テーマの選択とインストール
    ※SSHではエラーが出たので、HTTPSで取得する。
git init
git submodule add https://github.com/StaticMania/roxo-hugo.git themes/roxo-hugo
echo "theme = 'roxo-hugo'" >> config.toml
  1. サブモジュールが正しく追加されたら、READMEの指示に従って続けます

Copy the data, content, static, resources & config.toml files from the exampleSite directory and paste it on you Hugo Project repository/directory. From the site home directory:
cp -a themes/roxo-hugo/exampleSite/* .

cp -a themes/roxo-hugo/exampleSite/* .
  1. config.tomlファイルを編集して、テーマを設定 <- すでに設定されていた。
theme = "roxo-hugo"
  1. ローカルサーバーを起動してサイトをプレビューします：
hugo serve
oo

ここでエラー。localhostにアクセスしてもnot foundになる。

以下エラーハンドリング
現在、hugo.toml と config.toml の2つの設定ファイルが存在しているようです。Hugoは通常、config.toml（または config.yaml、config.json）を優先します。
解決策:

hugo.toml の内容を config.toml にマージします。
config.toml の内容を以下のように更新します：

tomlCopybaseURL = "http://example.org/"
languageCode = "en-us"
title = "XXXXXXXX"
theme = "roxo-hugo"

結論、余計なhugo.tomlを消したらうまくいった。

oo

これで、ローカルでhugo製のサイトが起動することがわかったので、細かいデザインの実装の前に、
・netliflyでのホスティング
・netlify CMSで、ブログ記事更新
を試す。

oo

Netlifyでのサイトのデプロイ

  1. githubのレポジトリを作る。
    公開範囲はprivate、gitignoreはGoに設定。
  2. ローカルのプロジェクトをこのリポジトリにプッシュ
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/レポジトリ名.git
git push -u origin main

※顧客のgitレポジトリとして作ったため、コマンドラインのgitユーザー（私）と権限が違ったためエラーが発生したが、gitのcollaborateに自分を追加したら行けた。
3. Netlifyでデプロイする（https://www.netlify.com）

  • 未登録だったのでNetlifyのアカウント登録。認証にはGitアカウントを使用。
  • そのまま手続きを進める。
  • Gitアカウントとの連携を行う。
  • 今回作ったレポジトリにのみアクセスを許可させる。
  • そのままデプロイできる。すごい。

deploy中に「Building」の項目でエラー。config.toml ファイルの101行目付近で問題が発生しているようだった。bare keys cannot containとのことでキーにドットが含まれているのがいけないらしい。

params.footer.qr_print = false

確かにそうなってたのでAIの指示通り、

[params.footer]
qr_print = false

こう修正する。（config.tomlは自動生成なはずなので、メンテされてなかったのが原因とか？）

デプロイには成功したけど、cssが効いてない感じで崩れてる。
↑崩れて表示されているサイトをブラウザのコンソールで確認すると、「ウェブサイトが HTTPS で提供されているにもかかわらず、一部のリソース（CSS、JavaScript、画像など）が HTTP で要求されている」というエラーが出ていた。
↑config.tomlのbaseURLが http://example.org/になったままだった（初期値）なので、Netlify が提供する URLに変更する

baseURL = "https://XXXXXXXXXXXx.netlify.app/"
  1. ビルド周りの設定
  • ビルドコマンドをhugoからhugo --gc --minifyに変更
    • ビルドプロセスの最適化(--gc)と、 ファイルの最小化(--minify)
  • 環境変数にHUGO_VERSION：0.129.0(ローカルのhugoのバージョン)を設定。
oo

Netlify CMSの設定

  1. プロジェクトのルートにstatic/adminディレクトリを作成。
  2. static/admin/index.htmlファイルを作成し、以下の内容を追加する。
index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
  1. static/admin/config.ymlファイルを作成し、以下の内容を追加する
config.yml
backend:
  name: git-gateway
  branch: main

media_folder: "static/images/uploads"
public_folder: "/images/uploads"

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "image", widget: "image", required: false}
      - {label: "Body", name: "body", widget: "markdown"}
  1. /themes/roxo-hugo/layouts/_default/baseof.htmlファイルに以下のスクリプトを </body> タグの直前に追加する
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>
  1. ここまでをgitにpushする。
oo

Netlify Identityの有効化

Netlify CMS を使用する場合にNetlifyでの認証が必要になる。（GitとNetlifyアカウント、CMSのアカウントが同じであっても）

  1. Netlifyのサイトのサイドメニューから、「Integrations」-> 「Identity」->「Netrify Identity」に行き、
    「Enable Identity」をクリック。
    2.「Configration and usage」から、「Registration preferences」を「Invite only」に変更。
  2. そのまま「Configration and usage」で、「Services」->「Git Gateway」で「Enable Git Gateway」をクリック。Gitと連携。
    4.「Integrations」-> 「Identity」から「Invite users」で、自分自身のメールアドレスを登録する。
  3. サイトのURL末尾に/adminでNetlify CMSにアクセスできる
    ※ ↑ここでメールアドレスとパスワードを要求されたがパスワードを設定した覚えがない。