公開①

この章は、コース1でいちばん嬉しい章です。 今日、あなたのサイトが世界に出ます。

コードはほとんど書きません。30分あれば終わります。

今日のゴール

いまのサイトは、あなたのパソコンの中にしかありません。この章が終わると https://〜 という自分のURLが手に入り、そのアドレスを送れば誰でも見られるようになります。スマホからも見られます。

ミニ解説: 「公開する」って何をすること?

むずかしく聞こえますが、やることは1つです。

自分のフォルダを、インターネットにつながっているコンピュータに置かせてもらう。

その「置かせてもらう場所」を貸してくれるサービスを使います。この教材では Netlify(ネットリファイ) の Netlify Drop という機能を使います。フォルダをブラウザにドラッグして落とすだけで公開できる、いちばん簡単な方法です。

ターミナルも Git も使いません。それらはコース2で扱います。

公開する前に(ここだけ真面目に読んでください)

一度インターネットに出したものは、消したつもりでも誰かの手元に残ることがあります。公開の前に、いま自分のページに次のものが載っていないか確認してください。

• 本名 … ニックネームで大丈夫です。載せる義務はまったくありません。
• 顔がはっきり写った写真 … 載せなくても、まったく問題ありません。
• 家や学校、職場が分かるもの … 建物の名前が写った写真、最寄り駅など。
• 電話番号・住所・メールアドレス

「載せたい」と思うものだけを載せてください。あとから消すこともできます。迷ったら載せないでおきましょう。

手順1: Netlify に登録する

1. ブラウザで https://app.netlify.com/drop を開きます。
2. 画面の点線の枠が Netlify Drop です。まずはここに、あとでフォルダを落とします。
3. 公開したあとに「サイトを自分のものとして保存しますか」と聞かれるので、そこで登録します。メールアドレスとパスワードでも、Google アカウントでも構いません。
4. 登録したメールアドレスに確認メールが届きます。メールの中のリンクを押すまで、登録は完了しません。 届いていないときは迷惑メールフォルダも見てください。

手順2: フォルダをドロップする

数十秒待つと、画面に https://ランダムな名前.netlify.app というアドレスが出ます。それがあなたのサイトのURLです。 クリックして開いてみてください。

手順3: サイト名を変える

最初のURLは wonderful-pastry-1a2b3c のような自動生成の名前です。自分の好きな名前に変えられます。

1. Netlify の画面で Site configuration(サイト設定)を開きます。
2. Change site name(サイト名を変更)を押します。
3. 好きな名前を入力します。世界でひとつだけの名前なので、すでに使われていると弾かれます。数字を足すなどして調整してください。

書き写す: フッターに自分のURLを載せる

せっかくURLを手に入れたので、ページの下に載せておきます。https://haruto-camera.example.com/ の部分は、Netlify が発行したあなた自身のURLに書き換えてください。

     <footer class="site-footer">     <p>はるとの記録</p>+    <p class="site-url">https://haruto-camera.example.com/</p>   </footer> </body>

style.css にも1つだけ足します。

   font-size: 14px; }+ +.site-url {+margin-top: 4px;+font-size: 13px;+}

書き換えたら、もう一度 mysite フォルダをドロップして更新します。 今度は Netlify の自分のサイトの画面から Deploys(デプロイ)タブを開き、そこにドロップしてください。同じサイトが新しい内容に置き換わります。

あなたの番

• 自分のURLをスマホで開いてみてください。 メッセージアプリで自分宛てに送るのが早いです。文字が小さくて読みにくいはずですが、それは次の章で直します。
• 家族や友人にURLを送ってみましょう。ここまで来た人は、もう「自分のサイトを公開した人」です。

うまくいかないときは