RalaCode

44件の記事があります

【無料です】作ったWebサイトを簡単に公開する方法

【無料です】作ったWebサイトを簡単に公開する方法
サムライエンジニアプラス

「自分で作ったサイトって実際のネット上でも上手く表示されるのかな...。でもサイトを公開するのってお金かかりそうだし、難しそうだし、ハードル高そう...。」

こんな悩みにお答えします。

サイトをネット上に公開する場合、本来なら「サーバー」と「ドメイン」とかが必要です。
料金も年間〜円みたいに継続的にかかります。

でも今ではサーバー代もドメイン代も無料でサイトをネット上に公開する方法がたくさんあります。
その方法の一つをこの記事で解説します。

Netlifyを使う

sea_house

結論から言うと、Netlifyというサービスがおすすめです。
Netlifyを使うことで、自分で作ったサイトを無料でネット上に公開できます。

Netlifyのアカウントを作る

まずはNetlifyのアカウントを作ります。
メールアドレスとパスワードでアカウントと作ることもできますが、そのやり方はおすすめしません

Netlifyのアカウントを作成するときにおすすめなのは「GitHubと連携」させることです。

GitHubは、自分で書いたコードをネット上に保存しておくサービスです。

GitHubはすぐに使いこなす必要はありません。
でも、Web制作が本格的になってくると、GitHubがすごく便利です。
とりあえずGitHubのアカウントだけここで作っておきましょう。

GitHubと連携させてNetlifyのアカウントを作る方法は以下の記事で解説しています。

Netlifyのアカウントを作成する
Netlifyのアカウントを作成する
記事を読む

「GitHubのアカウントはどうやって作るの?」
という方は以下をどうぞ。

【図解あり】GitHubアカウント作成方法を解説【数分で完了します】
【図解あり】GitHubアカウント作成方法を解説【数分で完了します】
記事を読む

サイトを公開する

netlify_top

Netlifyのアカウント作成が完了すると、上の画像のようなページが表示されます。

netlify_drag_drop

HTMLファイルやCSSファイルが入ったフォルダを、上の画像のように点線枠の中にドラッグ&ドロップします。

first_deploy

上の画像のようなページが開きます。
画面左下の「Production deploys」のところに「Published」と表示されていることを確認します。

「https://〜」と書かれているのがURLです。
URLをクリックすると、自分で作ったサイトが表示されたと思います。

これで実際のネット上に、自分で作ったサイトが公開されました。

余談ですが、このようにサイトを公開することを「アップロードする」、「デプロイする」と言ったりします。
Web制作の学習でググったりしてると、たまに出てくる言葉です。

サイトを修正する

サイトを公開した後、「やっぱりこの文字のフォントサイズをもう少し大きくしたい」とかなるときもあると思います。

Netlifyなら、HTMLファイルやCSSファイルを修正してから何回でもアップロードし直すことができます

試しに、HTMLファイルやCSSファイルの中身をVS Codeなどのエディタを使って書き換えてみてください。

deploy_again

Netlifyのページで左上の「Deploys」をクリックします。
修正したHTMLファイルやCSSファイルが入ったフォルダを点線枠の中にドラッグ&ドロップします。

またURLをクリックしてサイトを開いてみてください。
サイトが修正されていると思います。

フォルダの中には画像ファイルがあってもJavaScriptファイルがあっても問題なくデプロイできます。

サイトはいくつ公開できるの?

speed_limit

Netlifyなら結構な数のサイトをアップロードできます。
具体的には「100GB」以内であれば無料です。

サイトが「どれだけ多くの人にアクセスされたか」で、「100GB」という容量を消費します。容量を消費しても、翌月には回復します。

アップロードしたサイトに、急に数万人の人がアクセスしてくるなんてことはまずあり得ません

「Web制作の勉強として、自分で作ったサイトをアップロードする」という目的であれば、無料で使い続けることができます。

記事は以上です。

【コード書くだけ】Netlifyでお問い合わせフォームを作る方法
【コード書くだけ】Netlifyでお問い合わせフォームを作る方法
記事を読む

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

【周回はダメです】Progateの次は何をすればいいの?

【周回はダメです】Progateの次は何をすればいいの?

【初心者向け】Visual Studio Codeの使い方【図解あり】

【初心者向け】Visual Studio Codeの使い方【図解あり】

Netlifyのアカウントを作成する

Netlifyのアカウントを作成する

【自動コンパイル】VSCodeでSassを使う方法を解説

【自動コンパイル】VSCodeでSassを使う方法を解説

【Git】やるべき初期設定【コマンドライン使います】

【Git】やるべき初期設定【コマンドライン使います】

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy