めちゃくちゃ簡単にwebサイトを作成、公開する方法！

2023年9月16日 17:18

自己紹介

こんにちは、わたラッシュです。これが初投稿となります！私は今までお金をかけずに、しかも学校のChromebookで開発を行ってきたので参考になると思います！プログラミングは中１からやり始めてやっと3年ほど経ちました。これまで無料の学習サイトで学ぶことはもちろんありましたが、いろんな人のブログを参考にさせていただきながら、知識を蓄えていきました。なのでたったの３年間ですがその中で蓄えてきた知識を発信していきたいと思います。今回はサイトをgoogleに公開する方法を簡潔に説明していきたいと思います。では早速どうぞ！

前提知識

google検索の知識（ほとんどの人ができるでしょ多分）
htmlの知識（最初は無料の学習サイトでちょっと学ぶぐらいでよし）

サーバーを契約する！

サイトをインターネットに公開するにはサーバーを立てるか借りるかしないといけません。私の環境ではサーバーを自宅で立てるなんてできるわけがなかったので、レンタルサーバーを借りることにしました。レンタルサーバーをと聞いてめんどくさそうなどと思ったかもしれませんが、中学生でもタダで簡単にできてしまいます。

サーバーレンタルのサイトに行く

私が初心者のころ、一番使い勝手が良かったのが忍者サーバーだったので、それで紹介していこうと思います。

これの右上にある無料作成をクリックし、新規ユーザー登録を押します。メールアドレスを入力するか、Googleなどで続行してください。

新規ユーザー登録

このような画面になるので、パスワード決めたり適当に進めてください！それで登録完了です。（確認メールが届くかも）

URL作成

ログインした後は、このような画面が出てきます。
1つずつ説明していきましょう！
「ツールの名前」には適当で大丈夫です。（自分で識別するためだけのものです。）
「アカウント・ドメイン選択」ここが一番重要です。サイトのURLに関係してきます。まずはアカウント名（https://◯◯.△△.▢▢/　の◯◯に当たる）を入力。その後ドメイン名の「-選択してください-」からドメイン名（https://◯◯.△△.▢▢/　の△△.▢▢に当たる）を選択してください。
「利用規約」にはチェックをし、「画像認証」も行って、「作成する」をクリックしてください！

FTP？！アカウントを手に入れる

「作成する」をクリックしたら、このような画面になると思います。このページの「FTP設定」にある3つの文字列は後で使うので何処かにメモしてもいいかもです。

Editorを使おう！

今回はChromebookでもできるというコンセプトなので、Shift Editというサイトを使っていきます。

ShiftEditに登録

ま、まあ一旦ShiftEdit登録しましょう。「Get Started」をクリックするとこの画面がでてくるので、Googleとかで続行しちゃってください。

FTP設定

いきなり分けの分からない画面が出てきてわけがわからなくなると思いますが、そんなに難しいことでもないので安心してください！まずは左上にある「site」の「new」をクリックしてください。するとこのようなものが出てきます。

わぁ、、と思ってしまうかもしれませんが入力するのはこの4つだけです。
「Name」適当に名前を入力してください。アルファベットがいいです。
「Host」ここにはサーバー契約で手に入れた文字列の、一番上のやつを入力しましょう。
「Username」ここは手に入れた文字列の真ん中のやつを入力
「Passward」ここは最後のやつを入力ですね。
そして「Save」をクリックすると読み込みが始まります。これでレンタルサーバーの内容を編集できるようになりました！

プログラミング！

ではプログラミングに移りましょう。この中央の画面にあるHTMLを選択してください。

このようになるので、htmlのプログラミングができます。今回はこのようなコードを書きました。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
	test
</title>
</head>
<body style="background-color: #ccfeff;">
  <h1 style="font-size: 50px;">
    Hello World
  </h1>
</body>
</html>

これを「control＋S」で名前を「index.html」にしてセーブしましょう。（「index.html」にするとhttps://◯◯.△△.▢▢/　で表示されます。つまり、サイトのメインのページだということを表しています。）

セーブが終わったら、https://◯◯.△△.▢▢/（契約したサーバーのURL）にブラウザで入ると、こんな感じになると思います！心＜大興奮
このサーバーは無料なので広告が入ってしまうのが難点ですね、これはどうにもならないです、、（ココダケノハナシウラワザガアリマス）！！

プログラミングを頑張りましょう

プログラミングの学習は、無料サイトやブログで学べるので頑張ってね！
わからないことがあったらコメント欄かなんかで教えてください！！
他のページを作るときは、＋をクリックして、プログラミングして、他の名前でセーブすると、作れるよ。　例：second.htmlでセーブしたらhttps://◯◯.△△.▢▢/second.htmlに反映される。

Googleに公開しよう！！

つかれたので、次のブログで書こうと思います。まあまあ濃い内容かもw

最後に

このブログでプログラミングやITについて興味を持ってくれたらうれしいです。もちろん、サイトを立てたくてもやり方が分からなかった人の手助けにねってくれていてもうれしいです。これからもよろしくお願いします。感想や質問はコメント欄へ！

この記事が気に入ったらサポートをしてみませんか？

コメントを投稿するには、ログインまたは会員登録をする必要があります。