こんぶラボ

個人サイトの作り方

オタクもすなる個人サイトといふものを、私もしてみむとてするなり。

1. ドメインを取得する

決めること

ドメイン名
利用するドメイン取得サービス

必要なもの

クレジットカード
メールアドレス

好きなドメイン取得サービスで好きなドメインを取得します。初期費用より更新料に注意。値段はドメインにもよりますが年額2000円程度。

2. サーバーを借りる

決めること

利用するサービス
サイトの更新スタイル

サイトの構成を決めるにあたって最重要になるのがコンテンツの作成と更新のスタイルになると思います。 WordPress等のCMSを使用したいか、HTMLファイルをアップロードしたいかなどで利用するサービスが変わります。今回はVPSを使ってローカルで生成したHTMLをGitHubにプッシュしたら更新される感じにしたいと思います。

必要なもの

クレジットカード
GitHubアカウント

というわけで、VPSのサーバーを契約してGitHubにリポジトリを用意します。値段は月額1000円程度。

3. サーバーの設定

VPSなので、適当なOSのイメージで起動して各種インストールをしていきます。

入れるもの

Webサーバー
Git

WebサーバーはOSのパッケージマネージャーを使って入れても良いですが、今回はPodmanを用いてコンテナを動作させました。

4. HTMLを準備する

何かフレームワークを使ってもいいんですが、とりあえずHTMLを手で打ちます。なかなか面倒くさいので、MarkdownからHTMLを生成するようなやつがあると便利そう。

5. 公開

開発環境からGitHubへプッシュ、本番環境でプルしてHTMLファイルをサーバーが認識するディレクトリに移動してインターネットで表示されるか確認します。

6. HTTPS化

証明書を取得してHTTPS化します。 certbotってPython製っぽいんですね。

            sudo certbot certonly

プロンプトに従い、webrootには/usr/share/nginx/htmlを入力する

/etc/nginx/conf.d/https.conf

            server {
                listen 443 ssl;
                root /usr/share/nginx/html;
                index index.html;
                ssl_certificate /etc/letsencrypt/live/knb-lab.com/fullchain.pem;
                ssl_certificate_key /etc/letsencrypt/live/knb-lab.com/privkey.pem;
            }

            sudo podman run --name ${CONTAINER_NAME} -d \
            -p 80:80 -p 443:443 \
            -v /usr/share/nginx/html:/usr/share/nginx/html \
            -v /etc/letsencrypt:/etc/letsencrypt \
            -v /etc/nginx/conf.d:/etc/nginx/conf.d \
            docker.io/nginx:latest