Gastbyでブログを始める手順

前提条件

前提として以下のツールのインストールが必要です。

1. git
2. Node.js
3. npm CLI or yarn (個人的にはyarn推し)

gatsby公式の手順はこちら

starterを利用して始める

Gatsbyでは必ずstarter(スターターキット)を利用して始めます。とりあえず公式starterを使った方が良さそうなので、gatsby-starter-blogを使ってインストールし, localで起動しましょう。

gatsby-cliのインストール

僕はyarn使いなのでyarnしか解説しません。

$ yarn add global gatsby-cli

gatsbyプロジェクトの新規作成

# gatsby new <プロジェクト名> <starter名>
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

ローカルで起動

$ cd blog
$ yarn start

localhost:8000にアクセスするとブログが表示されます。

ブログの記事や著者情報の編集

最初はブログの著者がKyle Mathews氏(Gatsbyの作者)になっているのと、仮の記事は3つある状態なので、カスタマイズしましょう。

head情報の修正

siteMetadataを修正します。netlifyにデプロイする前提です。urlはまだ変更前のものです。

  siteMetadata: {
    title: `On my Tech way`,
    author: `串崎 康介`,
    description: `バックエンドについて技術情報を発信する技術ブログ`,
    siteUrl: `https://www.wisetlaloc.com/`,
    social: {
      twitter: `wisetlaloc`,
    },
  },

プロフィール修正

src/components/bio.jsの自己紹介文を修正します。

<p>
  書いた人:  <strong>{author}</strong> 都内でRailsエンジニアしています。綺麗なコード書きたい。
  {` `}
  <a href={`https://twitter.com/${social.twitter}`}>
    Follow me on Twitter
  </a>
</p>

写真差し替え

assets/profile-pic.jpgの画像を自分の画像に差し替えます。

記事の削除と編集

記事はcontent/blog配下に1記事ごとにフォルダ分けされて存在します。既存の記事を一つ編集してみましょう。残りの記事は全て削除してしまって良いかと思います。

localで起動

この状態でyarn startしてhttp://localhost:8000をみてみると記事一覧と記事詳細がみられるはずです。

Deploy手順

Netlifyを使いました。気が向いたら書きます。

まとめ

以上、Gatsbyでブログを作るでした。このブログも(ブログ自体をネタにもしつつ)どんどん良くしていきます！