現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

この記事は【初心者向け】自力ホームページ制作でHTML/CSS/JavaScriptを学ぶ#1の続きです。

【初心者向け】自力ホームページ制作でHTML/CSS/JavaScriptを学ぶ#1

この記事はホームページを自分の力で作って公開してみたい&プログラミングをやった事のない方向けの記事です。wixやJimdoのような簡単にホームページを公開できるサービスを使う事なく、手元にあるパソコンとFirebaseを用いてシンプルなホームページを作っていき...

今回は自分の力で作成したホームページを世の中に公開し、友達にみてもらえるようにしていきます。
前回と比べて難易度が上がるので少し大変かもしれませんが、一連の流れを覚えればホームページをサクッと公開できるようになるのでこの機会にぜひ習得しましょう。

使用するのはFirebaseというサービスです。

Firebaseとは

Firebaseとは、Googleの提供するmBaaSです。
mBaasは、mobile backend as a service の略で、直訳するとモバイル用バックエンドサービスです。
その名の通り、モバイル用のバックエンド機能を包括的にサポートしてくれています。

簡単にいうと、フロントエンドさえやればその他は何もしなくていいよ！というサービスです。

FirebaseのHosting機能を使うと、簡単に自分の作成したホームページを世の中に公開することができます。
公開した後にも、リアルタイムチャット等様々な事ができる用になっているので、余力があれば是非挑戦してみてください。

必要なもの

まず今回Firebaseで自分の作ったホームページを公開するにあたって必要なものを紹介します。

• Googleアカウント
• Node.js

Firebaseの利用

Googleアカウントのない方は以下のリンクよりアカウントを作成しておいてください。
Google アカウントの作成

Firebase
Firebaseに移動して、コンソールに移動するを選択してください。
Googleアカウントでのログインが求められるので。
ログインしましょう。

Node.jsのダウンロード

Node.jsはサーバーサイドのJavaScript実行環境です。
NPMというパッケージ管理ツールを使用する為に必要なのでダウンロードしておきましょう。

Node.js

最新版ではなくLTSの自分のデバイスにあったものをダウンロードしてください。

ターミナル（コマンドプロンプト）を開く

Macの場合は、command+spaceでターミナル
Windowsの場合はWindowsキー＋R　でcmdを入力する事で起動する事ができます。早速起動していきましょう。

凄腕エンジニアがよく使っているやつです。

FirebaseCLiのインストール

ターミナル上で以下のコマンドを入力し、エンターを押しましょう。

node -v

バージョンが表示されれば、先ほどのNode.jsのインストールがうまくいっています。

次にFirebaseCLIをインストールします。

npm install -g firebase-tools

FirebaseCLIはFirebaseを操作する為に必要なもので、先程紹介したパッケージ管理ツールを用いてインストールしています。

次にFirebaseにターミナルからログインしましょう。

firebase login

色々と聞かれますが、全てイエスで問題ありません。
自動的にブラウザ上で新規タブが作成されます。

続いて作成したフォルダに移動しましょう。今回はデスクトップ上に作成したので、以下のコマンドで移動する事ができます。

cd desktop/フォルダ名

続いて初期化します。

firebase init

hosting機能のみを使用するので十字キーでhostingに移動しspaceボタンを押してエンターを押します。

次に新規プロジェクトの作成なのでcreate new projectを選択します。

? Select a default Firebase project for this directory:
[don't setup a default project]
❯ [create a new project]

以降の質問ではyesを選択してください。

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔ Wrote public/404.html
✔ Wrote public/index.html

i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...

✔ Firebase initialization complete!

Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

プロジェクの初期化が完了しました。

次にfirebaseで作成したプロジェクトと自分のローカル環境で作成したプロジェクトを紐付けます。

firebase use --add

現在のディレクトリ構造をみてみましょう。
色々のものが作成されています。が、現在はどのページを表示するかの設定でpublicになってしまっていますので以下の画像の通りに反映をさせてください。

次にデプロイ（システムを利用可能な状態にすること）します。

Terminalに記載されたHostingURLにアクセスしてみましょう。
自分のホームページができているのを確認できると思います。

山田太郎のホームページ

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日