を作成する反応ベースのブログ

このポストはもともと私のブログで共有されました.読めるcreate a react blog using gatsby .
数週間前、同僚が彼の個人的なブログのために作ったギャツビーのブログを共有しました.
彼はまた良いポストを書いたJavaScript Proxies あなたは読書をお楽しみいただけます.
私が新しいウェブサイトを見るたびに、私はすぐにGoogleのPageSpeed Insightにページの速度を見つけるために向かいます.私は、ページが達成することができた速度に驚きました.

正直言って私はジキルのブログでそれらの数字に到達することができなかった.
だから、私は個人的なギャツビーのブログを始めました.このポストは、私がこのブログを現在の段階にするために起こるすべての詳細を含みます.
また、現在、私はこのブログのプライベートポストの概念を持っていない、私はそれが明確に終了していない場合はプライベートに保つことができない.これには耐えなければならない.

最終結果

このシリーズの後の最終的なブログはpresent on this URL .

必要条件

私は、GatsbyとNetlify CMSを使用してブログを始めるのに必要な前提条件があるとは思いません.
この特定のバージョンのポストに必要な基本的なことは以下の通りです.

ドメイン名

私は既に既に使用していたドメイン名を持っていました.あなたがそれを持たないならば、それはまだ働きます.🙏

ギタブ口座

このチュートリアルに従うには、ブログのコードが存在するGithubアカウントが必要です.コードを保存する他の方法がありますが、GHはコードを維持する最も簡単な方法を提供しています.

Netlifyアカウント

また、あなたが展開することができるようにnetlifyでアカウントを必要とするでしょう
我々がポストの間、我々が把握するつもりであるものの残り.
始めましょう

テーマを選択

あなたが利用可能なテーマのリストから選択することができます.それらのほとんどはdeploy on Netlify NetLifyに直接展開し、NetLifyアカウントにコードを保存することができますボタン.次のコードを変更すると、NetLifyが自動的に変更を検出し、変更を展開します.

基本を選ぶgatsby-theme-blog . ボタンをクリックして選択Connect to GitHub コードとそれはgithubの上でコードをホストします.最後に、コードを格納するリポジトリの名前を選択します.

変更を加える

サイトが配備されるとsomething.netlify.com , ローカルでコードをクローン化して変更を開始できます.

git clone https://github.com/your_repo/repo_name

詳細についてはgit commands check this post .
最初に変更する場合gatsby-config.js ファイル.チェンジsiteMetadata 次の通り

  siteMetadata: {
    title: `Tutorial blog`,
    author: `Ranvir`,
    description: `Basic description of the blog`,
  ...

コードをプッシュし、変更をNetLifyアカウントに展開して表示されます.https://app.netlify.com/sites/your_site_id/deploys .

git push origin master

いくつかの時間後に変更は、現在のウェブサイトで利用可能になります.

NetLify CMSの追加

NetLify CMSを追加すると、すぐにあなたの投稿を変更し、ボタンをクリックするとそれらを展開するのに役立ちます.あなたのすべてのポストは、一つの場所にあります.
を作成し、簡単にNetLify CMSを使用して投稿を編集できます.
NetLify CMSを追加し、Githubのログインを使用して編集を許可するには、static あなたのコードのルートへのディレクトリ.
これを加えるstatic/admin/config.yml ファイル.

backend:
  name: github
  repo: singh1114/tutorial
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/posts"
    create: true
    slug: "{{slug}}"
    editor:
     preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Image", name: "image", widget: "string", required: false }
      - { label: "Tags", name: "tags", widget: "list", required: false }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

フィールドを使用して変更することができますwidget guide お客様のニーズに合わせて.
これを展開した後、ウェブサイトの管理パネルにアクセスできますhttps://web.netlify.com/admin .
あなたのウェブサイトの管理者ページのGitHubログインをオンにするために、あなたがポストを編集することができるように、あなたはNetLifyアカウントを使用してOAuthアクセスをオンにしなければなりません.
ジャスト・ゴーsettings tab > Access Control > OAuth >Install Provider . インストールするには、GitHub Application page
あなたのNetLifyアドレスをホームページURLとして加えてくださいhttps://api.netlify.com/auth/done コールバックとして.
一度完了すると、管理パネルにログインし、直接投稿を変更することができます.

リダイレクトの追加

私が既にあなたに言ったように、私はドメイン名を持ちました、そして、私はウェブサイトがそれの上で主催されることを望みましたhttps://blog.ranvir.xyz でないsomething.netlify.com . このために、我々は準備する必要がありますCNAME あなたのドメイン名プロバイダーの記録.
あなたはどのようなレコードを簡単にGoogle検索を設定するについての詳細を見つけることができます.
私の場合、私はサブドメインを使用していましたblog ホストとしてsomething.netlify.com 値として.
その後、リダイレクトすることができます.something.netlify.com to blog.ranvir.xyz リダイレクトファイルを作成することによって.
クリエイトstatic/_redirects ファイルを追加し、次のコンテンツを追加します.

# Redirect default Netlify subdomain to primary domain
https://something.netlify.com/* http://blog.ranvir.xyz/:splat 301!

これは301 永久リダイレクト.

解析の追加

あなたのウェブサイトに分析を加えることは非常に役に立つことができます.
あなただけの基本をインストールする必要がありますnpm パッケージを追加して、Google AnalyticsのトラッキングIDをコードに追加します.

npm install --save gatsby-plugin-google-analytics

設定ファイルのコードを変更します.

module.exports = {
  plugins: [
    ...
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-*******-*'
      }
    },
    ...

あなたは、Google Analyticsのダッシュボードから追跡IDを取ることができます.