200stack ロゴ

📚 200stack のやさしい解説 · 第 3 回

push するだけで
サイト公開の流れ

ファイルを手でサーバーへ上げる更新から、GitHub に push するだけで公開される更新へ。言葉の意味から、順に見ていきます。

もも

ももサイトを更新するたびに、ファイルをサーバーに上げるのが大変…

おもち(200stack のマスコット)

おもちそれなら、push するだけで公開する流れを、図で見てみよう!

動画で解説 🎬

動画で解説

むかしながらの更新 ✋

手で上げる更新と、push で公開する更新

よくあるのは、手元の PC で直したファイルを、自分でサーバーへ上げるやり方です。

手でサーバーへ上げる

  1. 💻 自分の PC
  2. ✋ 手で 1 つずつ
  3. 🖥️ サーバー
  • どのファイルを上げたか分からなくなる
  • 上げ忘れで、新しいページと古いページが混ざる
  • ほかの人が直したファイルを、古いもので上書きしてしまう

push で公開する

  1. 💻 自分の PC
  2. 📤 push
  3. 🎉 公開
  • 変わったファイルを、自分で覚えておかなくていい
  • 最新の状態をもとに、組み立てて配信する
  • 上げ忘れや古いファイルでの上書きが起きにくい

どの困りごとも、原因は「人が手で運んでいる」こと。運ぶ作業を仕組みに任せれば、間違いを減らせます。

きほん 📒

Git と push って?

  1. Git = 変更の記録帳

    いつ、どのファイルのどこを変えたかが、一つずつ順番に残る

  2. GitHub = 記録帳の置き場

    その記録帳を、インターネットの上に置いておける場所

  3. リポジトリ = サイトごとの置き場

    サイトのファイルと記録帳を、まとめてしまっておくところ

  4. push = 記録を送る

    手元の PC で付けた記録を、GitHub へ送ること

push は「このサイトの最新の状態はこれです」と GitHub に知らせる操作です。

ステップ 1 🔗

最初に 1 回だけ、リポジトリをつなぐ

200stack では、はじめに GitHub のリポジトリを 200stack につなぎます。

最初の 1 回

リポジトリをつなぐ

一度つなげば、リポジトリに push されたことに、200stack が気づけるようになります。

2 回目から

直して push するだけ

サーバーにつなぐ・ファイルを選んで上げる、といった作業は要りません。

ステップ 2 📤

push したあとは、自動で公開まで

push するたびに、次の流れが自動で進みます。

  1. 1. push

    手元の変更を GitHub へ送る

  2. 2. 気づく

    200stack が push に気づく

  3. 3. ビルド

    サイトのファイルを、公開できる形に組み立てる

  4. 4. 配信

    できたページを、世界中の配信拠点(CDN)へ送る

  5. 5. 公開

    新しい版のサイトが見られるようになる

人がすることは、手元で直して push するだけ。もう、ファイルを手で上げなくて済みます。

ステップ 3 📜

ログと履歴で、様子が見える

自動で進むぶん、「ちゃんと動いているか見えないと不安」という声にも応えます。

ビルドのログ

  1. 準備
  2. ビルド
  3. CDN へ配信
  4. ✓ 公開

どこまで進んだかを、管理画面でリアルタイムに見られます。うまくいかなかったときも、ログを見れば原因を探せます。

🔍 つまずいた場所が分かる

デプロイの履歴

  • お知らせを追加
  • 写真を差し替え
  • トップの文言を直す

公開の作業(デプロイ)は、コミットのメッセージと一緒に残ります。問題があれば、直前の安定した版にすぐ戻せます。

⤵️ 直前の版に戻せる

正直なところ ⏳

反映までは数分かかります

Q. push したら、すぐ公開される?
ビルドと配信の分だけ時間がかかるので、反映までは数分かかります。すぐ直したいときは、その数分を見込んでおいてください。
Q. かかる時間は、いつも同じ?
サイトの大きさや中身によって、かかる時間は変わることがあります。

それでも、ファイルを探して手で上げ、表示を確かめる作業と比べれば、手間はずっと少なくなります。

ステップ 4 👀

本番の前に、プレビューで確かめる

いきなり本番に出すのがこわいときは「ブランチ」を使います。本番とは別の、作業用の線のようなものです。

本番

公開中のサイト

ブランチで作業しているあいだも、本番のサイトはそのまま見られます。

ブランチ(作業用)

プレビューの URL

プルリクエストやブランチごとに、プレビューの URL が自動でできます。本番に出す前に、変更後の見た目をそこで確かめられます。

共有リンクを送れば、公開前のサイトを、ログインも登録もなしで見てもらえます。スマホでも開け、必要ならパスコードを付けられて、共有はあとから止められます。

まとめ

最初に 1 回つないだら、
あとは push するだけ。

  • ✅ 最初に 1 回つなぐ
  • ✅ push で自動公開
  • ✅ ログと履歴が残る
  • ✅ プレビューで確かめる
おもち

おもちサイトの公開は、200stack におまかせだよ。料金は月330円(税込)から。

200stack の料金を見る →