Help us understand the problem. What is going on with this article?

Firebase Hostingを用いてHTMLホームページをインターネットに完全無料で公開する

More than 1 year has passed since last update.

まえがき

FirebaseというサービスにはHTMLで作ったホームページをインターネット上に公開できる機能があります。しかも、Googleアカウントさえあれば、現在のところ誰でも無料で使えます。クレジットカードの登録も要りませんので、理論上は、子供でも使えます。

より正確には、Firebaseというサービスには、色々と機能があるわけですが、今回はそのひとつ、静的サイトのホスティング(Hosting)を利用しようというわけです。

対象読者

  • Googleアカウントを持っている
  • HTMLの初歩がわかる
  • ターミナル(コマンドプロンプト)を触ったことがある

この記事が扱うトピック

  • Firebaseのはじめかた
  • Firebase Hostingで静的サイトを公開する方法

1. Firebaseのプロジェクトをつくる

https://console.firebase.google.com/

に行けば、すぐにプロジェクトを作れます。
Googleアカウントにログインされている状態であれば、アカウント作成すら不要です。

2. CLIツールを入れ、ログインする

Node.js が入っていない人はここからインストールします。
https://nodejs.org/ja/

Firebaseの操作は、ターミナル(コマンドプロンプト)のコマンドでやるのが基本です。
インストールも、コマンドです。

npm install -g firebase-tools

ログインします。

firebase login

3. 公開するHTMLを用意する

公開したい index.html はこうなっているとします。

<h1>Hello Firebase!</h1>

このようなフォルダ構成であるとします。

├── firebase.json
└── public_dir
    └── index.html

firebase.json の中身は次のようにします。

{
  "hosting": {
    "public": "public_dir"
  }
}

4. デプロイする

さっき作ったプロジェクトの、IDを確認します。

$ firebase list
┌──────┬───────────────────────┬─────────────┐
│ Name │ Project ID / Instance │ Permissions │
├──────┼───────────────────────┼─────────────┤
│ neko │ neko-dcaa9            │ Owner       │
└──────┴───────────────────────┴─────────────┘

IDを指定して、デプロイします。

$ firebase deploy --project neko-dcaa9

=== Deploying to 'neko-dcaa9'...

i  deploying hosting
i  hosting: preparing public directory for upload...
✔  hosting: 1 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/neko-dcaa9/overview
Hosting URL: https://neko-dcaa9.firebaseapp.com

これで、

https://neko-dcaa9.firebaseapp.com

に公開されました。

5. ホームページ内容の更新

かわいい写真をつけたくなったとします。
写真のjpgファイルをimgフォルダの中に置きます。
それから、写真のためのタグを追記します。

<h1>Hello Firebase!</h1>
<img src='img/neko.jpg'>

フォルダ構成が、このようになりました。

├── firebase.json
└── public
    ├── img
    │   └── neko.jpg
    └── index.html

いよいよ更新です。といっても、同じコマンドです。

firebase deploy --project neko-dcaa9

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした