【NetlifyでWEBページを作ろう!】Netlifyで1つのフォルダで複数のhtmlファイルをアップロードし、画面遷移できるようにする方法

みはる

Netlify、世界で一番お手軽にhtml/cssをアップロードできるサービスだと思う!

元々、コーディングしたものを人に見せるために「Netlify」はよく使っていたのですが、ペライチのものしかデプロイしたことがなかった

先日、ドメイン、サーバー取得してWordPressでブログ開設するまでの必要はないけど、画面遷移してくれるWEBページもどきを作りたい事態に遭遇した

結論としては、「Netlify」で実現できたのですが、ここに行きつくまで数々の失敗があったため、やり方を備忘録として残そうと思います

みはる

サーバー借りるほどじゃないけど、お手軽にWEBページが作りたい時に必見な記事となっています!

目次

やり方が分からず、ページごとにURLを取得し、絶対パスでリンクしてた

こうして画面遷移したい場所ごとに個々にフォルダで作成し、デプロイを行った

「二股疑惑?の恋人のSNSアカウントにログインして、本命を探す」というコンセプトのマーダーミステリーを作るに際して、架空の恋人のSNSアカウントをコーディングしていた

インスタグラム風のSNSアカウントだったので、恋人の投稿ページや、フォロワー達の投稿ページを表示させるのに際して、1個1個URLを取得してた

みはる

このやり方しか浮かばなくて、修正がある度に泣きそうになりながらデプロイしてたけど、全然これより良いやり方がありました

しかし、「いや…こんな頭悪いやり方しかないハズない!」とネット上で調べたが、思うようなやり方がヒットせず、最終的に次の見出しのやり方に辿りついた

【余談】Netlifyは「index.html」以外、表示されないので注意

みはる

う~~~~ん
「〇〇.index」というファイルいっぱい作ればええんかな?

というワケで、1つのフォルダ内に複数htmlファイルを作ればよいのでは?と思ったけど、デプロイすると以下の画像のように表示される

みはる

調べた結果、Netlifyってファイル名を「index.html」にしないと反映されないらしい…!

Netlifyで1つのフォルダで複数のhtmlファイルをアップロードする方法

STEP
画面遷移したいページごとにフォルダを作成し、「index.html」ファイルを個々のページごとに格納する
STEP
aタグに相対パスで指定する
みはる

相対パスの人為的な入力間違い防止のため、1文字ずつ入力し、自動で出される候補から相対パスを設定しましょう!

こうすると、1つのフォルダから1つのURLで済むし、相対パスを通じて、画面遷移ができるようになります!
やったね!!!

みはる

めっちゃ簡単!お手軽っ…!
Netlify大好き!一生ついてくっ…!!!!

【宣伝】マーダーミステリー作りました

みはる

はじめて自分でがっつりコーディングしました!
世に作品を送り出せてうれしい!

【概要】
国宝級のイケメン:彼君と付き合えて本当に幸せな日々を送っていたが、彼君に女の影がっ…?! 彼君と付き合っているのは私…。「自称:彼君の彼女」を名乗る女は言ってることメチャクチャで話にならない! そうだっ…!彼君のSNSにログインすれば、どちらが本命かハッキリするんじゃない? …でも、彼君のSNSなんてどうやってログインすれば良いんだろう…?
【プレイ時間】30分~90分(目安)
【プレイ人数】2人(GM不要)

みはる

というワケで、紆余曲折あったけどNetlifyのおかげで自分でコーディングしたものを世に送り出すことができました…感謝…

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次