はじめに

勉強を兼ねてホームページを自作してみました。
偉そうにオフィシャルサイトとか言っちゃってますが、オフィシャルもクソも、お前に関するアンオフィシャルがこの銀河に存在したことは未だかつてないだろって話なんですが、
まぁその辺りは大目に見てください。

さて、サイト制作にあたり学んだことを備忘録も兼ねて残しておこうと思います。
自分のサイトを作ってみたい、興味があるけど方法がわからない、という方の参考になれば幸いです。

目標

• 無料で作成・公開する（ドメイン代除く）
• できるだけ楽に
• それでいて多少はおしゃれに

私はSEの端くれとして生計を立てていますが、Web系は全くの門外漢です。
それでもわりと気軽に楽しく作れたので、プログラミングをかじったことがある方であれば無理なく再現できるはずです。
何しろアウトラインがわかっていれば、コーディングはchatGPTがほぼやってくれるので。
（しかし、こうなるといよいよ私のクビは涼しくなってきますね……）
全体の工数はざっくり30hくらいでしょうか。
と言っても多くの人にとって不要であろうこのブログ部分でハマりまくったので、そこを省いてしまえばもっと簡単に実装できるかと。

実際に作ってみる

前述の通り、フロントエンドは何者だ？という状態でもchatGPTが優しく導いてくれます。
ただ、「ホームページを作りたい」と漠然な質問を投げかけても、様々な方法を列挙されるだけで結局具体的な手順がわからん、となりがちです。
本記事では実際に私が辿ったサイト公開までの道筋をざっくりと解説します。
以下のアウトラインを参考にchatGPTに質問していくと効率良く作業を進めることが出来ます。
（付け焼き刃なので、細かな説明に誤りを含む可能性があります。また、最適な方法でない場合があります。）

ステップ1.環境構築

今回はGatsbyというReactフレームワークを使用しました。
（Next.jsの方が良いという説もありますが、個人サイトを作る程度のレベルならGatsbyの方が学習コストが低そうと感じたため）
Gatsbyを使って静的サイトを構築することで比較的安価に（あるいは無料で）公開することができます。
また、Node.jsのバージョン管理ツールとしてVoltaを用いました。

難しくて何を言っているのかわからんという人も
「VoltaでGatsbyをインストールしてサイトを作成する方法を教えて下さい」
とchatGPTに聞けば具体的なやり方を教えてくれるので、目を瞑ってコピペしまくればベースとなるページが完成します。

ステップ2.おしゃれな感じするための準備

サイトを装飾するのにtailwindCSSを導入しましょう。
あまりCSSに詳しくなくとも、あらかじめ用意されたクラスを適応していく形でレイアウトを設定できます。
メリット・デメリットあるようですが、初学者が使う分にはデメリットはほぼ無いように感じました。
むしろchatGPTに質問しやすい/書いてくれるコードがわかりやすくなるというメリットがかなり大きいです。

ステップ1に続いて「tailwindCSSを用いてサイトを装飾してください」と聞くと良いと思います。

ステップ3.ページを作る

IndexページやPortfolioページなどのサンプルをchatGPTに書いてもらい微調整します。
ブログを作るなんて凝ったことをやらなければ、ほぼコピペ一発で済むはず。

ステップ4.サイトを公開する

本ページはCloudFlare Pagesを用いて無料で公開しています。
GitHubにリポジトリを作ってpush（更新）するたびデプロイ（自動で最新版が反映・公開）されるようにすると非常に便利です。

よくわからなければ「GitHubにプロジェクトフォルダをアップロードする方法」を聞いてみましょう。
CloudFlare Pages側の設定は特に難しいことはないので、マニュアル通りに進めれば大丈夫だと思います。

ステップ5.独自ドメイン

特に意識しない場合、公開されたサイトのURLは借りたサービスから割り振られたドメインを使う形になります。
自分の活動名などをURLにしたいのであれば、独自ドメインの取得・設定が必要です。
私はお名前.comで取得しました。1年後にドメインの更新料はかかりますが、それまでは無料で使用できます。

独自ドメイン設定時には以下のページを参考にしました。
Cloudflare Pagesにカスタムドメインを設定する

おまけ.SEO対策

サイトを検索結果の上位にヒットさせたいと思うとSEO対策をする必要があります。
以下のページを参考にしました。
Gatsby: SEO対策（最低限やっておくこと）

また、Gatsbyのプロジェクトを立ち上げた際にデフォルトで存在していたseo.jsをもとに多少metaに情報を持たせるようにしました。

SEO対策の効果がいかほどのものか正直わかりませんが、この程度の作業量ならおまじないとしてやっておくと良いかもしれません。

ホームページを作って何の意味があるの？

楽しいです。
父親のホームページビルダーを借りて、パワプロの育成論を熱く語るサイトを作った少年時代を思い出しましたとも。
SNSやレンタルに頼らずに、オーダーメイドの自分のお庭が出来るのはやはり良いですね。
手間暇をかけてレンタルサービス未満のこのブログなんてまさに枯山水のよう！見るたびうっとりって感じ。
人生に具体的なメリットなんていらないんですよ。無駄でこそロマンなので。たとえ黄金郷は空にあろうがね。