<h1 id="h9473f11ee3">WordPressをやめてGatsbyを導入した</h1>相変わらず始めてはやめを繰り返してまた放置していたブログを再開することにしたのはいいけど、再開するにあたってどうにもWordPressを使う気にはなりませんでした。 つまるところブログというのはテキスト編集なのだけど、WordPressはあんまり純粋なテキスト編集に向いていない気がする。リロードの度にいちいち画面が瞬くのも気になる。 一番はWordPressの編集アプリがGutenbergになって初期のころ、編集画面に画面の半分がフォームで隠れるバグがあって満足に記事の投稿ができなくなったのが大きいかも。もちろんGutenbergはベータだったのだけどね。 CMSはWordPressだけじゃないので、他のCMSも試してみたが、PHP系にはちょっと気にいるものはなかったかな。 そのとき見つけたのが<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>で、前にも一度触ったことがあったけど試してみることにした。

GatsbyをWordPressの代わりに使ってみる

<h2 id="hebe98a0e3b">Gatsby開発コマンド</h2>Reactベースの静的サイトジェネレータのGatsbyで通常の開発コマンドでローカルLAN上でアクセスできなかったのでメモ。<pre><code>[shell]
# gatsby develop</code></pre>すると、<code>http://localhost:8000/</code>にてアクセスできるが、ローカルサーバで開発し他のPCからアクセスなどはできない。この場合は以下のコマンドでローカルLAN上に展開できる。<pre><code>[shell]
# gatsby develop -H ローカルIPアドレス -p ポート番号</code></pre> <code>192.168.1.2</code>で開発している場合は以下のようになる。<pre><code>[shell]
# gatsby develop -H 192.168.1.2 -p 8000</code></pre>

Gatsby DevelopにローカルLAN上からアクセスする

<h1 id="h2ffa8c86bd">Ubuntu 18.04 LTSにNode.jsの実行環境を用意する</h1>Ubuntu 18.04 LTSにNode.jsの環境を作るメモUbuntu 16.04でもこの方法でOKです nvmを使った構築手順です。 <h2 id="h3374efd879">nvmとは</h2>Node.jsは頻繁にアップデートがされており、逐次更新するのは大変です。 そこで、Node.jsのインストールやアップデートを管理するためのアプリがいくつかあります。 そのうちのひとつがnvmで、nvmはNode Version Managerの略です。 ちなみにapt経由でもNode.jsのインストールは可能ですが、かなり古いバージョンになっております。(未確認) <h2 id="h1cdd49e5ae">使用するライブラリをインストール</h2>まず、関連するライブラリをapt経由でインストールします。 (文頭の#はrootでコマンド実行すること意味します) <pre><code>[shell:shell]
# apt-get install build-essential libssl-dev
# apt-get install curl</code></pre> <h2 id="h2445e2ce6b">nvmのインストール</h2> これだけです。 <pre><code>[shell:shell]
# curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
# source ~/.bashrc</code></pre> これでnvmコマンドが使えるようになりました。 <pre><code>[shell:shell]
# nvm --version
v0.33.1</code></pre> ダウンロードできるNode.jsのバージョンは以下のコマンドで確認できます。 <pre><code>[shell:shell]
# nvm ls-remote</code></pre> ひたすら大量のバージョンリストが表示されます。 <pre><code>[shell:shell]
# nvm install v10.14.2</code></pre> バージョン番号の後にLTSと書かれている最新の安定版です。初めてインストールを行った場合は自動でデフォルトのバージョンとして扱われます。 これでNode.jsの実行環境が用意できました。Node.js用パッケージ管理ツールの<code>npm</code>もインストールされています。 <pre><code>[shell:shell]
# node -v
v10.14.2
# npm -v</code></pre> <code>nvm</code>と<code>npm</code>は一文字違いですが、全く別のツールです。npmはアプリを作成するときなどプロジェクト単位で頻繁に使いますが、nvmは基本的にNode.jsのインストールやバージョン切り替えでしか使いません。私はその都度使い方を調べています笑 <h2 id="h3483a5f0d2">nvmの使い方</h2> インストール済みのバージョンの一覧の確認や使用するバージョンを変更するコマンドです。 <pre><code>[shell:shell]
# nvm ls // インストールしているバージョン一覧
# nvm use v10.14.2 // 使用するバージョンを指定</code></pre> <code>use</code>コマンドでは一時的にバージョンが変更になり、再起動などを行うとデフォルトで設定されたバージョンに戻ります。デフォルトのバージョンを変更したい場合は以下のコマンドを使います。 <pre><code>[shell:shell]
# nvm alias default v10.14.2</code></pre>

ゆったりWeb手帳

気になったことをのんびり書くよ

Gatsby DevelopにローカルLAN上からアクセスする

Gatsby開発コマンド