나만의 무료 웹사이트 제작 4부 - 배포(feat. Netlify)

1, 2, 3部に続き、ついに未完成ですが、私たちが実験的に作ったウェブサイトをnetlify(ネリファイ)でオンライン上に配布する作業をしてみます。 ポスティングのために段階的なキャプチャをしながら作業をしていたら、ミスを一つしてしまい、皆さんと共有することが多くなりました。

さて、今、私たちの人生で初めてインターネットに自分の作ったウェブサイトをアップする作業を始めましょうか？ それも時間だけで、別途費用を費やす必要がないような理想的なツールを利用して！

ネリファイに登録する

まず、 現在使用しているブラウザの別のタブでGitHubにログインしておきます。 ウェブサイト無料配布サービスを提供する ネリファイホームページにアクセスして '会員登録'加入手続きを行います。GitHubに登録する'をクリックすると、自動的に認識し、認証手続きを行います。

その後、様々な要件(計画、用途、役割など)がたくさんありますが、あまり気にしないで選択して、チーム名も適当に決めて入れて、最後に'展開の継続'をクリックします。 そして、GitHubに移動してください(')GitHubでデプロイ'クリック、'Netlify の承認'クリック)

やらなきゃいけないことが多いですが、無料なので我慢してキープゴーイングします。 既に作ったgithubリポジトリを選択してNelliphyをインストールして、私たちのプロジェクト(私の場合はquarto website)をdeployします。 何回かクリックしたらdeploy successウィンドウが表示されますが、'はじめよう'をクリックします。

サイト名(Site name)を変更する

左上 'サイト概要'をクリックすると、非常に長いウェブサイトアドレス(https:// ~~~~~~~.netlify.app) が表示されます。 Nellifyが自動的に生成してくれた私たちのウェブサイトアドレスです。 しかし、見栄えが悪いので、変更します。

下図のように 'サイト構成' > 'サイト詳細' > 'サイト名変更'順にクリックし、'サイト名'に好きな名前(私の場合はit-playground)を入力した後、'保存'と入力すると好きなアドレスに変わります。私の場合は最終的にit-playground.netlify.appのようになります。

携帯電話やPCのブラウザに変更されたアドレスを入力して確認してみます。出来上がり〜！ ページが見つかりません!(え～ダメなんだけど？ 何だこれ～？ ) ちょっと待って～ '何が問題なんだろう？？ 何を忘れたんだろう？？' (一度にダメな理由は、後で他のもので再チェックしてみます。ㅜㅜ)

では、原点からやり直しましょう。RStudioを使ってquartoで作業してレンダリングして生成されるhtmlファイルなどウェブサイトの構成ファイルは _サイトというフォルダ(index.htmlなど)にあります。 結局、そのフォルダ内にあるファイルがnetlifyと一緒に動作するように何か設定しなければならないような感じがしますよね？ 下の図でGitHubリモートリポジトリ内の_siteフォルダが見えますよね？

ネリファイ設定爆破

さて、再びnetlifyに戻って サイト構成 > 危険ゾーン > このサイトを削除する 順にクリックしてサイト名を入力し 削除 クリックします。私たちの実験的なウェブサイトが作るやいなや爆破される魔法が繰り広げられます(もともとこの床が...こうやって失敗をしながら実力が伸びます〜)

ホラダンで全部吹き飛ばされ チーム概要をクリックすると、下図のように 'Gitからインポート'と表示されるはずです。 そして、再び以前やった作業(Let's deploy your project)を行います。 'GitHubでデプロイ'>>>。 GitHub ストアをクリック > Site name入力 > 空室状況を確認する クリックしてウェブサイト名の使用可否を確認します。

その後、下にスクロールして 'Publish directory'に '_site' を入力してください。(この部分がジェロで重要!!!二重引用符 ' はノー入力、)そして、今度は本当の 'it-playgroundを展開する'をクリックして私たちのウェブサイトをインターネットに表示します。Nelliphyが自動的にいろいろと作業しているのが見え、1～2分後に'Deploy success! ' と表示されます。 'サイト展開の表示'を押すと、_siteフォルダ内のウェブサイト設定ファイルが表示されます。

デプロイサクセス

******.netlify.com をブラウザのアドレスバーに入力して実行すると、出来上がり～！ローカル(マイコンピュータ)でのみ見えていたのが、下の図のようにウェブ上で見えます。 (これは私が作った最初のウェブサイトですか？ ワオ～本当に不思議ですね～) 下の写真の中の子供たちの姿がまさに私の心を代弁してくれていますね～ ^_^.

今日はNelliphyに登録する方法とGitHubのウェブサイト設定ファイル(_siteフォルダ)とNelliphyを活用してインターネットに私たちのウェブサイトを立ち上げてみました。 自分のウェブサイトを持つってこんなに簡単だったの？

実験的なウェブサイトの構築は終わりましたので、今後は実際にこのウェブサイトをどのように飾ることができるか、そしてどのように更新するかを見てみましょう。

IT技術を活用し、生活を豊かにしてくれる Life2.0: IT Playgroundテリーでした。

'secondlife.lol'のすべてのコンテンツは著作権法の保護を受けています。無断転載やコピー、配布などを禁じます。