このブログの作り方(Gatsby.js + Netlify) Part3/3:雛形を修正する

magmaslime Blog / このブログの作り方 Part3/3:雛形を修正する

Part2 の記事の続きです。
この記事では、雛形のプログラムを修正して公開する手順について書きます。

  1. Netlifyに登録して、Gatsby.jsで生成したサイトを作成する
  2. (オプション)ドメインを取得する
  3. GitHubからプログラムをローカルにダウンロードしてくる ← 今回の記事
  4. ローカルで雛形のプログラムを修正してブログを作成して、GitHubにプッシュする ← 今回の記事
  5. Web 上のサイトが更新されていることを確認する ← 今回の記事

GitHubからプログラムをローカルにダウンロードしてくる

まずはGithubからプログラムをダウンロードします。
Part1 の記事で Github と連携したと思うので、そのアカウントに新しくリポジトリが作成されていると思います。そのリポジトリを、GitHub のコマンドやダウンロードボタンから、ローカルの適当な場所にダウンロードしましょう。

GitHub

上記の画像はこのブログのリポジトリのページです。分かりやすいように、リポジトリ名をブログ名に変えています。また、ブログのソースは「Private」に設定しても問題なく公開できるので、「Private」に設定しています。

ローカルで雛形のプログラムを修正してブログを作成して、GitHubにプッシュする

ブログのプログラムをダウンロードできたら、実際に修正していきます。

今回は、雛形プログラムに以下の修正を行います。

  • ブログのページタイトルの変更
  • 「Home」にブログ記事のみを表示
  • ブログ記事を 1 カラムで表示する
  • 「Product」「Contact」「Form Examples」ページの削除
  • 「Blog」ページの削除とブログ記事をドメイン直下のディレクトリに移動
  • ブログタイトルの変更
  • favicon、ブログのタイトル画像を変更
  • ソーシャルアイコンの削除
  • 「Home」の背景を変更

※変更した箇所の確認方法

雛形プログラムを変更した際、実際にブログがどう変更されたか確認したい場合があると思います。 その場合、ブログのプログラムを格納したディレクトリ上でnpm startコマンドを実行しましょう。 これでローカル PC 上にサーバが起動するので、その状態でhttp://localhost:8000にアクセスすればブログの変更箇所を確認できます。

では、上記の修正を順次行っていきます。

ブログのページタイトルの変更

// src/pages/index.md
- title: 'Great coffee with a conscience'
+ title: "magmaslime Blog"
- subheading: Support sustainable farming while enjoying a cup
+ subheading: 趣味で作ったWebサービスについて書きます
  • index.mdの他の要素(description など)は、今回は不要なので全て削除

「Home」にブログ記事のみを表示

// src/pages/index-page.js
-            <div className="column is-10 is-offset-1">
-              <div className="content">
-                {/* <div className="content">
-                  <div className="tile">
-                    <h1 className="title">{mainpitch.title}</h1>
-                  </div>
-                  <div className="tile">
-                    <h3 className="subtitle">{mainpitch.description}</h3>
-                  </div>
-                </div> */}
-                {/* <div className="columns">
-                  <div className="column is-12">
-                    <h3 className="has-text-weight-semibold is-size-2">
-                      {heading}
-                    </h3>
-                    <p>{description}</p>
-                  </div>
-                </div> */}
-                {/* <Features gridItems={intro.blurbs} /> */}
-                {/* <div className="columns">
-              <div className="column is-12 has-text-centered">
-                <Link className="btn" to="/products">
-                  See all products
-                </Link>
-                </div>
-              </div> */}
-                <div className="column is-12">
-                  {/* <h3 className="has-text-weight-semibold is-size-2">
-                    最新の記事
-                  </h3> */}
-                  <BlogRoll />
-                  <div className="column is-12 has-text-centered">
-                    <Link className="btn" to="/blog">
-                      さらに読む
-                    </Link>
-                  </div>
-                </div>
-              </div>
+            <div className="content">
+              <BlogRoll />

ブログ記事を 1 カラムで表示する

// src/components/BlogRoll.js
-              className="is-parent column is-6"
+              className="is-parent column is-12"

「Product」「Contact」「Form Examples」ページの削除

  • それぞれの JS ファイルを削除
  • 以下の JS ファイルからリンクを削除

    • Navbar.js
    • Footer.js
    • index-page.js

「Blog」ページの削除とブログ記事をドメイン直下のディレクトリに移動

  • 記事のマークダウンファイルを blog フォルダから、その 1 個上の階層(pages フォルダ)に移動
  • blog フォルダを削除

ブログタイトルの変更

// gatsby-config.js
-    title: 'Gatsby + Netlify CMS Starter',
+    title: 'magmasli.me',
-      'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.',
+      "magmaslime's products and blogs",

favicon、ブログのタイトル画像を変更

  • favicon、タイトル画像を作成し、static/img以下に格納
  • Navbar.js で import

ソーシャルアイコンの削除

  • Footer.js から不要なソーシャルアイコン(今回の例では Vimeo など)のリンクを削除

修正が終わり、ローカルでの確認が完了したら、GitHub へプッシュしましょう。

Web 上のサイトが更新されていることを確認する

GitHub へプッシュすると、Netlify のデフォルトの設定で本番環境へのデプロイが自動で行われます。
Netlify の「Deploys」のページを見てみると、プッシュしたプログラムが「BUILDING」状態になります。

netlify-01

しばらくしてビルドに成功すると、「PUBLISHED」になっています。

netlify-02

これで Web サイトの更新は完了になります。お疲れ様でした。