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

Svelte/Sapper/Contentful/Netlifyで無料ブログ

Sapper + Netlifyの組合せがまだ世に無かったので覚書。Sapper周り以外は偉大なる元記事様参考に作成。

おさらい

  • Svelte - フロントエンドFW。
  • Sapper - Svelte用のFW。
  • Contentful - CMS。wp-jsonみたく使える。5000レコードまで無料(その他条件有)。markdownで書ける。
  • Netlify - SSL/ADN対応ホスティング。月100GB転送量まで無料(その他条件有)。

手順

Sapperインストール

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install
npm run dev

http://localhost:3000/
にアクセスしてSapperが起動している事を確認してください。

スクリーンショット 2020-02-11 8.16.23.png

Contentfulで記事などのコンテンツ作成

https://www.contentful.com/sign-up/
から、まずは会員登録。

スクリーンショット 2020-02-11 8.17.39.png

TOP画面に遷移したら上部MENUからContent Modelを押す。
スクリーンショット 2020-02-11 8.18.31.png

見慣れない画面になると思うが迷わず「Add Content Type」を押す。ここは「記事の型(モデル)」を設定する画面になる。モデル名は適当にArticleと入れておこう。
スクリーンショット 2020-02-11 8.21.14.png

Createを押すと「Fieldをいれよう!」という文章が出てくる。要は記事の型となる要素を入れていく。最小要素として、Slug(short text), Title(short text), Body(Rich Text)を入れておこう。(マークダウンでやるならlongtext)
スクリーンショット 2020-02-11 8.22.57.png

これで型は完成した。実際にこの型を用いて記事を作成してみる。上部MENUのContentを押して、Add Entryを押して下画像のような編集画面を出してみよう。適当な文字列を入力してセーブすれば完成。
スクリーンショット 2020-02-11 8.26.52.png

ここまで完成したらあとはアクセスあるのみ。下記からアクセストークンを取得する。
スクリーンショット 2020-02-11 8.29.04_censored.jpg

SapperにContentfulアクセスする処理をいれていく。

こちらを99%参考にしました。

.env
CTF_SPACE_ID={{ 先程使用したSpace ID }}
CTF_CDA_ACCESS_TOKEN={{ 先程コピーしたContent Delivery API }}
CTF_BLOG_POST_TYPE_ID={{ 最初に決めたモデル名。Article。 }}
src/api/cms.js contentfulの設定値
const client = contentful.createClient({
    space: process.env.CTF_SPACE_ID,
    accessToken: process.env.CTF_CDA_ACCESS_TOKEN
})
src/api/cms.js 記事一覧取得と記事取得
// slug指定で記事取得。これid指定の方が綺麗だからできるなら後で直す。
const fetchEntryByContentIdAndSlug = (id, slug) => client.getEntries({
        content_type: id,
        'fields.slug[in]': slug
    })
    .then((response) => response.items[0])
    .catch((error) => {
        console.error(error)
    })

// 記事一覧取得
const fetchEntriesForContentId = (id, orderBy) => client.getEntries({
        content_type: id,
        order: orderBy
    })
    .then((response) => {
            return response.items
    })
    .catch((error) => {
            console.error(error)
    })

これでデータ取得ができるようになったらsvelte側で反映する。blog配下でもindexでもよし。

routes/blog/index.svelte
<script context="module">
    import { getArticles } from '../../api/cms.js'

    export function preload({ params, query }) {
        return getArticles()
                .then(posts => {
                        return { posts };
                });
    }
</script>

<script>
    export let posts;
</script>

<ul>
    {#each posts as post}
        <li><a rel='prefetch' href='{post.fields.slug}'>{post.fields.title}</a></li>
    {/each}
</ul>
routes/blog/[slug].svelte
<script context="module">
    import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
    import { getArticle } from '../../api/cms.js'

    export function preload({ params, query }) {
        return getArticle(params.slug)
            .then(post => {
                let html = documentToHtmlString(post.fields.body)
                post.html = html
                console.log(post)
                return { post };
            });
    }
</script>

<script>
    export let post;
</script>

<svelte:head>
    <title>{post.fields.title}</title>
</svelte:head>

<h1>{post.fields.title}</h1>

<div class='content'>
    {@html post.html}
</div>

これで http://localhost:3000/blog
にcontentfulの記事が表示されているはず。

Netlifyにアップ

今までの作業をgitにあげたらNetlifyへ。
https://app.netlify.com/signup

New Site From Gitを押して先程のリポジトリを選択。ビルドコマンドは下記の通り。
スクリーンショット 2020-02-11 13.49.33.png

.envで記載していた変数は設定画面のBuild deploy > Environmentから。
スクリーンショット 2020-02-11 13.45.19.png

これでnetlify上にサイトができた

Contentful更新とNetlifyを連携する

build設定からwebhookを作成する。
スクリーンショット 2020-02-11 13.57.28_censored.jpg

そしてContentfulのsetting->webhook->netlifyにコピペする。
スクリーンショット 2020-02-11 14.09.13.png

初期値では公開/非公開時の自動ビルドしかないが、saveとdeleteも入れていいと思う。

まとめ&移行

Contentfulが初めてでしたがWordPressより見やすくて非エンジニアの人から「note感覚で見やすい!」という感想を聞いた。 WPのACF機能はfieldsで出来るし、CustomPostはModelで出来る。あとNetlify+Netlify CMS+Gatsbyを最初デプロイしてみたけれどもUIがCMS特有のごちゃごちゃした印象をうけたので辞めた。その後Contentfulをしれて本当に良かった。markdownでやるならmarked使う。

余談だけど自分もこちらに移行した。粛々と好きに書けるように。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした