放置していたドメインとGatsbyでブログ作成した話

この記事はGatsby.js Advent Calendar 2019 - Qiita 22日目の記事です。
そして、はてなブログからGatsby移行後最初の記事でもあります。

はじめに

AWSのSAA(ソリューションアーキテクトアソシエイト)取得に向けたハンズオンのため、初めて買ったドメイン。
SAAに合格した後放置していたそのドメインを有効活用すべく
ブログをはてなブログ → Netlify + Gatsby に移行した話。

TL;DR

• 移行先はいろいろ考えたがNetlify + Gatsbyに
• Typescript + blogな初期テーマで、見た目もなかなかのブログがすぐにできる
• お名前.comで取得したドメインであっさり登録可能

移行先検討

独自ドメインを設定する前提で移行先を検討。以下候補

移行先候補	理由	気になる部分
WordPress ( + AWSのLightsail置)	せっかくSAAを取得したので AWSにいろいろ触れておきたい はてなブログからの移行は楽そう(実際楽だった)	2019年は少々WordPressで苦しんだ テーマいじるのもちょっと辛そう
Hugo ( + Netlify)	ブログにそのまま使えそうなテーマがいっぱい テーマの切り替えができる	テンプレートファイルのカスタマイズが難しそう(検証不十分)
Gatsby (+ Netlify)	テンプレートがReactで書かれているので なんとなくわかる	テーマがほいほい切り替えられないのがちょっと心配

当初はAWSの1年の無料期間がそろそろ切れてしまうので、これを機にお金を払ってAWSのサービスを利用してみようと考えていた。
後に「静的サイトジェネレータ 」や「JAMStack」なるものの存在を知り、最終的にはいろいろいじることでReactに触れられるいい機会にだろう、ということでGatsby + Netlify を選択。

Gatsbyのテーマ

選定編

Gatsbyにはサイトやブログにそのまま使えちゃうテンプレートがいくつか準備されており、公式が提供しているシンプルなものから、予めCMSでの投稿機能まで様々。

自分の場合は、Blogにそのまま使えちゃう、あと静的言語メインな人間なので型はあったほうがいいよねってことで

テンプレートタイプ：blog
Language:Typescript

といった検索条件でテンプレートを検索

Starter Library | GatsbyJS

• gatsby-casper: Gatsby Starter | GatsbyJS
• gatsby-starter-typescript-power-blog: Gatsby Starter | GatsbyJS
• gatsby-starter-nehalem: Gatsby Starter | GatsbyJS

上記のテーマをいろいろ触って、最終的にフォルダ構成がわかりやすかったgatsby-casperを採用

カスタマイズ編

Gatsby-Casperのデモサイトと本ブログを見比べて貰えば一目瞭然ですが、見た目はあんまりいじれていません。一通り欲しい機能は揃っているため、とりあえずブログ欲しいとかならおすすめテーマ。

とりあえずはヘッダ部分や記事本文のフォントサイズ、アイキャッチ画像のサイズなどをいじった程度。 タグの複数表示対応とか、記事本文の目次追加など、弄りたい部分はそこそこあるのでそれはおいおい。

(参考サイト)

• 【Gatsby】gatsby-casper テンプレートを使った静的ページのカスタマイズ | かきフロー

  • 自分が上記記事の対象読者にまんま当てはまり、見た目弄りたい部分もそのまま参考にできました。

記事移行とドメイン設定

移行作業

元々はてなブログではmarkdownで記事を書いていて、トータル10記事ほどしかなかったのでツールなどは特に使用せず自力で移行。
記事のパスの設定方法やtagの付け方はテーマごとに結構違っているのでそこは注意。

gatsby-casper の場合の記事作成時の注意点は以下

• merkdownの配置場所がそのまま記事のパスになる

  • フォルダの下にmarkdownファイルを配置する場合はその分階層が深くなる
  • ※テーマによってはmarkdown上部に書くものもあり
• 記事の登録日時はmarkdown上部に書く

ドメイン設定

お名前ドットコムで取得したドメインをNetlifyで使う - Qiita

こちらの記事を参考にさせていただきました。

残作業一覧

• (追記予定)

---

感想

そのまま使えそうなテンプレートテーマがなかなか豊富

• Reactに詳しくて自分で弄りたい人はシンプルなテーマ、触りながらReactも覚えたい人はある程度機能の揃ったテーマを選ぶなど、いろいろ選択できる
• ただし、テーマごとに記事のパスの指定方法や記事タイトル記載場所が異なる(カスタマイズでいじることは可能そうだが未調査)
• 記事投稿の際はNetlify CMS(静的サイトでCMS機能追加できる) からの投稿が結局は気軽かもしれない(要、追加設定)

外観いじりはものすごく楽

• コードの修正がすぐに画面に反映される
• 型安全の恩恵はまだ受けていないが、きっとどこかで役にたつ(はず)

• ただし、不用意にコードを削除したりすると途端にエラー発生、ブランチ切って慎重に対応せねば

  • 存在しないAuthorを記事投稿者に設定したらエラー
  • 不要な画像を削除したらエラー
  • etc…

まとめ

• 2020年はフロント部分も頑張る