Re:ゼロから始める個人サイト
この記事はくえばアドベントカレンダー12/16担当記事です
次の記事→
ベルンは激怒した。
必ず、Xの邪智暴虐の王を除かなければならぬと決意した。
ベルンにはWeb系がわからぬ。
ベルンは、ただのインターネットオタクである。
ツイートをし、ふぁぼりながら暮して来た。
けれども改悪に対しては、人一倍に敏感であった。
一応スペック
俺
社会人、(25.7才)
ネットワーク知識、なし(IT土方業で最低限の情報を知るためQiitaやStackOverflowをみるが)
予算、無し
Xになってから運営が凍結祭りやAPI制限で感情が薄れて行く
今はほとんど残っていない
屍みたいなものだ
凍ったアカウントをみると悲しくなる
Xはもうおしまい、時代は個人サイトです*1
フォロワー曰く、AWSのS3とRoute 53で静的ウェブサイトが作れるとのこと
早速記事を読むアタシ
................................................
S3とかRoute 53とかって、何なのよ〜〜〜〜〜？？？？？？？？？（CV：津田美波）
基本的に上に貼った参考サイトを元に進めていきます
AWSに登録
今回はどうも全てをAWSで構築するのでAWSのアカウントが無ければ始まらない、まずサインインより始めよ
ここで重要なのはクレジットカードかデビットカードが無ければAWSに登録することはできないということです
既に持っていた人はラッキー！そのまま登録を進めましょう
持っていない人は......すぐに審査が終わるクレジットカードに申し込むという手があります*2、クレジットカードに抵抗がある方はデビットカードを発行してきましょう
ドメインを取得する
ドメイン関係でお世話になるのはさっき名前が出たRoute 53というサービスです
Amazon Route 53（スケーラブルなドメインネームシステム (DNS)）| AWS
平たく言うと、ここに登録することで最終的に独自ドメインを使って個人サイトにアクセスできるようになります
参考サイトではお名前ドットコムでドメインを取得していますが今回はAWSで取得します
Route 53のメニュー画面を開くと登録済みドメインの項目があるのでそこをクリックします
まず自前のドメインを確保する必要があります
個人サイト構築時に真っ先にお金がかかるのがここ
末尾次第で費用が変わってくるので慎重に選びましょう*3
momijiroumanjyu.comは既にあるので使えません(それはそう)*4
どのドメインにするか決めたらチェックアウトをします
購入手続きを済ませたらドメインの取得は完了です
これで今日からあなたも自分のオリジナルドメイン持ちです、おめでとうございます！
ウェブサイトの中身を作る
ドメインが取得できたら次はウェブサイトの中身を作っていきます
とりあえずでいいので参考ウェブサイトを見ながらindex.htmlを作っていきましょう*5
筆者は初期はこんな感じにしてました*6
ページのデザイン目的でbootstrapというツールを使用していますがここはお好みなので自由です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>もみじろうまんじゅう</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<h1><span style="color:aqua;">もみじろうまんじゅう</span></h1>
<h2>by MO3JI6</h2>
<br>
<span style="font-size:500%;">工事中</span><br>
<button type="button" class="btn btn-danger" onclick="alert('バナナのナナチ、バナナナチ')">押すな！</button>
<br><br>
<a href="./kimoi_warehouse.html"><span style="font-size:150%;">1024×662画像保管庫(仮)</span></a><br>
<br><br><br><br>
<a href="http://king-cr.jp/special/joshiraku/top.html"><span style="font-size:250%;">2012年の萌え</span></a><br>
<a href="https://onimai.jp/"><span style="font-size:250%;">2023年の萌え</span></a><br><br><br>
<a href="http://www.lucky-ch.com/" target="_blank" rel="noopener noreferrer"><img src="banner_01.gif" alt="らき☆すた公式サイト" width="200" height="40" border="0"></a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</div>
</body>
</html>
index.htmlを作成し自分のブラウザ上でそれっぽい画面が表示されることを確認したら次はこれをインターネットで見られるようにしていきます、ドキドキ
作成したhtmlファイルを全世界に公開するためにS3というサービスを使います
S3の本当の名は𝙎𝙞𝙢𝙥𝙡𝙚 𝙎𝙩𝙤𝙧𝙖𝙜𝙚 𝙎𝙚𝙧𝙫𝙞𝙘𝙚で、ここにファイルを保存するとそこのURLが発行され全世界中からアクセスできるようになります
このサービスはメインとしてクラウドのストレージを提供するものになりますが、ここを上手く使うことで静的ウェブサイトを構築することができます（具体的には独自ドメインにこのストレージのファイルでアクセスするイメージです）
ウェブサイトのフォルダ構成は大体こんな感じのイメージです(この記事書いてるときのフォルダなので今現在は若干変わってるかもです)
人によってはhtmlファイルを全てフォルダの中に配置するかもしれませんが、そこはお好みで
インターネットから自分の設置したhtmlファイルを開けるようにする
次はRoute 53の設定をしていきます
ここは基本参考サイトを見て進めていけば大丈夫です
一点ネームサーバーに関する注意です
AWSでドメインを作成するとどうもあるタイミングでネームサーバーに勝手に登録されてるっぽいです
不安になったらお手持ちのPCでシェルを起動してネームサーバーの場所をチェックしてみましょう
こちらはWindowsPowerShell上でnslookupというコマンドを実行することでRoute 53に登録したドメインのIPアドレスを表示させたものになります
ここの権限のない回答のAddressesのところにIPアドレスが表示されていれば🆗です
取得したドメインでアクセスできるようになるまでは少し時間がかかるので適当に待って、ブラウザで取得したドメインを入力して自分の作ったindex.htmlが表示できれば完了です
ここまでお疲れさまでした
あとは自分の作りたいコンテンツを作ってインターネットを楽しんでいきましょう🤓
次にやることとしてはCloudFrontを使ってのhttps通信化をオススメします((https化ガチ初見の方は通信の暗号化とかでググればいろいろ調べられると思います あと、https化しないと検索エンジンから検索したときの表示順にも影響するとの噂が(SEOの話)))
参考までに現状の
http://momijiroumanjyu.com はというと
キモい画像保管庫を作ったり......
サンボルのセコい譜面リストをメモしたり......
日記を書いたり......
入力した内容がメールで届くフォームを作ったり......
自分のやりたいようにできるので楽しさ無限大です
ここまで読んでいただきありがとうございました、それでは～～～～～～～
お負け
個人サイト運営って費用どれぐらいかかるの？？って思われそうなので目安として貼っておきます
維持費として月に数百円くらいかなあといったところ
年に1回ドメインの更新があるのでそこが一番出費として大きいかも
AWSは基本的に従量課金制なので使ったら使った分だけ費用が発生します、そこだけは注意しましょう
追伸
この記事の下書きを読んでフィードバックをくれた某氏に圧倒的感謝
