自分のサイトを公開するまでの流れを一通り
先に結論を書くと、サイトの公開に必要なものは3つだけです。表示するファイル、それを置いておく場所、そしてそこにたどり着くための住所。この3つがそろえば、世界中から見られる状態になります。
「公開」と聞くと難しそうに感じますが、やることの数自体は多くありません。詰まりやすいのは手順の複雑さではなく、どの段階の話をしているのか分からなくなることのほうです。順番に並べて整理してみます。
まず必要なのは3つだけ
用語を先に並べておきます。
- ファイル：HTMLやCSS、画像など、ページの中身そのもの。自分のパソコンの中にある状態
- サーバー：そのファイルを置いておく場所。誰かがアクセスしてきたら、ファイルを渡してくれる
- ドメイン：
example.comのような住所。どのサーバーを見に行けばいいかを指し示すもの
自分のパソコンの中でHTMLファイルを開くと、ブラウザにページが表示されます。あれはもう「サイトができている」状態です。足りないのは、自分以外の人がそのファイルにたどり着く手段だけ、と考えると分かりやすくなります。
ファイルの中身をどう作るかについては、HTMLとCSSで何ができるのか、最初の全体像のほうで触れています。ここではその先の話に絞ります。
手順は5つ
1. 手元でページを完成させる
ブラウザで開いて、見たい形になっているところまで作ります。この時点ではインターネットにはつながっていません。ファイル名は index.html にしておきます。多くのサーバーが「フォルダを指定されたら index.html を返す」という決まりで動いているため、これがトップページの扱いになります。
2. 置き場所を決める
ファイルを預けるサービスを選びます。用途によって大きく2種類あります。
ひとつはレンタルサーバー。月額でスペースを借りて、そこにファイルを置く昔からのやりかたです。もうひとつはホスティングサービスと呼ばれるタイプで、コードを置いておくと自動で公開までやってくれるものです。
料金や無料で使える範囲はサービスごとに違い、変更もされるので、ここでは具体的な金額は書きません。検討するときは各サービスの公式ページで、掲載時点の条件を確認してください。まず試したいだけなら、小規模なサイトを無料の範囲で公開できるサービスもいくつかあります。
3. ファイルを送る
選んだサービスの方式に合わせてファイルを送ります。画面にドラッグ&ドロップするだけのものもあれば、FTP（ファイルを転送するための昔からの仕組み）を使うもの、Gitというバージョン管理の仕組みと連携して自動で反映されるものもあります。
どれを使っても結果は同じで、「手元のファイルがサーバーの上にコピーされる」だけです。
4. 住所をつける
多くのサービスでは、この時点ですでに 〇〇.サービス名.com のようなURLが割り当てられていて、そのまま公開されています。ここで終わりにしても問題ありません。
自分の好きな 〇〇.com を使いたい場合は、ドメインを取得して、サーバー側と紐づける設定をします。ドメインは年単位の契約で買うもので、更新を忘れると使えなくなる点だけ覚えておくと安心です。設定が反映されるまで少し時間がかかることもあります。
5. 別の端末で見て確認する
公開できたら、自分のスマートフォンなど、作業に使ったのとは別の端末で開いてみます。手元では表示されていた画像が出ない、という食い違いはここで見つかります。原因の多くはファイルの置き場所の指定ミスで、慣れないうちは誰もが通るところです。
公開してからのほうが長い
出してみると、直したいところが必ず見つかります。文字が小さい、スマホで崩れる、思ったより読みにくい。これは失敗ではなく、公開したから分かったことです。
そのため最初から完璧にしようとするより、小さく出して直すほうが結局早く進みます。直したファイルを送り直せば、すぐに反映されます。
どこまで自分で書くか、ツールに任せるかは目的次第です。この判断についてはノーコードとコーディング、どちらを選ぶかの判断軸にまとめてあります。公開までの手順を軽くしたいなら、ツール側に寄せる選択も十分あります。
まとめ
- 必要なのはファイル・サーバー・ドメインの3つ
- 手元で完成 → 置き場所を決める → 送る → 住所をつける → 別端末で確認
- サービスの料金や条件は変わるので、公式ページで確認してから決める
- 公開はゴールではなく、直しはじめる地点
一度この流れを通しておくと、次からは同じ道をたどるだけになります。とはいえ最初の1回は、詰まったときに聞ける相手がいるとかなり違います。デジタルラボ金沢では初心者からOKのワークショップや勉強会を定期的に開いているので、気になったときはお問い合わせからのぞいてみてください。