1. TOP
  2. Spearly CMS
  3. チュートリアル
  4. WEBサイトをSpearlyCLOUDで公開しよう

WEBサイトをSpearlyCLOUDで公開しよう

サンプルサイトをSpearlyCLOUDでデプロイします。
今回はGitHubを用いてデプロイしていくため、GitHubアカウントをあらかじめご用意ください。

チュートリアル用GitHubリポジトリを作成する

  1. GitHubを経由して公開を行います。
    GitHubアカウントをまだお持ちでない方は事前に登録をお願いします。
  2. チュートリアル用のリポジトリを追加しましょう。
    設定は基本的に初期値のままで問題ありませんが
    公開設定は「Private」を選択します。

リポジトリにPushする

  1. 以下のコマンドを実行して、作成したリポジトリにpushします。
    cd ${作成したチュートリアル用プロジェクトのディレクトリ}
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/${お使いのアカウント}/${任意のリポジトリ名}.git
git push -u origin main

SpearlyCLOUDにGitHubでログインする。

SpearlyCLOUDはGitHubとの連携を用いてデプロイを行うため、GitHubアカウントでのログインをお勧めします。
それでは以下の手順でユーザー登録を行いましょう。
  1. SpearlyCLOUDトップを開く
    SpearlyCLOUDトップから「新規登録」もしくは「ログイン」をクリックしてください。
  2. お持ちのGitHubアカウントのメールアドレスかIDとパスワードを入力し、GitHubへログインしてください。
  3. 初めてログインする場合、SpearlyにGitHubでログインして良いか確認画面が出るため、「Authorize Spearly」をクリックし認証してください。
  4. SpearlyCLOUDのプロジェクト管理画面が表示されます。

連携するリポジトリを選択する。

  1. 「サイトを追加する」を選択
  2. GitHubを選択し、「次へ」をクリックします。
  3. SpealyCLOUDでデプロイするGitHubのリポジトリを選択します。
    Spearlyが読み込めるリポジトリのリストが表示されます。
    GitHubで認証しているリポジトリがない場合、No Dataと表示されますので、下記の「GitHubのリポジトリが表示されない場合」を参照ください。
    (Organizationのリポジトリは権限がない場合Spearlyで開けないので、そのリポジトリの管理者に問い合わせてください。)

    GitHubのリポジトリが表示されない場合

    リポジトリを追加しましょう。

    1. 「リポジトリを追加」をクリックします。
    2. 別ウインドウで開かれたGitHubのページから、SpearlyCLOUDへのリポジトリのインストール方法を選択します。
      　「All reposirtories」は、全てのリポジトリが選択されます。
      　「Only select repositories」は選択したリポジトリのみインストールします。
    3. 「Only select repositories」を選択します。
    4. 「select repositories」からSpearlyへインストールしたいリポジトリを選択します。
    5. Spearlyへインストールしたいリポジトリを選択できたら、「install」をクリックします。
    6. 「save」をクリックしてSpearlyへのリポジトリのインストール完了です。
    7. SpearlyへGitHubのリポジトリをインストールする
      デプロイしたいリポジトリを選び、デプロイのための設定画面へ遷移します。
これにてSpearlyCLOUDでGitHubの連携するリポジトリを選択することができました。

サイトをデプロイしよう。

ビルド情報設定を記入し、サイトのデプロイを完了しましょう。
  1. 「サイトを追加する」からデプロイしたいリポジトリを選択し、「次へ」をクリックします。
  2. デプロイのための各項目についてここで設定します。サイトの形式に合わせて必要な設定をしましょう。
    チュートリアルのためにダウンロードしたサンプルサイトであれば以下の設定で構いません。

    • サイト名
      spearly-blog
    • デプロイブランチ
      main
    • ビルドコマンド
      # 本チュートリアルでは必要ないので、無記入で構いません。
    • Distパス
      .
    • ルートファイル
      index.html
    • エラーファイル
      index.html
    • 環境変数
      # 本チュートリアルでは必要ないので無記入で構いません
  3. 「デプロイ」をクリックして設定完了です。
    あとは自動でビルド&デプロイされますので、終了次第、生成されたurlから確認しましょう。

    「デプロイ履歴の確認」をクリックして、デプロイ状況を確認しましょう。

    一番上の履歴をクリックするとデプロイ状況を確認することができます。
    もしデプロイに失敗した場合はデプロイ設定項目をお見直しください。

    ビルド状況が進むと、下記の写真のようにログが更新されます。

  4. urlからサイトを確認する。
    進捗率が100%になればデプロイ完了です。
    サイトリストの画像の部分をクリックしていただくと、生成されたurlへ遷移することができます。

実行許可ドメインを設定する

  1. localhostの時と同様に、今回公開したサイトのURLを実行許可ドメインに追加します。

公開したWEBサイトの動作確認をする

サイトは確認できましたでしょうか。

このようにSpearlyCMSとCLOUDを用いることによって簡単にコンテンツを管理、公開することが可能になります。

今後サイトを更新していく際は、指定したGitブランチにpushしていくだけで、自動で更新、デプロイが行われます。

他にも、API呼び出しでコンテンツを表示する方法や、
順番やページネーションのオプションなど、
紹介していない機能がありますので、下記のリンクからぜひご覧になってください。


最終更新日: