Contentfulやめました

2020-12-22

meko

• Markdownに移しかえる
• 画像フォルダ

Contentfulを使ってみてデータの置き方や必要なデータなど管理すべき情報は理解できたのですが、 ContentfulというHeadlessCMSで記事を書き、Localに戻ってきてビルドするという行ったり来たりがめんどくさくなったので、 純粋にMarkdownを使うことにしました。

初めにContentfulやStrapiなどHeadlessCMSで運用してみて、方向性や必要なデータが決まったらMarkdownで本運用が良いかなと今のところ考えています。

ContentfulからMarkdown運用へ移行する時の作業をまとめてみます。

Markdownに移しかえる

まず、大問題なのですが、両方のソースから引っ張ってくることができませんでした。 (@gridsome/source-contentfulと@gridsome/source-filesystemが喧嘩するみたいです） Gatsbyだとgraphql関数を使ってうまいこと合わせられる様なのですが、Gridsomeではうまくできませんでした。 最新のGridsomeを使ったところgridsome.server.jsが自動で生成されるのですが、そのファイル内でcreatePageする際にgraphqlを操作出来るので合わせられそうです。

なので、Contentfulから記事をMarkdown形式にして保存していきます。

    - src
    - static
        - posts
        - media
Copy

srcと同列の階層にstaticディレクトリを作成し、postsディレクトリに*.mdで記事を保存していきます。

gridsome.config.jsも@gridsome/source-contentfulから@gridsome/source-contentfulに移し替えていきます。

plugins: [
    {
      use: "@gridsome/source-contentful",
      options: {
        space: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        host: process.env.CONTENTFUL_HOST,
        environment: "master",
        typeName: "Contentful"
      },
    },
    ...
]
...
templates: {
  ContentfulPosts: [
    {
      path: "/:slug",
      component: "./src/templates/Posts.vue"
    }
  ]
}
Copy

plugins: [
    {
      use: "@gridsome/source-filesystem",
      options: {
        typeName: "Post",
        path: "static/*.md",
        refs: {
          tag: {
            typeName: "Tag",
            create: true,
          }
        }
      }
    },
    ...
]
...
templates: {
  Post:  [ {
    path: "/:slug",
    component: "./src/templates/Post.vue"
  }]
}
Copy

Contentfulからのデータを読み込んでいたコンポーネントからもpage-queryを一掃しないとエラーが出続けます。 一掃したらmarkdownが読み込まれて記事として見られるようになります。

画像フォルダ

Gridesomeに関して画像を取り扱ってるサイトがなかったのですが、下記のようにpathを設定してあげるとstaticから取れるので、HeadlessCMSと同じようにstaticに入れた画像ファイルを読み込めます。

<g-image src="/../../media/*.webp"></g-image>
Copy

これはstaticフォルダ内に用意したmediaディレクトリから画像を読み込んでいます。