2019年版、オタク向け個人サイトの作り方
2020年版を書きました。この記事よりさらに手軽に気軽にサイトを作れます。
ちょっと前にオタク界隈での定期イベント「脱twitter、個人サイト回帰運動」が何度目かの盛り上がりを見せていましたね。
まあこのイベント、何回発生してもtwitterからオタクは減らないし個人サイトも復権しないんですけど…
このあと個人サイトの大復権時代がやってくると、
— 佐藤ぶそあ (@busoa) February 25, 2019
「htmlとかスタイルシートとか、こんなのわかんないよ」
「どきな坊主、こうやるんだ」
「ババア！」
みたいなのが日本各地のご家庭で見れるかもしれないと思うとわくわくしますね。
しかしこういうツイートがバズったりすることですし、個人サイト全盛期を知っている古のオタク（というか腐女子）にいま一度個人サイト製作の楽しみを思い出してほしい。
地道なタグ打ちで培ったhtmlとcssの知識をこのまま腐らせておいていいのか、否である！
…とは言っても、あの頃とはサイト製作事情もだいぶ様変わりしています。<frameset>は死んだのだ。<font color=red>もな。
この記事では、最近流行りのwebサイト製作事情について書いていきたいと思います。観測範囲は私ひとりです。
予防線
以下の記述は、webフロントエンドの知識が2000年代で止まっている、かつhtmlとcssが多少わかる程度の方向けのものです。
説明は正確さよりも目先のわかりやすさを優先しております。
こんな人にオススメ！
・webサイト製作に興味がある！
・できればお金はかけたくない…
・でも、広告が入るのはイヤ！
・html、cssは多少わかる
・javascriptもチョットデキル（全くできなくても大丈夫です！）
こんな人には、ちょっと向いてないかも…
・タグとか絶対書きたくない（Wix使って、どうぞ）
・アルファベットを見ると吐き気をもよおす（twitterにこもってた方がいいよ）
・労力は金で解決したい（外注しましょう）
・WordPress使いたいです！（WordPress使いましょう）
・CGI使いたいです！（さくらとかいかがです？）
・PHP使（ry
今回の構成
このあと長々と諸々の説明をしていくわけですが、先に今回使うサービスを名前だけ挙げておきます。
わかる人はこれだけで何をするかおわかりになると思いますので、あとの説明は読まなくても大丈夫です。
・GitHub
・GitHub Desktop
・Netlify
名前だけは知っている、という方もいるかもしれませんが、これが何なのかは今回特に理解する必要はありません。
気になる方は自分で調べましょう。
GitHub
GitHubは、あなたが作ったサイトのソースコードを保存しておくところです。
.html、.css、.jsファイルの他に、大きくない（10MBとかでなければ大丈夫です）画像ファイルも置いておけます。
GitHub Desktop
GitHubのデスクトップアプリです。
UIは英語ですが今日び日本語化されてないアプリなんてクソほどあるから大丈夫やろ
Netlify
GitHubに保存したソースコードをもとに、webサイトをワールドワイドウェブに公開します。
これも英語だけど難しい単語はそんなにないからいけるいける
1.GitHubのアカウントを作る
username（英数字ならなんでもいいはず）とメールアドレス、任意のパスワードを入力して「Sign up for GitHub」をクリック！
「Verify account」っていうところで私はロボットじゃないですよという証明をしなければならないのでパズルを解きます。
そしたら「Create an account」をクリック！
プランを選びます。今回は無料（Free）プランを選んで「Continue」をクリック！（その上のチェックボックスはとくにいじらなくていいです）
なんか選ばされますが「submit」の横の「skip this step」をクリックします。
あとは登録したメールアドレスに認証メールが届くのでメール内のURLをクリックして登録完了です！
2.リポジトリを作る
リポジトリ＝サイトのフォルダ みたいなものです
右上の「＋」をクリックします。
「New repository」をクリックします。
「Repository name」に適当な名前を入力
「Description」は空欄のままでおｋ
「Public/Private」はPrivateを選ぶ（Publicにするとソースコードが公開されます）
その下は何もいじらずに「Create repository」をクリック！
これでリポジトリの作成は完了です。
3.GitHub Desktopをインストールする
英語だけどまあ雰囲気で進めてください
「Download for Windows (64bit)」をクリック、インストーラのダウンロードが始まります。
ダウンロードが終わったらexeファイルを実行してください。たぶん何も考えずにボタンをクリックしてれば終わるんじゃないかな（インストールしなおすの面倒なのでスクショはないです、あとで貼るかも）
4.GitHub DesktopからGitHubにログイン
GitHub Desktopを起動するとアカウントにログインするようにポップアップが出るはずなので、さっき登録したIDとパスワードを入力してログイン
5.リポジトリの中身を自分のPCにコピーする
リモートリポジトリをローカルにクローンするといいます。
メニューから、「Clone repository」をクリック！
さっき作ったリポジトリを選択して、コピー先のフォルダ（空のフォルダ）を指定して「Clone」をクリック！
6.とりあえずindex.htmlだけ作る
指定したフォルダに「.git」というフォルダができているはずなので、「.git」フォルダと同じ階層にindex.htmlファイルを作ります。
中身はハロー、ワールド とか書いておけばいいです。
7.GitHub DesktopからGitHubに変更内容を反映させる
この操作をコミット、プッシュと言います。
ローカル（自分のPC）のみで変更を反映→コミット
リモート（GitHub上のリポジトリ）にも反映→プッシュ
だと思ってください。
「index.html」を作っただけなら、左側のペインに「index.html」のファイル名が表示されていると思います。
右側に表示されているのは変更したファイルの差分です。
その下のテキストボックス、「Summary (required)」に変更内容をを入力して、「Commit to master」をクリック！
上の「Push origin」をクリック！
ちょっと待つとプッシュが完了します。
これで作成したindex.htmlの内容がGitHubに反映されました！
8.Netlifyのアカウントを作る
GitHubアカウントでログインすると楽です
「GitHub」のボタンをクリック！
GitHubでの認証を求められるので、メールアドレスとパスワードを入力してサインインします。
9.Netlifyでサイト公開の準備をする
右上の「New site from Git」をクリック！
「GitHub」をクリック！
アカウント連携を求められるので認証します。
「Install」をクリック！
リポジトリを選択する画面になるので、サイトのリポジトリを選択します。
そのまま「Deploy site」をクリック！
10.おめでとうございます！あなたのサイトが公開されました！
緑色の「https://～」てリンクがURLです。
公開（デプロイ）してすぐはURLをクリックしてもサイトが表示されないことがありますが、少し待つと表示されます。
ね、簡単でしょ？
えっなにこの変なURL…
安心してください、変えられます。
「Site settings」をクリック！
「Change site name」をクリック！
好きなURLを入力します。
英数字と半角ハイフン（-）が使えます。
そしたら「Save」をクリック！
おめでとうございます！URLが変更できました！
とはいっても…
サイトのデザイン、いちから考えるのはめんどくさい…
もっと今っぽいサイトにしたい！グリグリアニメーションさせたい！
javascript覚えましょう（ニッコリ）
手っ取り早く今っぽいサイトにしたいならjQueryとBootstrapをおすすめしときます。
ちなみに私のサイトはvue.js（vuepress）+vuetiryです。
何言ってるかわからない？ 大丈夫、個人サイト沼は深いようで浅いようでやっぱり深い
と、ここまで書いたけどやっぱり今回も個人サイト復権の兆しはないしこれから先もないんやろなぁ…
サポートをしていただけると私がたいへんよろこびます。 ちなみに欲しい物リストはこちら→https://www.amazon.jp/hz/wishlist/ls/2DBRPE55L3SQC?ref_=wl_share