あなたの最初のギャツビーテーマを使用する

ギャツビーは、テーマの安定したリリースを発表し、それに沿ってテーマに関連するテーマのbevyをリリースしました.この投稿は、テーマが何であるかについて説明します.なぜ、彼らはあなたにとって役に立つかもしれません.後の記事では、コンポーネントのシャドウイングのようなトピックに潜入し、おそらくあなた自身のテーマをオーサリングする.
あなたが深い端に飛び込むことを望むならばegghead course on Gatsby themes それはすばらしい.

何がテーマですか？

名前のテーマは、ビジュアルコンテンツに関連しているという仮定を呼び出す可能性がありますが、Gatsbyテーマはそれ以上の方法です.彼らはいくつかのデフォルト設定を含めることができますトランスフォーム、プラグイン、さらには他の子のテーマを設定します.テーマは、視覚的なスタイルやコンポーネントを含めることができます.
テーマは、オーバーライド可能な、すべてのベスト、構成可能です.

なぜ便利なテーマですか？

あなたが過去にギャツビーを使用したならば、あなたはあなたのウェブサイトをブートストラップするためにスターターを使用したかもしれません.スターターはテーマの前に大きな踏み石だった.MDXをサポートしているか、Shopifyのような外部サービスを使用しているように、彼らはボックスからいくつかの追加機能で構成されたギャツビーのサイトをキックオフできました.
しかし、もしあなたがMDXとShopifyの両方をサポートしていたウェブサイトを素早くスタートさせたい場合には、両方の設定でスターターを見つけなければなりませんでした.スターターの1つを使用して、他の機能をセットアップしたり、ゼロからすべてを設定する方法を理解してください.
テーマはこれを変更します.で始まる代わりにthis or that , 簡単にできるthis AND that . 覚えておいてください、テーマは設定可能です.

始めましょう

我々は簡単に始めるつもりです.ゼロからギャツビーウェブサイトをセットしてくださいgatsby-theme-blog すぐにブログの基本的な機能をブートストラップする.
あなたが完全なコードチェックを見たいならばGithub repo .

ディレクトリを設定する

まず、Gatsbyウェブサイト用のディレクトリを作成し、初期化する必要があります.

mkdir first-gatsby-theme
cd first-gatsby-theme
yarn init -y

I'm using yarn, but feel free to use npm if you'd like.

依存関係のインストール

我々は、使用してスターターを使用することができますgatsby new <STARTER> コマンドですが、手動で設定しましょう.それは驚くほど簡単です.
我々は必要react , react-dom , and gatsby 始める.それではインストールしましょう.その後、オープンしましょうpackage.json ファイルをルートディレクトリに追加し、便利なスクリプトを追加します.

yarn add react react-dom gatsby

// package.json
{
  "name": "first-gatsby-theme",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "react": "...",
    "react-dom": "...",
    "gatsby": "...",
  },
  "scripts": {
    "build": "gatsby build",
    "start": "gatsby develop",
    "clean": "gatsby clean"
  }
}

The ... are just placeholders. Your package.json file will have the specific versions you have installed.

ギャツビーが働いていることを確認

私たちのハードワークのすべてを見るには、いくつかのコンテンツを作成し、ギャツビーは魔法を働かせましょう.
ディレクトリを作る必要がありますsrc/pages . コンベンションによって、これはGatsbyがウェブサイト上でページに変わるために内容を探して、我々のためにルーティングを取り扱うところです.

mkdir -p src/pages
touch src/pages/index.js

mkdir -p creates all missing directories in the path provided

src/pages/index.js のルートパスにマップされます.

// src/pages/index.js

import React from 'react'

export default function HomePage() {
  return (
    <>
      <h1>Welcome</h1>
      <p>Hello, from Gatsby <span role="img" aria-label="hand emoji waving hello">👋</span></p>
    </>
  )
}

今すぐ実行する必要があるすべてのギャツビーのウェブサイトを起動します.

yarn start

あなたは、このように見える何かを見るべきです.

非常にエキサイティングな、私は知っている.

テーマのインストール

私たちは、Gatsbyの作業を知っているので、テーマをインストールしましょう.誰もがブログを持っていると言いますが、始めるのは難しいです.良いニュースは、テーマはとても簡単に任意の言い訳をしないように開始することです.

yarn add gatsby-theme-blog

プロジェクトのルートでgatsby-config.js ファイル.

touch gatsby-config.js

を追加し、

module.exports = {
  plugins: [
    'gatsby-theme-blog'
  ]
}

テーマの安定したリリースの前に、あなたのテーマは__experimentalThemes , しかし、安定している今、彼らはプラグインのようだ!
あなたがいくつかのエラーを得るだろう瞬間にあなたのギャツビーのウェブサイトを起動しようとした場合:(次の2つのセクションの理由を理解しよう).

テーマオプションの探索

たった今、ギャツビーテーマブログのためにgithubレポがありません、しかし、あなたが見るならばnpm page と呼ばれるセクションを見ることができますUsage .

ほとんどのギャツビーのプラグインやテーマを設定できるオプションがあります.For gatsby-theme-blog それぞれの4つのオプションとデフォルトがあります.
それは、いくつかの期待がある.今すぐにgatsby-theme-blog いくつかのブログの投稿をマークダウンまたはMDXの形式でcontent/posts ディレクトリとタイトルのイメージavatar にcontent/assets ディレクトリ.
あなたがこれらのどちらかを持っていないから得る誤りは、少しのBummerである不可解な種類です.
今のところ、オプションはデフォルトに設定します.何かをオーバーライドしたいならば、あなたはあなたを変えますgatsby-config.js .

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-blog',
      options: {
        contentPath: 'content/posts', // the file path to your blog posts
        basePath: '/', // the url for the root of your blog
        assetPath: 'content/assets', // the file path to your assets folder
        mdx: true, // whether or not to configure mdx for you
      }
    }
  ]
}

これらはデフォルト値ですが、いずれかを変更するには、オプションオブジェクトの値を設定します.

コンテンツを追加

だから今、なぜ我々のギャツビーのウェブサイトは、このテーマを追加した後に失敗している知っている、私たちのウェブサイトを再び動作させるために何をすべきかのガイドとしてデフォルトオプションを使用してみましょう.
まず必要なフォルダを作る必要があります.プロジェクトの根源で我々は創造するつもりですcontent , content/posts , and content/assets ディレクトリ.

mkdir -p content/{posts,assets}

the {} here is called brace expansion and is equivalent to running mkdir -p content/posts and mkdir -p content/assets, just in a shorter way.

今私たちの場所にフォルダを持っている私たちはブログのポストを作成し、アバターを追加する必要があります.
ファイルを作るhello-world.md , インサイドオブユアcontent/posts ディレクトリとあなたが好きなコンテンツを追加します.

---
title: "Hello, World"
---

The worlds greatest blog post!

次に、自分の名前の画像を保存avatar インcontent/assets .
我々がする必要がある3番目のものは一時的に私たちのsrc/pages/index.js ページですのでgatsby-theme-blog デフォルトはブログのルートを"/"ルートパスにします.

mv src/pages/index.js src/pages/_index.js

あなたが走るならばyarn start さて、すべてが動作し、次のように表示されます.

サイト/作者情報

その他のことgatsby-theme-blog は、我々の観察ですgatsby-config.js いくつかのサイトメタデータ.
ポップオープンgatsby-config.js 最後の時間とあなたの情報を追加します.

module.exports = {
  siteMetadata: {
    title: "Awesome Blog", // Enter the title of your blog here
    author: "Matt Hagner", // Change this to your name
    description: "A really cool blog",
    social: [
      {
        name: 'twitter',
        url: 'twitter.com/_hagnerd',
      },
      {
        name: 'github',
        url: 'github.com/hagnerd',
      },
    ]
  },
  plugins: [
    'gatsby-theme-blog',
  ]
}

うまくいけばそれはあまりにも痛いし、それがインストールされ、ギャツビーのテーマを設定する方法はどれだけ速く強調表示に役立った.最良の部分は、必要に応じて、より多くのテーマをインストールすることができますし、基本的にあなたのウェブサイトがどのように構造化されて変更する必要はありません.

次へ

私たちのブログのためのクイックセットは素晴らしいですが、スタイルを変更したい場合はどうですか?または、いくつかのデフォルトのコンポーネントのレンダリング方法は?そのためにシャドウと呼ばれる機能を使用します.
それが終わったとき、私はポストへのリンクで更新します.