Help us understand the problem. What is going on with this article?

Netlify + Hugo で作った無料ブログがNetlify CMSでWeb上で編集可能に! 感無量

More than 3 years have passed since last update.

個人的にイチオシの静的サイトをホスティングしてくれるサービスNetlify

静的サイトジェネレーターってホスティング費用ゼロでメンテナンス費用もあまりかからなくて最高だが、投稿の作成や編集にいちいちgitを使わないといけないというイライラがあった。

Netlify CMS? これはまさかこの課題を解決するものなのではないか? と思って試してみたらなんと、

まさに求めていたものであった。

そんな画期的なサービスがこのNetlify CMSなのだ。

static-site用の管理画面を生成するだけっちゃだけなんだけど(画期的でもない)、Netilifyで無料ホスティングできるというではないか。

感無量なテンションでよくわからない文章だが、実際に既存のHugoサイトに追加してみた。

やったこと

  1. Hugoで作ったサイトをgithubにホスティング
  2. 上記のリポジトリをNetilifyにDeploy
  3. https://github.com/settings/developers でnetlify用のOAuthアプリを生成
    • Authorization callback URLにhttps://api.netlify.com/auth/doneを設定
  4. Netlifyの管理画面のAccessにgithubのAuthentication providerを追加
  5. 以下のファイルを新規作成してcommit! push!
    • Hugoのディレクトリ構成によっては作成場所が変わります
/content/admin/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>
  <!-- Include the stylesheets from your site here -->
  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.3.9/dist/cms.css" />
  <!-- Include a CMS specific stylesheet here -->

</head>
<body>
  <script src="https://unpkg.com/netlify-cms@^0.3.9/dist/cms.js"></script>
</body>
</html>
/content/admin/config.yml
backend:
  name: github
  repo: user/repo
  branch: master

media_folder: "static/img" # Folder where user uploaded files should go
public_folder: "img"

collections: # A list of collections the CMS should be able to edit
  - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Post" # Used in the UI, ie.: "New Post"
    folder: "content/post" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Intro Blurb", name: "description", widget: "text"}
      - {label: "Image", name: "image", widget: "image", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

(config.ymlが割りと色んな使い方ができるかもしれないとワクワクする)

上記のファイルを作ったら最後のgit push(そんなことはない)

公開されたサイトの/adminにアクセスしてgithubログインすると...

image

管理画面が使えるようになりました。

シンプルで割と誰でも使えそうなUIの感じがいいですね。

Netilify CMSをとりあえず試すだけなら

https://www.netlifycms.org/docs/test-drive/

このページにDeploy to Netilifyボタンあるので、押して、OAuthとかの設定するだけで試せます。

自分はたまたまHugoつかってたけど、Hugo以外にも静的サイトジェネレータなら色々使えるようですね。

shwld
主に開発で得られた知見を記録していきます。 記載された内容は、所属する企業や団体の公式見解ではありません。
https://shwld.net
mof-mof
「つくって人をしあわせにする」をビジョンにAIチャットボットや開発チームレンタル等のサービスを提供している渋谷のIT企業です
https://www.mof-mof.co.jp/about
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away