picture
HomePosts

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

公開日: @t_yama5k

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

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

(参考サイト)

記事移行とドメイン設定

移行作業

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

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

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

ドメイン設定

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

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

残作業一覧

  • (追記予定)

感想

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

  • React に詳しくて自分で弄りたい人はシンプルなテーマ、触りながら React も覚えたい人はある程度機能の揃ったテーマを選ぶなど、いろいろ選択できる

  • ただし、テーマごとに記事のパスの指定方法や記事タイトル記載場所が異なる(カスタマイズでいじることは可能そうだが未調査)

  • 記事投稿の際は Netlify CMS(静的サイトで CMS 機能追加できる) からの投稿が結局は気軽かもしれない(要、追加設定)

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

  • コードの修正がすぐに画面に反映される
  • 型安全の恩恵はまだ受けていないが、きっとどこかで役にたつ(はず)
  • ただし、不用意にコードを削除したりすると途端にエラー発生、ブランチ切って慎重に対応せねば
    • 存在しない Author を記事投稿者に設定したらエラー
    • 不要な画像を削除したらエラー
    • etc...

まとめ

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