独自ドメイン取ってブログを一日どころか3時間くらい(たぶん)で開設してみよう！！！ (ブログ改造編)

June 07, 2020

さて前回はブログのひな型を作成したので今回はそのひな型を自分用に改造してみよう！みたいなの書きます。
なにやるかはだいたい下の図にまとめました。

BEFORE

AFTER

タイトル変更

まずなにはともあれ「Gatsby Starter Blog」の文字列を「My Awesome Blog」とかに変えてみましょう！(My Awesome Blog の部分はもちろん自分のブログタイトルに変えてください！)

ホームページに表示されている文字列は大概、プロジェクト内のどこかのファイルに記述されている可能性が高いと思われます(単純な検索では簡単に見つからないケースも往々にしてあるのですが…この辺は慣れですたぶん！)。
そのため当該文字列をプロジェクト内で全文検索し、当該文字列を含むファイルの当該箇所を修正すれば、「Gatsby Starter Blog」を自分のブログの名前に編集できる可能性が高いです！

僕は開発環境として「Windows Terminal + neovim」を用いており、またこの記事より全文検索にはagというツールを用いており、下記のような検索結果となりました。

他のエディタ、たとえば VSCode などなら以下のような感じで検索できるかなと思います。

1. Ctrl + Shift + f で検索窓を表示

2. 「Gatsby Starter Blog」で検索

それでは見つかった Gatsby Starter Blog の文字列を変えてみましょう！
gatsby-config.js というファイルの中のsiteMetaData 以下の title の当該文字列を変えるとブログのほうが更新されると思います！その際になんと、ページのリロードは必要ないはずです！！
(下記 gif 参照)

hot_reloading

gatsby-plugin-manifest 以下の文字列を変えると、細かいのですが、たとえばスマホのブラウザで「ホームに追加」をしたとき、デフォルトで表示されるページ名が変わります(まあ試さないと気付かないかも…)。
いずれにしろどちらも同様に変更しておけば間違いない気がします。
下記のような見た目になるはずです！

プロフィール変更

次は図のプロフィール部分を編集してみよう！

さっきと同じ要領でやっていくのですが、すこーしだけコードを読み解く必要があります！！！

1. Written by Kyle Mathews ~ とひな型には書いてあります。先ほどと同じように全文検索していきます。
すると

content/blog/new-beginnings/index.md
src/components/bio.js

の2つのファイルがヒットすると思います。

これはあとで説明しますが、 content/blog/ 以下に配置されているファイルたちはブログの内容を記述した Markdown ファイルです。
今回編集したいのはプロフィールの部分なので、ここでは bio.js のほうを見ていきます。 bio とかファイル名に書いてあるし。ツイッタラには特になじみ深い言葉でしょう、bio。

bio.js の当該部分見るとこんな感じになってます。

ここで author.name と author.summary となってます。

なんとなく author の所有物たる name と summary を変更すればプロフィールの文言を変更できるように見えますし、現在表示されているプロフィールの文言が保存されている場所なのではないかとの予想が立ちます。

さてここで author について読み解いていきましょう！！！
さきほど author を見つけたコードの箇所を少し上に見ていくとすぐそこにありました。

なんとなく siteMetadata というものをチェックしてみると良さそうに見えます。
そして siteMetadata は先ほどタイトルを変える時にもチェックしましたね？ gatsby-config.js の中にあります！
gatsby-config.js にはそういった gatsby で作成されたサイトのタイトルや作者などの設定に関する情報がたくさん入っております。
なので今回のような改造を行いたいと思った時は、 gatsby-config.js をまず最初にチェックする、という習慣をつけておいてもいいかもしれません！！！
ちなみにこの config 系のファイルはどのプロジェクトでもだいたい似たような用いられ方をしており、ほかの環境で今回のような開発を行う際にも、まずは config ファイルを見てみるといいかもしれません…。

gatsby-config.js ファイルを見るとすぐに見つかります！さっそく name と summary を変えてみましょう。僕はこんな感じに変えてみました！

...とんでもなくダサいしとんでもなく見にくいですね？？？
........フォント変えたりいろいろしますか。

さてまず src/utils/ 以下に common.css を作成します。例えば VSCode だと以下のような感じで作成できます。

Terminal からなら src/utils/ 以下へ cd でもして touch common.css くらいでいいかと思います！

さっそく作った common.css を編集していきましょう！！！下記を試してください！！！！！

めんどくさくなってきたので駆け足とはなりますが、上記の css ファイルを index.tsx ファイルで読み込んでいきましょう！！！
index.tsx を開き、下の写真の箇所を探し、コードを足してみてください！！！ common.css ファイルを読み込んで、適用したい範囲(この場合全体)を囲んで、適用している感じです！！！

※ ここでは便宜上インデントなどコードのスタイリングの部分をガン無視してますごめんなさい…そこまで解説するのめんどくさかったです。

ちょっとフォントが可愛くなったと思いませんか...？？？

…うーん、なんかまだまだダサいですね。そもそも「この写真の人誰だよ」ってなりますね。
写真変えますか！！！このままだとこの写真の人(…実はこの Gatsby という技術を支えているすごい人)が「一介の無職ツイッタラー」に見えてしまいますし…。

プロフィールに関することなので、先ほどの bio.js を試しに見てみますか。上からコードを見ていくと下記のようなコードが見えてきます。

profile-pic.jpg があやしいです。ここを変えればなんとなくプロフィール画像を変えることができそうに見えます。
ではこの profile-pic.jpg がどこにあるか検索してみましょう！！！僕の環境ではこの記事でも紹介したように fzfを用いて検索します。
他の環境、たとえば VSCode を用いたファイル検索は Ctrl + p です。下記のような検索ボックスが出てきます。

ファイルを見てみると下記のようにプロフィールに現在表示されている青年の顔が表示されることが確認できると思います。

このプロフィール写真を変えるには2つの手段が思い浮かぶと思います。

1. 変更先の写真の形式を jpg 形式で保存し、名前を profile-pic.jpg で保存する。
2. 現状 profile-pic.jpg が保存されているのと同じディレクトリに好きな名前で自分のプロフィール写真を保存し、 bio.js 内の当該ファイル指定箇所のファイル名を自分のファイル名に変更する。

今回はプロフィール写真が png である可能性も考慮し 2 でいってみましょう！！！

まずプロフィール写真を当該ディレクトリに配置します。
いろいろと方法はあるのですが、 VSCode だとドラッグアンドドロップできてわかりやすいです。以下のような感じ。