5
3

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 3 years have passed since last update.

【Netlify】手元の index.html を 10 分で一般公開する方法

Posted at

こんにちは!今回は,手元のエディタで作成した(マークアップされた) HTML ファイル等を簡単に Web サイトとして公開する方法について解説したいと思います!

Netlify を用いてデプロイ(公開)する方法について解説します.
本記事では,

「GitHub ってなに?」

という人でもお手軽にできる方法になっております!

なぜこの記事を書こうと思ったのか

友人が,

「制作会社への転職活動でポートフォリオとして静的サイトを作成したけどうまく公開できなくて困っている.」

と言っていました.
index.htmlall.css のようなファイルを zip ファイルとして提出していたりしてたので,Netlify を激推してきた.というのが背景にあります.

そのときに行った手順を今回は,解説しようと思っています.

初手

手元で index.html を作成しましょう.VSCode なり Atom のエディタを使って「test というフォルダの中に」index.html を作りましょう.

👇こんな感じで作成します.

test/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

index.html を,
Chrome なりSafari などのブラウザにドラッグアンドドロップすると

Image from Gyazo

こんな感じで表示されると思います.

あとは,自分なりにお洒落にマークアップを施してください!

これを Netlify を使って実際に Web サイトとして公開していきます.

Netlify に登録する

公開する前にまずは Netlify に登録をしましょう.GitHub のアカウントを持っている人はGitHub でサインアップすることを勧めますが,メールアドレスでもアカウントを作成できます.

  • Netlify 👈ここにアクセスします

  • サインアップします
    Image from Gyazo

  • アカウントを作成します 🚀
    Image from Gyazo
    Image from Gyazo

  • メールアドレスの認証を終え,ログインすると下記のような画面になるはずです 🤗
    Image from Gyazo

Netlify で公開する

あとは超簡単です.
チュートリアルをスキップして現れたサイトの真ん中の方にある点線の部分に先ほど作成した,test/index.html をドラックアンドドロップするだけです.
Image from Gyazo

👇こういう感じです!
Image from Gyazo

あとは,Netlify 側で作成された URL にアクセスするだけで公開されたことが確認できます.
Image from Gyazo

🌟実際にできたサイトはこちら!
Image from Gyazo

超簡単ではないでしょうか!
この URL にアクセスしさえすればどこからでも誰からでも静的サイトを閲覧することが可能になります!

おまけ

🌊 更新した際にデプロイ(公開)しなおす

今回解説している方法は,GitHub 等を使って自動でデプロイする手法ではなくマニュアルでデプロイする方法になります.なので,作成したサイトに変更がある際は随時自分でデプロイしなおさないといけません.GitHub 等をしようして自動でデプロイを行いたい場合は他の記事を参考にしてみてください.

  • Deploys に移動する
    Image from Gyazo

  • 最初の方法と同じように点線部分にドラックアンドドロップする
    Image from Gyazo

😈 サイトの名前を変更する

URL が変だと少しテンションが下がりますよね..
なので,名前を変更する手順も紹介します.

  • Site settings をクリックする
    Image from Gyazo

  • General に入っている Site Details > Site information の Change site name をクリックする
    Image from Gyazo

  • 立ち上がってきたモーダル内で自分が設定したいサイトの名前を入力するだけ!
    Image from Gyazo

他と被ってなければ設定することが可能です!そして,元のページに戻れば変更を確認できます.
Image from Gyazo

終わりに

以上が今回の Netlify を用いてお手軽に静的サイトを公開する方法になります.
ぜひ試してみてください〜!

5
3
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
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?