Gatsby/Netlifyでモダンブログを構築する 3

今日はロゴのカスタマイズをしていきます。

Netlify CMSの管理画面はカスタマイズ機能が何もない

Netlify CMSの管理画面はカスタマイズ機能が何もありません。 ブログの投稿と、いくつかの固定ページの編集ができるのみです。

ロゴの編集もできません。 このままではKALDIのページになってしまいます。

ローカルにプロジェクトをクローンしカスタマイズを行う

そこで、Githubにあるプロジェクトをローカルにクローンしてカスタマイズをします。

エンジニアとしてはgit管理になるので逆に安心するポイントです。

ローカルで作業するにあたり、下記のインストールが必要です

  • Git
  • Node

ローカルでブログを立ち上げてみる

下記のコマンドでローカルでブログを立ち上げることができます。

git clone [リポジトリURL]
cd [クローンしたパス]
yarn install
gatsby develop

gatsby debelopの後、localhost:8000にアクセスするとローカルに立ち上げたブログにアクセスできます。

ロゴのカスタマイズ

いよいよ今日の本題です。 と言っても、ロゴをカスタマイズするだけであれば、下記のパスにある"logo.svg"を自分のロゴに置き換えるだけです。

 src/img/logo.svg
 static/img/logo.svg 

配置後、ブラウザをリロードするとロゴが入れ替わっているはずです。

ローカルの修正を公開する

ロゴの修正が終わったらgitにpushをしましょう。

あとは自動的にビルドが走り、数分後にはロゴが更新されているはずです。

まとめ

今日はロゴのカスタマイズをしましたが、

一番大事なのはローカルの開発環境を整えたことです。

これからデザインやUXをカスタマイズしていくのにガンガンコードを修正していき、オリジナルのブログに仕上げていきます。