Netlifyを使って自分のプロフィールサイトを簡単に公開する

はじめに

何かプロフィールサイトを作って公開したいと思ったときに、方法はいくつかあると思います。
今回は、Netlifyを使って簡単に自分のプロフィールサイトを公開する方法について書いていきたいと思います。

環境

• ArchLinux

Netlifyとは

Netlifyは、最新のWebプロジェクトを自動化するためのオールインワンプラットフォームです。ホスティングインフラストラクチャ、継続的インテグレーション、およびデプロイメントパイプラインを単一のワークフローに置き換えます。プロジェクトの成長に合わせて、サーバーレス機能、ユーザー認証、フォーム処理などの動的機能を統合します。

ドキュメントより抜粋

料金

個人的なプロジェクト、趣味のサイトなどは無料。使える機能としては

• Gitからの自動ビルド
• グローバルエッジネットワークにデプロイする
• プッシュごとのサイトプレビュー
• 任意のバージョンへの即時ロールバック
• 静的アセットと動的サーバーレス機能をデプロイする

Netlify

手順

1. プロフィールサイトの作成

まずはプロフィールサイトを作らなければ始まりません。今回はReactのCreate React Appを使います。

yarn create react-app mypage
yarn start

これがブラウザで表示されればok

※ 今回はあくまで公開する方法の紹介なので、サイト自体の作りは簡単に済ませちゃいます。

構造はこんな感じ

App.js

import './App.css';
import profileimg from "./profileimg.png";

function App() {
    return (
        <div className="body">
            <div className="header">
                <h1>MyPage</h1>
            </div>

            <div className="main">
                <img src={profileimg} alt="profileimg" />
                <div className="text">
                    <h3>About</h3>
                    <p>Hello My Profile Page!<br></br>
                    Name:Taro<br></br>
                    Birthday:2021/03/04
                    </p>
                    <h3>Study</h3>
                    <p>JavaScript / HTML / CSS</p>
                </div>
            </div>

            <div className="footer">
                <p>Copyright ©</p>
            </div>
        </div>
    );
}

export default App;

App.css

.body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    padding: 10px;
    background-color: #dcdcdc;
}

.header h1 {
    margin-left: 40px;
}

img {
    border: 2px solid black;
    border-radius: 50%;
}

.main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main h3 {
    margin-bottom: 0px;
}

.text {
    margin: auto 40px auto 40px;
    display: flex;
    flex-direction: column;
}

.footer {
    padding: 10px;
    text-align: center;
    background-color: #dcdcdc;
}

こんな感じの画面が表示されていたらokです

そしてビルドする

yarn build

新しくbuildというディレクトリができているはずです。

2. GitHubにリポジトリを作ってプッシュ

分かる人はとばしてもらってもいいですが、一応手順を書いておきます。
アカウント登録をしていない人は登録してもらって、している方はリポジトリを作ります。
この時、PublicにするかPrivateにするかはどちらでも大丈夫です。
今回はPublicで作成します。

作成したときに手順はページに出てきますが

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin {url}
git push -u origin main

今回はこれでプッシュ
この時注意しないといけないのは、今回yarnを使用しているためyarn.lockがあるディレクトリ内で行ってください。理由は後ほど説明します。

3. Netlifyで公開する

最後の公開の手順です。Netlifyにアカウント登録をしていない人はまずアカウント登録をしてください。
登録が終わったら画面にあるNew site from Gitをクリック

すると下の画面が表示されるので、

GitHubをクリック。
別ウィンドウが開かれると思います。

この画面が出たら、自分のアカウントを選択。

スクロールするとリポジトリを選択する部分があります。All repositoriesでもいいのですが、今回は作成したリポジトリだけにしたいのでOnly select repositoriesで作成したリポジトリを選択します。

そしてNetlifyの画面へ戻ります。画面が変わらないようであればページ更新してもらって、上記と同じ様にGitHubをクリックしてもらえれば先程選択したリポジトリが表示されていると思います。
そのリポジトリをクリックすると

この画面が出てくればokです。
もしBuild CommandとPublish directoryが空白であれば画像と同じ様に入力してもらえれば大丈夫です。

ここで思い出してほしいのが、リポジトリにプッシュする時のこの文。

この時注意しないといけないのは、今回yarnを使用しているためyarn.lockがあるディレクトリ内で行ってください。理由は後ほど説明します。

これがここで関わってきます。もしyarn.lockがないディレクトリでプッシュしてしまっていると、Deploy siteをしたときにエラーがでて失敗します。

Yarnをローカルで使用してJavaScriptの依存関係をpackage.jsonファイルにインストールする場合、Yarnはyarn.lockインストールされたモジュール名とバージョンを記録するファイルを作成します。このファイルをリポジトリ内のサイトのベースディレクトリにコミットすると、Yarnがインストールyarnされ、コマンドを実行してyarn.lockファイルで指定された依存関係をインストールします。この動作は、NETLIFY_USE_YARN以下で説明する環境変数でオーバーライドできます。

ドキュメントより抜粋
自分も最初、command not foundといった文でエラーが出て失敗したのですが、yarn.lockがないとyarnがインストールされず、エラーになるみたいですね。

では以上を踏まえた上でDeploy siteをクリックします。
するとデプロイが始まるので終わるまで待ちます。
成功するとPreview deployに変わりますのでクリックすると、先ほど作成したページが表示されます。

URLの変更

初期のURLでは分かりづらいので、自分が指定したものに変えます。
(そのままでもいい人は飛ばしてください)
ホームに戻り、追加されているSitesに追加されたリンクをクリック。
Site settingsをクリックしてChange site nameをクリック。
すると入力欄が出てくるので、好きな名前を入力しましょう。
※ すでに使用されているものは設定不可

まとめ

以上で簡単ではありますが自分の作成したサイトをNetlifyを使って公開する方法でした。
今回作成したページ
https://optimistic-almeida-cd1568.netlify.app/

参考