Gridsomeでブログを作成する：ブログを作成する

投稿日: 2022-04-20 2022-04-20

Gridsome は、Vue.jsのGatsbyの代替手段であり、静的に生成された非常に高速なWebサイトを構築するための技術スタックを提供することを目的としています。これはデータ駆動型であり、GraphQLレイヤーを使用してさまざまなソースからデータを取得し、そこからページを動的に生成します。

数日前、私はそれについて聞いたらすぐにTwitterでGridsomeを発表しました。これは、兄弟 Tommy VedvikとHans-JørgenVedvik（次のNuxt兄弟でしょうか？）によって構築されたプロジェクトです。

Webパフォーマンスに特に重点を置いており、 PRPL パターンを適用して、インタラクティブ（TTI）までの時間を短縮し、Lighthouseで高いスコアを達成しています。

あなたは私と同じくらい興奮していると確信しているので、Gridsomeを使って簡単なブログを作成する方法を見てみましょう！

入門

Gridsomeには、プロジェクトをブートストラップするための優れたCLIが付属しています。それをインストールしてプロジェクトを作成することから始めましょう：

$ npm install --global @gridsome/cli
$ gridsome create my-awesome-blog

これで、my-awesome-blogに移動し、npm run developを実行してブログの作成を開始できます。

フォルダ構造

作成したsrcフォルダーに移動すると、通常のVueアプリと大差ないことがわかります。

Nuxt.js の動作と同様に、Gridsomeにはページとレイアウトがあります。

Pages は、Webサイトのページを定義するVueコンポーネントであり、それらのフォルダー構造によって、作成されるルートが決まります。たとえば、デフォルトではpages/Index.vueとpages/About.vueがあり、/と/aboutのルートが作成されます。

いずれかのページを見ると、<Layout>コンポーネントでラップされていることがわかります。これは、main.jsに登録されているデフォルトのレイアウトです。詳細については、レイアウトドキュメントをご覧ください。

構成

もう1つの重要な部分は、 gridsome.config.js ファイルです。このファイルでは、Gridsomeアプリのさまざまな側面を構成できます。

基本的な構成は次のようになります。

gridsome.config.js

module.exports = {
  siteName: "Alligator",
  siteUrl: "https://alligator.io",
  siteDescription: "Learn about it on Alligator.io! 🐊",
  icon: "src/alligator-favicon.png",
  plugins: []
};

いくつかのメタデータプロパティと、これから使用するpluginsオプションを確認できます。

すべての構成オプションを見つけるには、 configdocsを参照してください。

ブログの構築

とにかく、本物のブログを始めましょう！

ブログでは、マークダウンファイルごとにページが作成されるように、マークダウンで投稿を書き込みたいと思います。

Gridsomeのページは、フォルダー構造に基づいて特定のパスを持っているため、使用できません。代わりに、投稿ごとに動的にページを生成したいと思います。

そのためには、 source-filesystem プラグインを使用する必要があります。このプラグインは、ローカルファイルをデータのソースとして取得し、それらのルートを作成して、それらのデータをGraphQLレイヤーに追加します。

マークダウンの内容を理解するには、transform-remarkも必要です。両方をインストールしましょう：

$ npm install --save-dev @gridsome/source-filesystem @gridsome/transformer-remark

そして、次の設定をgridsome.config.jsに追加します。

gridsome.config.js

module.exports = {
  transformers: {
    remark: {}
  },

  plugins: [
    {
      use: "@gridsome/source-filesystem",
      options: {
        path: "blog/**/*.md",
        typeName: "Post"
      }
    }
  ]
};

ご覧のとおり、オプションはそれ自体で説明されていますが、ここで重要なものは次のとおりです。

path：ブログフォルダからマークダウン投稿を取得するように指示しています。ファイルのパスを指定してルートを作成します（ blog / crazy-post.md の場合、パスは / blog / crazy-post になります）
typeName：作成されるGraphQLエンティティです

投稿テンプレートの作成

Gridsomeは、 templates を使用して、これらの動的に生成されたページがどのようにレンダリングされるかを定義します。

投稿用に作成するテンプレートは、設定したtypeNameオプションと一致する必要があります。それでは、次の内容で templates /Post.vueを作成しましょう。

テンプレート/Post.vue

<template>
  <Layout>
    <div v-html="$page.post.content"/>
  </Layout>
</template>

<page-query>
query Post ($path: String!) {
  post: post (path: $path) {
    title
    content
  }
}
</page-query>

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.post.title
    };
  }
};
</script>

ここで傑出したのは<page-query>タグです…それは何ですか？

覚えているかと思いますが、GridsomeはGraphQLレイヤーを使用してデータにアクセスし、 @ gridsome /source-filesystemプラグインが見つかった投稿でデータを埋めています。

さらに驚くべきことは、 http：// localhost：8080 / ___ explore でGraphQLプレイグラウンド全体にアクセスできるため、スキーマを探索してそこでクエリを試すことができることです。

GraphQL Playground

クエリの準備ができたらすぐに、<page-query>タグに配置できます。このタグは、$path変数を受け入れて、適切な投稿をクエリします。

そのクエリの結果は、$pageインスタンスプロパティ内に配置されます。このようにして、<div v-html="$page.post.content"/>を使用して投稿コンテンツを挿入できます。

かっこいいじゃないですか。

もう1つの優れた点は、metaInfo計算プロパティです。 Gridsomeはvue-metaを使用しているため、SEO、ソーシャルメディア、メタデータの目的でメタ情報を完全に制御でき、$pageを使用して投稿データにアクセスできます。

最後に、ランダムなコンテンツを含む blog /awesome-article.mdを作成します。

blog / awesome-article.md

---
title: An awesome article
---

## An awesome article

This is some **awesome** content for a crazy sample blog

これで、ホットリロードのおかげで、記事は http：// localhost：8080 / blog /awesome-articleで利用できるようになります。

Gridsome Blog Running

まとめ

これまで、Gridsomeの使用を開始する方法と、さまざまなタイプのソースデータに接続するためのプラグインをインストールして使用する方法を見てきました。

この記事の後半では、ブログの投稿を一覧表示するページ付けされたページでブログを拡張する方法を確認してください。

涼しくしてください🦄

getdocs

13036