【10分でサイト公開】誰でもできる！Webサイト公開の流れ！
Vložit
- čas přidán 4. 07. 2024
- 今回は、「WEBサイトを公開」する流れを説明しています❗️自分のサイトを作って公開してみるのも楽しくできるのでオススメです😆❗️
00:00 オープニング
00:50 サイトの公開に必要なもの
01:55 ❶レンタルサーバー「ロリポップ」
px.a8.net/svt/ejp?a8mat=3HIU7...
04:53 ❷コードエディタ「VSCODE」
code.visualstudio.com/download
10:42 ❸独自ドメイン「ムームードメイン」
px.a8.net/svt/ejp?a8mat=3HKD0...
15:44 エンディング
📁 この動画で使用したファイル 📁
www.craft.do/s/V0NKM6ZQVAWfwu
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
czcams.com/users/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple Macbook Pro 16inch 】
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 Apple AirPods Pro 】
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
４０３エラー出る人へ
ロリポップにログイン
セキュリティにマウスをポイント
WAF設定をクリック
対象ドメインの設定変更の無効にするをクリック
5分放置
で治りました
めちゃめちゃ有益な情報ありがとうございます🙇❗️❗️
とてもわかりやすく親切な動画でした！まだまだ勉強中で、わからなくて進まなくて挫折しそうでしたが、やる気復活しました😊ありがとうございます！
参考にしていただけたようで嬉しいです☺️❗️ファイトです💪💪💪‼️
私のリクエストにお応えしていただいてありがとうございます😭‼️
コメントも動画の内容もわかりやすく、とてもよい人柄も伝わってきます。。僕が女の子だったら惚れてます。本当にありがとうございました😭
喜んでいただけてこちらも嬉しいです😊‼️
笑笑そう言っていただけて光栄です😂ありがとうございます‼️
とても簡単でわかりやすい説明で、自分でもやってみよう!と思わせてくれる素敵な動画でした。
ありがとうございました^ ^
そのように言っていただけてとても嬉しいです😭❗️ありがとうございます🙇♂️❗️
これが知りたかった！！！
本当にありがたいです🙏
そう言っていただけてとっても嬉しいですー😭こちらこそありがとうございます🙇♂️‼️
これが無料で視聴出来るのは
凄すぎですね！
ありがとうございます！
参考にさせて頂きます！
とても嬉しいコメントいただきありがとうございます😭‼️
とてもわかりやすい説明でした！
サイトの公開はできたのですが、Googleの検索エンジンに公開する方法や、ホームページの更新のやり方の動画もあげていただけると助かります🙇
嬉しいコメントいただきありがとうございます😊♪
動画のご要望いただけてありがたいです🙇♂️❗️
今後あげていきたいと思います😆❗️❗️
で、できましたーーー！！
別の方法でやったらつまづき、こちらの動画の通りにやったら無事サイト公開できました😂
複数サイトを公開するのが出来るか不安ですが、、色々試してみます。
ありがとうございました。
こちらとしても嬉しいです😆ありがとうございます❗️
つまづくことあれば気軽にコメントください😊♪
@@hirocode
ちなみに、今HTMLサイトのWordPress化をしようと試みてますが。中々できず😭
動画も本もちんぷんかんぷんで。
もし機会があったら、WordPress化動画お願いします🙇♀️
ありがとうございます！！
やっとできましたああああ！！！！😭
ありがとうございます！
おーよかったです😆❗️
嬉しいコメントいただきありがとうございます🙇♂️
とても分かりやすい説明でした。ありがとうございます。
ちなみに、レンタルサーバーをさくらインターネットで契約した場合も、同じ手順でできますか(-_-;)
ありがとうございます🙇！
全く同じとはいかないと思いますが、大体は同じだと思うので、出てくるキーワードで検索しながら埋めていけばいけると思います😆❗️
@@hirocode 度々すみません。手順通りにVScodeのフォルダをアップロードすると、ロリポップ！FTPのルートエディアにwebというフォルダが作成され、その中に自分で作成したVScodeのフォルダが入っているのですが、これは特に問題ないでしょうか？現在、403エラーが出てしまっていて、固定されているコメントの対象ドメインを無効にする方法も試してみましたが403エラーのままでした。
@@hirocode 度々失礼いたします。手順通りに行ったのすが、403エラーが出ています。（固定されているコメントの対象ドメインの無効かは対応済みです。）ロリポップ！FTPの直下に来るにフォルダがwebになっていて、その中に自分で作成した部VScodeのフォルダが入っている状況なのですが、これは正しいでしょうか？
とてもわかりやすい説明ありがとうございます！
質問なのですが、既に公開しているメインのWebサイトに、ローカル上にある自分のサイトを統合して表示させたいのですがどうすればよろしいでしょうか？
ありがとうございます😆❗️
SFTP: Sync Remote -> Local（リモートからローカル）でサーバー上にあるファイルをローカルに落とすことができます。（フォルダ空の状態で落とした方が良いと思います。）
ここに変更加えた上で
SFTP: Sync Both Directions（最新に統合）することでうまい具合に統合できるかと思います😆❗️
とてもわかりやすく参考になりました！ 他の方も聞かれているかと思いますが、私も404エラーになってしまいます。動画通りにSSHの情報を正しく入力し、フルパスも設定しました。公開フォルダは空と、フォルダ指定とどちらも試してみました。#10:15 でのサイト表示の時点で表示されていませんでした。原因や対処法など、お分かりでしたらご教授ください。🙇
ありがとうございます😆❗️
まずはファイルが正しくアップロードされているか確認するために、ロリポップのサイドバーから、サーバーの管理・設定→ロリポップ！FTP、と進み、中にファイルがアップロードされているか確認してみてください🙇
丁寧な説明でとても分かりやすかったです！
質問なんですが、githubだと無料でWebサイトを公開できるそうなんですが
なせ今回は有料のlolipopを使ったんでしょうか？
githubだと不便なことがあるんでしょうか？
ご説明いただけると幸いです！
嬉しいコメントいただきありがとうございます😊♪
ご質問について、githubの提供している「github pages」はWordPressのインストールができないことや、商用のサイトが作成できないなど、用途が限られているため、一般的なサイト制作には不向きです。
個人的な趣味での利用であれば全然良いと思いますが、WEB制作を仕事で考えている方にはオススメできない仕様になっています🙇♂️❗️
@@hirocode ご丁寧な説明ありがとうございます！
いつも拝見しております！わかりやすくてとても参考になります。
また、サーバーのアップロード方法やベーシック認証のやりかたについての動画も上げていただけると嬉しいです(^o^)
コメントいただきありがとうございます🙇♂️❗️
おっしゃる通りBasic認証とか必要ですがわからない方多いと思うので、そういう動画も上げていけたらと思います😆❗️
アップロードできました😮
よかったです😆❗️コメントありがとうございます🙇
いつも動画を見させていただいています！
少し関係ない質問なのですが、wordpress化したファイルのcssはvscodeでは編集できないのでしょうか？
いつも追加cssでいつも編集しているので、少し不便さを感じております。
ありがとうございます😊♪
サーバーに上げたファイルを編集したいということでしょうか❓サーバー上のファイルをVSコードで編集するにはプラグイン使えばできるようです💡もしくは、ローカル環境で編集したのち、テーマファイルもしくは編集したファイルをサーバー上にアップする形が良いかと思います‼️
@@hirocode
ご丁寧にご返信ありがとうございます😊
何というプラグインでしょうか？
何度も聞いてすいません🙇♂️
こちらの記事参考にしてみてください😊❗️
qiita.com/catopy/items/862c4707387a98afa1a6
とても分かりやすかったです。ありがとうございます。
sftpで指定した場所に、サイトの公開はできたのですが、vsコードで作成したスタイルシートがうまく反映されず、htmlのみの表示になってしまいます。ファイルのまとめ方に問題があるのでしょうか？
嬉しいコメントいただきありがとうございます😊♪
もしかしたら、スタイルシートのファイルパスの指定がうまくいっていないかもしれません。headタグ内のリンクタグにてstylesheet読み込んでると思いますが、その辺りの指定は問題なさそうでしょうか？💡もしgoogle developer tool 使ったことあれば、それでheadタグ内みてみれば正しく読み込まれているか分かるはずです❗️
ご丁寧にありがとうございます！
無事スタイルシートの読み込みができました！！
これからも動画たのしみにしてます。ありがとうございました🥺👏🏽
動画を参考にやってみたら無事公開できました！ありがとうございます😭
一つ質問なのですが、ホームページを公開した後に、vscodeでホームページの内容を変更した場合、どのようにして公開済みのホームページに反映させたら良いですか？
分かりにくくてすいません💦
嬉しいコメントいただきありがとうございます😭❗️
内容を変更した状態で再度 SFTP: Sync Local -> Remoteを行えば、ファイルが上書きされて変更を反映することが出来きるはずです❗️
@@hirocode
ご返信ありがとうございます！
ご指摘どおり実行してみたら無事変更ができたのですが、一部変更されない部分があります。
そのような場合によくある原因などってありますかね？
質問多くて申し訳ないです！
反映まで時間かかる場合や、キャッシュが残っている場合が考えられます！
あとは、ファイル削除しても今の設定では反映されないのですが、その点関係ありそうでしょうか？？
@@hirocode 色々試してみたところ、HTMLファイルの変更は反映していたのですがCSSの方は時間を置いてみても効いていませんでした。アップロードする前にCSSで記述したところはしっかり反映されているのですが、サイトをアップロードした後に記述したCSSが適応されてないです。HTMLの方はうまく反映されるのでアップロード後にCSSを記述する場合はHTMLファイルにstyleタグで記述した方が良い感じですかね…？ついでにstyleタグだとうまく効きます。長文すいません💦
CSSはキャッシュが残ることが多いです！
簡単な方法としては、ブラウザのシークレットモード（Command + Shift + N）でサイトを開くとキャッシュなしの状態で見ることが出来ます。これで反映されませんでしょうか。
もしくは、cssの読み込みの指定にパラメータを設けることでも解決することが出来ます。
↑みたいな感じで、?以降のテキストを更新毎に変更してあげるだけでOKです！
これら試してみてください🙇♂️❗️
すごくわかりやすかったのですが
今は少し違っているのか、全く同じく進めてもできませんでした。
コメントいただきありがとうございます🙇♂️❗️
可能であればうまくいかなかった点共有いただけたら嬉しいです🙇♂️
コメント失礼します。
企業から依頼されたサイトを作成した場合は
電話番号や個人か法人かを選ぶ時など
どうしたら良いのでしょうか？
お答えいただけると嬉しいです！
コメントいただきありがとうございます❗️サイト公開について2パターンあって、
１つは企業契約したサーバー上でサイト公開。
もう一つは、ご自身で契約したサーバー上で公開。この場合は、別途保守契約などをかわして運用する形になるかと思います。
おそらく今回前者のケースかと思われますが、この場合、サーバー契約の情報は全て企業の情報になります。
また、契約時には決済情報の入力が必要になるので、クライアントにサーバー契約してもらい、ログイン情報などを共有してもらう流れが一般的かなと思います😊
@@hirocode
ありがとうございます！
助かりました！
今後も動画楽しみにしております✨
いつもサイトを制作する際にお世話になっております。
一つ質問なのですが、10:00の所の初期ドメインを使ってサイトは一応公開できたのですが、自分で作ったJavascriptが上手く作動しないです。この段階ではJavascriptは反応しないのでしょうか？
すみません、自己解決しました！タグにjavascriptを認識するためのタグを入れていなかったのと、相対パスと絶対パスがごちゃごちゃになっていたようです。整理したら作動してくれました。これからも動画を参考に見させていただきます_(._.)_
コメントいただきありがとうございます❗️
パスの指定上手くいってないこと良くあります😅解決されたようで良かったです！！
また何かあったら気軽にコメントください😆♪
既にサイトを複数管理していますが、参考になりました。ありがとうございます！
ところで、netlifyやgithub pagesのような、静的サイトを無料でホスティングさせてもらえるサービスがあるかと思いますが、PHPなどを使った動的サイトを無料でホスティングできるサービスはご存知ないでしょうか？
たぶん、私の欲張りすぎでそんなものは存在しない気もしますが、もしも何かご存知でしたら教えていただきたいです🙌😂
嬉しいコメントいただきありがとうございます🙇♂️❗️
無料で使えるもの見つけられませんでした💦ワンチャン独自ドメインは当てれないけど...的なものなくも無さそうですが...
@@hirocode
わざわざ調べていただいて、ありがとうございますm(_ _)m
こちらで良いものが見つかれば報告したいと思います！😂
わかりやすい説明で参考になったのですが、ページが見つからないとエラーが出てしまいます（ ; ; ）
uploadOnSaveの下にuseTempFileとopenSshが出てきます。こちらの設定はfalseで良いか分かりますでしょうか...
あと、remotePathのwebの後に入れるものがよくわかりませんでした💦（これが原因なのかなと思ってます）
教えていただけると助かります🙇♀
返信遅くなってすみません🙇♂️
useTempFileとopenSshはfalseで問題ないです！もしくは項目削除しても大丈夫です！
remotePathの項目はレンタルサーバーによって異なるので、ご契約されているレンタルサーバーのフルパスを調べて挿入します。ロリポップの場合は、アカウント情報の箇所に”フルパス”という項目があるのでそれを入れています。
その中にhirocodewebというディレクトリ（フォルダ）を作ってデータをアップする指定になっています。
8:27 エラーで Unexpected string in JSON at position 195 という表示が出てしまうのですが対処法教えていただけないでしょうか。よろしくお願いします>
文字列に誤りがあるようなので、カンマの抜けやダブルクオーテーションの位置が間違ったりしていないか再度確かめてみてください❗️
動画内で使用したサンプルコード下記に置いてあるので参考にしてみてください😊❗️
www.craft.do/s/V0NKM6ZQVAWfwu
コメント失礼します。
今回初案件なのですが、お問い合わせフォームをphp工房で作成しました。
納品の際、レンタルサーバー契約、ドメイン取得をお客様にしていただくだけでよろしいのでしょうか？vscodeによる作業はお客様にしていただくのではなく、私たち制作側のpcで行なっても大丈夫なのでしょうか？？
ご回答頂ければ幸いです、よろしくお願いします。
コメントありがとうございます🙇
おっしゃる通り基本的にはレンタルサーバーとドメインどちらも契約してもらうのが良きです！サイト製作者がアップするが一般的かと思います！
可能であれば一時的にでもレンタルサーバーのログイン情報共有してもらって公開作業する形になります😆❗️
質問があります。
VSコードでHTML、CSS、JSをChromで表示させながら作りました。
いざ動画に手順で公開してみると、faviconや、一部の画像、動画が表示されていません。
ただしChromで表示しているページでは問題なく出力できています。
つまりコード自体には打ち間違えはなく、サーバーにアップロードする過程で何かしらのエラーが出たのだと思っています。
いろいろ触ったり検索してみたものの解決できず、何か対処法があればお聞きしたかったです。
よろしくお願いいたします。
ご質問いただきありがとうございます🙇♂️
画像のパス指定が正しいかご確認よろしくお願いします❕
コメント失礼します！vs codeでLPを作成しアップロードしURLを決める際は都度ドメインを取得する必要があるという認識でお間違いないでしょうか？！
そんな認識です❗️
一応共有ですが同じサービスであればドメイン1つで問題ありません！
1つドメイン取得すればサブドメインが作れるので、
本サイト→ example.com
LP → lp.example.com
みたいな形にすることができます😆❗️
@@hirocode ありがとうございます！😭助かりました！
コメント失礼いたします。
説明とてもわかりやすかったです、
ありがとうございました！
1点質問なのですが…
複数のWebサイトを公開したい場合はどのようにすれば良いでしょうか？
公開したいサイトの分だけまたプラン登録してアドレスの取得を毎度やらなければいけないのでしょうか…
嬉しいコメントいただきありがとうございます☺️♪
仕事での制作であれば、1サイトにつき1つのレンタルサーバーと1つの独自ドメインが基本です。
会社やサービスとして複数のサイト（例えばコーポレートサイト& LPとか）を持つ場合は、1つのサーバーに1つの独自ドメインで、独自ドメインからサブドメイン（lp.example.comのような）を作成する形になります。
関わりのない2つのサイトを運営するのであれば2つ独自ドメインを取得します😆❗️
@@hirocode ありがとうございます、一度やってみます！
公開済みのサイトを編集して、内容を反映させたい場合、他の方のコメントにあるように内容を変更した状態で再度 SFTP: Sync Local -> Remoteを行ってみたのですが、変更の反映が確認できません…数時間経って確認もしたのでキャッシュではないみたいで…原因がわからないのですが、何か対処法がありましたら教えていただきたいです🙇♀
@@hirocode 2つ目のサイトをアップしようと、同じ方法で動画の通りに進めましたが、初期ドメインの時点でサイトのエラーが発生してアップしたいWebサイトが表示されませんでした。「ロリポップ！FTP」で確認したところ正しくアップロードはされているみたいです。原因と対処法が分かりましたら、教えていただきたいです…
ロリポップ！FTPで正しくアップロードされているのが確認できていて反映がされない場合、「ロリポップ！アクセラレータ」を無効にすれば反映されるかもしれないです❗️
こちらどのようなエラー発生していますでしょうか❓
質問なのですが…
vscodeとロリポップでサイトを立ち上げた後、サイトの修正(画像を差し替えたり文を書き換えたり等)をする場合はどのようにすれば良いのでしょうか。
ファイルを編集して再度 SFTP: Sync Local -> Remoteすれば上書きされるはずです❗️SFTP: Upload Active FileやFolderでファイルやフォルダ単位でのアップも可能です！
@@hirocode 出来ました！ご丁寧に返信ありがとうございます！
以前はできたのですが、久しぶりに更新をしようとしたら、反映されなくて困っています。
原因や解決方法は何か考えられませんか。サイトの更新ではなくて、プレビューで見ると更新内容が反映されているので、Remoteのアップロードがうまく行ってないとは思っているのですが、、、
Website立ち上げ初心者です。
参考にしながら作業進めているのですが、404 Errorと出てしまいます。アドバイスいただけないでしょうか？
コメントいただきありがとうございます😊♪
どのタイミングで404エラー出てる状況でしょうか？？
素晴らしい動画ありがとうございます
エコノミークラスでSSHが無い場合はどのようにすればよろしいですか？
ありがとうございます😊♪
「アカウント情報>サーバー情報」を見ながら動画と同様に項目を埋めていただいて、下記項目だけこのように変更すればいけそうです😆❗️
"protocol": "ftp",
"port": 21,
@@hirocode 丁寧な対応ありがとうございます
やってみます
@@hirocode403エラーで、WAF無効にしても変わりません😢
2年越しの質問失礼します。😢
ロリポップの情報をvs Codeに打ち込む際に必要な
SSHという画面はロリポップログイン画面のどこから行けますでしょうか？
初歩的な質問申し訳ありません。
よろしくお願いします。
コメントありがとうございます☺️
ログイン後、左側にあるサイドバーの1番上の項目
サーバーの管理・設定 > SSH で確認できます😆❗️
@@hirocode返信ありがとうございます！
そこを見てもなんか違うなぁと思っていたんです😂
そうしたら、契約プランによってSSH対応しているかどうかが違ってプラン変更したら無事できました！
重ねて質問失礼します☔️☔️
ムームードメインで取得完了→ロリポップの独自ドメイン設定で【設定する独自ドメイン】【公開フォルダ】も記入したのですが、
【入力されたドメインはすでに他のアカウントにて設定されているかロリポップのドメインのため設定することができません。またムームーメールでご利用中の独自ドメインは設定することができません】とエラーが😢、、、
もし解決方法ご存知でしたら教えて頂きたいです🙇🏻♀️
WEBを作るのは好きですが、どうもサーバアップが嫌いで😢
すみません確認できてませんでした💦
support.lolipop.jp/hc/ja/articles/360058167254
可能性が高そうなのが上記URLに記載されている「レンタルサーバー無料お試し（任意）」にチェックが入っていた、かもしれません。
一度サポートに連絡するのが手っ取り早そうです🙇！
とてもわかりやすく参考になりました！試してみたところ、404エラーが出てしまったのですが、URLと sftpのコードに間違っているところが見つけられず、他に原因は考えられますでしょうか...？😭
コメントいただきありがとうございます😊♪
404エラーはアクセスしたページが存在していない時のエラーなので、データが正しくアップロードされていないか、もしくはアクセスしているURLが正しくない可能性があります。
レンタルサーバーのユーザー専用ページから、サーバーに上がっているデータを確認することができるので（ロリポップの場合は、「ロリポップ！FTP」）、まずはそこにデータが正しくアップロードされているか確認してみるのが良さそうです😆❕
@@hirocode
ありがとうございます！助かりました😭ロリポップを使っているので確認したところアップロードは出来ました！しかしvs.codeでは反映されているstyle.cssだけ反映されないので、ディレクトリが間違っているということでしょうか？😢
無事アップできたようでよかったです😆❕
CSSが反映されていない場合、cssを読み込むパスの指定に誤りがあるかもしれません。
相対パス（../../~）で指定している場合は、ファイルからの位置関係が正しいか、絶対パス（~）で指定している場合も同様、指定の階層に誤りがないか、スペルミスがないか確認してみてください❕
@@hirocode 返信ありがとうございます！やはりパスが間違っていたみたいで、もっと勉強します！！無事に見れるようになり、初めて作ったのでとっても嬉しかったです☺️ありがとうございます✨
よかったです❕初めてのサイトめちゃめちゃ嬉しいですね😆♪僕ももっと参考になる動画出せるように頑張ります！！
14:49
このように表示されてしまいます
入力されたドメインはすでに他のアカウントにて設定されているか、ロリポップのドメインのため設定をすることができません。また、ムームーメールでご利用中の独自ドメインは、設定をすることができません。
どうすればいいですか？
support.lolipop.jp/hc/ja/articles/360058167254
ここに記載されているどれかに該当しているかと思われます！
10:16 の所でつまづいています🥲ロリポップFTPでファイルがアップロードされているのを確認できるのですが、404エラーが出てしまいます。welcome.htmlもロリポップFTPに最初から入っていないのですがwelcome.htmlは表示されるためよく分かりません…なにか改善方法はありますでしょうか…？
コメントありがとうございます🙇
まず下記２点確認してみてください！
・「初期ドメイン/アップロードフォルダ」のurlをブラウザで開いているか（動画の場合、「hirocode.main.jp/hirocode」）
・上記フォルダにindex.htmlが存在しているか
コメント失礼します。自分はこの動画を見る前にxサーバーにてレンタルサーバーを申し込み独自ドメインを取得したのですが、この動画のvscodeの作業のやり方がわからず詰まっています。ロリポップにおけるSSH情報がxサーバーではどの部分に該当するのかがわからりません。（hostやusername、password、remotePathなどになんの情報を打てばいいかがわからないという感じです）いろいろな情報を入力して試してはいますが、「All configured authentication methods failed」と表示されてしまいます。解決策がありましたら、ご教授いただきたいです。よろしくお願いします。
現在ポートフォリオサイトを作成し公開しようとしている段階ですが、やり方が分からず困っていた所、この動画を発見しました。
とても分かりやすく参考になりました、ありがとうございます。
現在ドメインを取得するのに無料クーポン待ちなのでまだ公開には至ってないですが、クーポンが届き次第また参考にさせて頂きます。
そしてここからひとつ質問なのですが、作成したポートフォリオサイトにはaタグで飛ぶプロフィールページやイラスト置き場など新たなhtmlを用意しているのですが、VScode内でのみページを表示させていた時は他htmlのURLを貼り付ければ普通にページ遷移し表示されましたが、ロリポップで作ったサイトを表示してみるとindex.htmlしか表示されずどうすればいいか分からない状態です。
他ページのURLを取得すればいいのでしょうがリンクを押して表示されるのがindex.htmlのみなので他ページのURL取得方法が分かりません。
もしよければ是非教えて頂きたいです。
お忙しい中申し訳ございません。
コメントいただき、ありがとうございます☺️‼️
リンクの指定方法がうまくいっていない状況でしょうか？？
例えば、index.htmlファイルと他ファイル（profile.html）が同階層に並んでいる場合は、
プロフィールページへ遷移
とすれば移動できるかと思われますがいかがでしょうか。
@@hirocode そうです！リンクの指定がよく分からなくて！！
なるほど！HTML名を直接指定してあげればいいのですね！！
ありがとうございます！！✨
これからも動画参考にさせて頂きたいのでチャンネル登録失礼致します！！
すみませんまたまたごめんなさい！
今回無料クーポンがようやく届いたのでホームページ公開まで踏み切りましたが、他HTMLが同階層であるにも関わらず遷移しません。
調べてみたのですが未だ分からず、もしよろしければまたお聞きしてもよろしいでしょうか？
※追記
改めていじってみるとindex.htmlからprofile.htmlや他htmlに移動することが出来たのですが、ページ遷移後URL末尾にprofile.htmlとついたあとに他のページに遷移しようとするとどこへも遷移出来なくなりました。
お忙しい中申し訳ないのですが、教えて頂けましたら嬉しく思います！
例えばこのように３つのページの飛べるリンクを作成します。
ホーム
アバウト
プロフィール
これを上記3ページに配置します。
同階層のファイルの場合、通常であればこれだけで各ページ行き来できるはずですがいかがでしょうか!
@@hirocode お返事ありがとうございます！
はい、そのようにhtmlをaタグに記載していて、階層も同じなので問題ないはずだと思うのですが、index.htmlからprofile.htmlに移動するとURL末尾にprofile.htmlがついてその後どのhtmlにも飛べなくなります！
profile.htmlだからというわけではなく、他htmlでも一度は遷移するも次からは遷移しなくなります！
調べたところ、file:///で始まるものがあまり良くない？という情報を発見したのですが、aタグにカーソルを合わせると左下にfile:///と表示されるので、これが何か関係あるのでしょうか？
質問ばかりですみません💦
※追記
ごめんなさい何故か分かりませんが解決できました！！
本当にありがとうございます！！
これからも動画勉強させて頂きます！！✨
失礼致します。
8:30 14:30 hirocodewebというのを真似させてもらったのですが、ここは任意で構わないでしょうか？
現在、(初期ドメイン)/hirocodewebの段階で、403エラーがででしまい、
独自ドメインに至ってはサーバーが見つかりませんという状況です。
時間は5,6時間経過しています。
分からないことだらけなのですが、ご回答いただけると幸いです。
コメントいただきありがとうございます😊 任意の名前で構いません！
レンタルサーバーには複数のサイトを載せる前提であるため、
/hirocodeweb
/websiteA
/websiteB
みたいな感じで、フォルダ（ディレクトリ）を作っていく管理していくイメージです。
08:30 のremotePathでは↑のようにサイトのディレクトリを指定しています。
home/users/0/main.jp-hirocode/web/がレンタルサーバーのルートディレクトリ（一番上の階層）なので、ここに、hirocodewebや、websiteA、websiteBなど任意のディレクトリを作って、そこにサイトのデータをアップします。
14:30 では、設定する独自ドメインhirocodeweb.com にアクセスした際に、どのフォルダを表示しますか？という指定が「公開フォルダ」の項目にあたります。
ゆえに、ここではremotePathで指定したhirocodewebを指定しています。
なので、名前は任意で構いませんが、remotePathで指定したフォルダ名と、公開フォルダ名が一致している必要があります😆❕
この点見返してみて解決しない場合、データのアップロードが正しく行われていない可能性もあるので、ロリポップにログイン後、
サーバーの管理設定>ロリポップ！FTPにアクセスすると、レンタルサーバー内が確認できるので、正しくディレクトリが作成されているか、データがアップされているか確認してみてください🙇
（ロリポップ以外でしたら、同様のFTP接続メニューを選択ください）
ご回答ありがとうございます。
FTPにアクセスしたところ、hirocodewebというものとwelcome.htmlというものが出てきました。
やはり初期ドメイン/hirocodewebにアクセスすると403エラー、このページへのアクセスは禁止されています、と出てきてしまいます。
何か対処法などありますでしょうか？
FTPツールで、hirocodewebの中に、index.htmlファイルを作ったらどうなりますでしょうか。
FTPツール内の、「新規ファイル作成」> ファイル名にindex.htmlを入力、下のテキストエリアに、「テスト」とかで良いので適当に文字を入力、一番下の「保存する」をクリックします。
welcome.htmlとindex.htmlが2つ並んでいる形になればOKです。
これで表示変わりませんでしょうか？ご確認よろしくお願いします🙇♂️
@@hirocode 表示が二つ並んででてきました。
すみません💦 どこに何の表示が2つ並んでいる状態でしょうか？
9:46 アップロードするローカルフォルダが表示されないのですが、どうしたら良いでしょうか………
コメントいただきありがとうございます❗️ 確かなことは言えないのですが、作成したsftp.jsonの内容に誤りがあるなどの可能性が考えられます。できれば再度手順追って試していただけますでしょうか🙇♂️❗️
全て手順を終えてリンク先に飛んでみたら、このサイトにアクセスできませんと表示されてしまいました。対処法などし知っていましたら教えていただけると幸いです。
コメントいただきありがとうございます🙇♂️❕
独自ドメイン設定後、一定時間立たないとページが表示されないことがありますが、その原因は考えられますでしょうか😲❔
もしくはURLや公開フォルダに誤りがある可能性もあるかもしれないです💡
@@hirocode ご回答ありがとうございます！前者については問題ないです。公開フォルダというのはどのことでしょうか？無知で大変申し訳ありません😅
14:30
この辺りの「公開フォルダ」という項目で、レンタルサーバー内にあるどのフォルダに対してドメインを設定するかという設定です❕
空であれば問題ないかと思いますが、サーバー内のフォルダ名と相違がある場合エラーになる場合があります💡
@@hirocode 回答ありがとうございます！無事公開することができました！
よかったです😆❕❕❕
アップロードしたウェブサイトが表示されません！
どうしたらいいでしょうか？
コメントいただきありがとうございます🙇♂️アクセスしたブラウザに何かエラー文表示されていませんでしょうか？
15:15
2日待っても404エラーのままです
どうすればいいですか？
コメントありがとうございます🙇 10:16 のステップでサイトの表示は確認できましたでしょうか。
認証コードが永遠に届かないっす
コメントいただきありがとうございます😊♪
電話番号のSMS認証でしょうか❓今僕の電話番号では即座に届いたので、電話番号の間違い、スマホの設定（拒否や通知オフなど）が考えられそうです😢