JavaScript/TypeScriptメモ

このブログを構築した方法

2020-09-02 — この記事は8分で読めます

雑記

きっかけ

昨日（2020/9/3）、ツイッターで、「githubにmarkdownの原稿を上げたら、記事がホームページ（ブログ）に公開される仕組みを、簡単に作る方法」について質問をしたら「GitHub PagesとかNetlifyがいいんじゃない？」というお返事を頂きました。

ということで、せっかくなので、ブログを作ってみました。

技術選定

最近、Reactを勉強していることもあり、とりあえずGatsbyを使おう、ということは決めていました。

あとは、それで生成したデータを、どこで公開するかを検討し、最終的には「Netlify」に決定しました。

Github Pages

調べてみると、GitHub Pagesに上げるためには、下記のような制約があるようでした。

  • Publicフォルダ以下だけをMasterブランチにPushしないといけない
  • 1つのGitHubアカウントごとに、1つのGitHub Pagesしか使えない

Gitの設定も面倒そうですし、GitHub Pagesは、昔、別用途で使っていたので、どちらにしても、無理ということで却下。

Netlify

こちらは、単に、MasterブランチにGatsbyのプロジェクトをPushすれば、ブログが公開できるらしい、ということで、Netlifyで公開することに決定。

Gatsbyの設定

ということで、Gatsbyの設定を始めます。

チュートリアルの実施。Netlifyで試しに公開

まずは、適当にチュートリアルを実行。ある程度まで進めたところで、いったん、Netlifyに転送。まずは、簡単に公開できることは確認できました。

→　Hello Gatsby!

テンプレートの選定

ということで、本腰を入れて構築を開始します。

まずは、公式サイトのstarters（ブログなどのテンプレートが公開されているページ）から、適当なGatsbyのテンプレートを探してダウンロードします。

最終的に選んだのはgatsby-markdown-blog-starterです。

このテンプレートに行きつくまで、いくつか試してみたのですが、なかなかうまくいかず難航しました。

デザインが気に入らない

シンプルな、カテゴリページ・記事ページが作れるブログテンプレートを探したのですが、意外とそういうテンプレートがありません。

ソースコードが複雑すぎる

当然、テンプレートのソースコードは、テンプレートごとに変わります。

ダウンロードしたものの中には、テンプレートがどういう構造になっているのか、（今の私のレベルでは）ぱっと見でわからないものもありました。なので、そういうものは、候補から除外しました。

例：gatsby-starter-blog-and-cv

ダウンロードしても動かない

ダウンロードしても、うまく動かせない、というものも結構ありました。

あるいは、うまく動いたとしても、使っているnpmパッケージが古くて脆弱性だらけ。なので、パッケージをアップデートしたら動かなくなる、というようなものもチラホラ。

特に、ソースコードが複雑すぎて、どう見たらいいかわからないもので、こうなってしまうとお手上げです。

テンプレートを設定・改変する

テンプレートを選んだら、個別の設定をしていきます。

Linterを入れる

まず、Linterの設定を自分の好みに変えて、ソースコードをそれに合わせて自動修正します。

npmパッケージのアップデート

npmパッケージが古いのでアップデート。それに合わせて、動かない箇所が出てきたので微修正をします。

今回は、「LinkedIn」関連のコンポーネント（いいねをする機能か、いいねの数を拾う機能？）がアップデートに伴い、うまく動かなくなっていたようです。LinkedInは不要なので削除しました。

日付処理のローカライズ

ブログ記事の投稿日が「2020/9/1」なのに、実際の表示が「2020/8/31」になる、など、日付関連に不具合がありました。

どうやら、タイムゾーンの処理に起因するトラブルのようなので、テンプレートに修正を入れました。

Add option to get date in local or specified time zone

※参考にした記事がもう1つあったんですが。忘れました。

具体的には、次のように処理を変えています。

Markdownのデータを取得するクエリ部分で書式を整えない
test.js：変更前
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover
        date
        categories
        tags
      }
      fields {
        slug
        date(formatString: "MMMM DD, YYYY")      }
    }
  }

↓

test.js：変更後
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover
        date
        categories
        tags
      }
      fields {
        slug
        date      }
    }
  }
実際の出力時に日付を整える処理を入れる
test.js 変更前
//（略）
<p className={styles.postMeta}>
  {date} &mdash; {postNode.timeToRead} Min Read{' '}</p>

↓

test.js 変更後
const f = (date) => moment(date).format(`YYYY-MM-DD`);//（略）
<p className={styles.postMeta}>
  {f(date)} &mdash; この記事は{postNode.timeToRead}分で読めます{' '}</p>

その他細かい調整

その他、出力されたHTMLで、いくつか、怪しげなところがあったので微調整をして、一応は設定が完了です。

まとめ

ということで、記事を投稿してみましたが。

見出し・画像が見にくいなど、まだまだ、レイアウトに調整が必要そうですね。

追々調整をしていきます。