はてなブログ(無料版)から Gatsby.js + Netlify へ移行

May 18, 2020

ブログの移行理由
Gatsby.js + Netlifyでのサイト構築
今後やりたいこと

こんにちは！うしじです。
これまで無料版のはてなブログを使っていたのですが、Gatsby.jsとNetlifyを用いてほとんど無料（ドメイン料のみ）でブログを運営できると聞いて、移行しました。
本記事では、移行に際して行ったことをまとめておきたいと思います。

ブログの移行理由

正直そこまでブログを書いておらず、はてなブログでも満足はしていたのですが、下記の理由からブログの移行を決めました。正直なところ、ちょっとやってみたかったというところが大きいです。

Gatsby + Netlify なら無料で簡単にサイトを構築でき、独自ドメインも利用可能（必要なのはドメイン料のみ！）
無料版のはてなブログだと勝手に広告が出るが、それがなくなる
Gatsby.js、Netlify使ってみたい

独自ドメインは、お名前.com やムームードメイン等で取得可能です。ドメインによっては年間100円以下で取得可能です。

私は、ムームードメインを利用しています。

Gatsby.js + Netlifyでのサイト構築

Gatsbyセットアップの流れ

今回、Gatsby.jsでブログサイトを構築するにあたり、Gatsbyのチュートリアルと下記のサイトを参考にさせていただきました。

Gatsbyでのブログサイト構築ですが、驚くほど簡単に終わります。
まずは、Gatsbyをインストールします。

$ npm install -g gatsby-cli

次に、Gatsbyのサイトでスターターを選び、ブログを作成します。
このブログには、https://github.com/W3Layouts/gatsby-starter-delogを用いています。

$ gatsby new my-blog https://github.com/W3Layouts/gatsby-starter-delog

ブログが作成出来たら、下記のコマンドで、http://localhost:8000/ でブログが起動出来ていることが確認できると思います。

$ cd my-blog
$ gatsby develop

あとは、GitHubにプッシュして、Netlifyにデプロイするだけです。

ブログ作成時のエラー

ブログの作成方法を上にさらっと書きましたが、実は、エラーでちょっと時間がかかってしまったところがあります。その際のエラーの表示が下記のものです。正直、これを見ただけだと何がダメなのかよく分かりませんでした。

$ gatsby new my-blog https://github.com/W3Layouts/gatsby-starter-delog
info Creating new site from git: https://github.com/W3Layouts/gatsby-starter-delog.git
Cloning into 'my-blog'...
remote: Enumerating objects: 63, done.
remote: Counting objects: 100% (63/63), done.
remote: Compressing objects: 100% (55/55), done.
remote: Total 63 (delta 0), reused 38 (delta 0), pack-reused 0
Unpacking objects: 100% (63/63), 15.57 MiB | 273.00 KiB/s, done.
success Created starter directory layout
info Installing packages...
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2020-05-10T07_33_58_403Z-debug.log

 ERROR 

Command failed with exit code 1: npm install



  Error: Command failed with exit code 1: npm install
  
  - error.js:56 makeError
    [lib]/[gatsby-cli]/[execa]/lib/error.js:56:11
  
  - index.js:114 handlePromise
    [lib]/[gatsby-cli]/[execa]/index.js:114:26
  
  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

本エラーですが、おそらく、node.jsのバージョンの問題のようです。（違うかも。。）上記のエラーが表示された時のnodeのバージョンがv14で、Gatsbyのチュートリアルを見たところ、v10が良さそうだったので、v10（正確には、v10.20.1）をインストールしたところ、うまく動きました。 nodeが初めてだったので戸惑ってしまったのですが、最初からnvmを入れておけば良かったと思いました。

ブログのデータ移行、はてなブログからのリダイレクト

ブログサイトの構築が完了したら、次ははてなブログからのデータ移行です。あまり記事数がなかったのと、効率的なやり方もよく分からなかったので、手作業（記事のコピペ）で移行しました。

また、はてなブログ側からのリダイレクトも設定したかったので、下記の記事を参考に、javascriptを埋め込んで対応しました。

https://beiznotes.org/move-from-free-hatenablog-without-301/

今後やりたいこと

今のところ、スターターのテンプレートからほとんど変えていないので、記事のタグ付けや検索機能等、今後カスタマイズしていきたいと思います。