0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

1.2 無料のホスティングサービスを使う

Last updated at Posted at 2021-12-12

1. ホスティングとは

ホスティングとは**「サーバを借りること」**です。
**レンタルサーバー**とも言います。

ホスティング先(レンタルサーバ)によって、料金プランや表示速度、オプションが違います。

2. ホスティング先の種類

FC2レンタルサーバー
ロリポップ
さくらのレンタルサーバ
エックスサーバー
カゴヤ・ジャパン

などがあります。

3. Netlifyで静的サイトをホスティングしてみよう

今回は、htmlやcss、javascriptを触りながら実際にどのようにインターネットで表示、動作する確認するため、

  • GitHub
  • Netlify

というサービスを使用することにします。

3.1 GitHubにアカウントを登録する

GitHubにアクセスし、GitHubに登録するボタンをクリックします。

image.png

UseName, EmailAddress, passwordを入力後、検証ボタンを実行し、Create accountボタンをクリックします。

image.png

その後、学生なのかどうかの選択や、Eメールによる認証などありますので進めてください。

3.2 リポジトリの作成

Create repositoryボタンをクリックします。

image.png

下記のように入力しCreate repositoryをクリック。※リポジトリ名はそれらしい名前にしておいてください。

image.png

index.htmlを作成しておきます。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test site</title>
</head>
<body>
    <p>これをインターネットで表示します。</p>
</body>
</html>

Add fileUpload filesを選択。

image.png

赤枠内にファイルをドラッグアンドドロップするかchoose your filesをクリックし、ファイルを選択する。(背景が黒になっていますが、表示設定の違いですので気にしないで下さい。)
image.png

指定したファイルが表示されていることを確認。下にスクロールして、Commit changesをクリック。
image.png

以下のようにREADME.mdファイルと同じ階層にindex.htmlがアップロードされていることを確認してください。

image.png

4. Netlifyにアクセスし登録

Netlifyにアクセスし、Get started for freeをクリックします。

GitHubボタンをクリックします。

image.png

適当な値を入力しSet up and continueをクリックします。

image.png

New site from gitボタンをクリックします。

image.png

Githubボタンをクリックします。

image.png

途中Autholize Netlifyのような画面が出てくるが、Autholizeボタンをクリックし認証しておきます。

公開するリポジトリを選択しinstallボタンをクリックします。

image.png

そのままDeploy siteをクリックします。

image.png

以下のNetlify画面でdeployedとなっているかと思います。また、アクセスするURLがあるのでクリックしブラウザで表示できるか確認してください。

image.png

index.htmlに変更を加え、Githubにコミットしてみてください。

再度URLにアクセスすると自動的に更新されているかと思います。

便利ですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?