ロリポップ！で自作のWebサイトを公開する方法を紹介します

ロリポップ！で自作したWebサイトを公開したいけどどうやるんだろう？

作ったWebサイトをせっかくならインターネットに公開したいですよね。

公開する手段はいくつかあるけど、その中でもレンタルサーバーのロリポップ！なら安いしどうだろう？と思ってこの記事を見ているのではないのでしょうか。

今回はそんな疑問を解消するために自作したWebサイトをロリポップ！で公開するっていうことをやっていきたいと思います。

記事の内容

HTML・CSS・JavaScriptのサイトをロリポップ！に公開する
React.jsで作成したサイトをロリポップ！に公開する
Vue.jsで作成したサイトをロリポップ！に公開する

Webサイトをロリポップ！で公開してみたかったらどういった流れでできるのか参考にしてみてください。

ワードプレスブログを公開する方法は以下の記事で書いているので、ワードプレスを使いたい場合は以下を参考にしてみてください。

ロリポップ！でワードプレスブログを作成します（お名前.comドメイン利用）

2022.4.8

ロリポップ！でどうやってワードプレスを始めるんだろう？こんな悩みを解消するために今回はロリポップ！でワードプレスブログ・サイトを始める方法を解説していきます。最初ブログを開設するとなってもどうやって進めていけばいいのか不安ですよね。ワードプレスとか言われてもよく分かりません。ただ大丈夫です。こ...

公開自体はどれも簡単だからサクッとやっていこう

ロリポップ！でWebサイトを公開する手順

Webサイトを公開する手順としては以下。

Webサイトを公開する手順

ドメインを取得して追加する
追加したドメインのフォルダにWebサイトのファイルをアップロードする

ロリポップ！にドメインを追加すると、そのドメインのフォルダが作られます。そのフォルダにWebサイトを構成するファイルたちを入れていけばOKです。

使うべきロリポップ！のプランは？

サイトを公開するのにおすすめのロリポップ！！のプランはライトプランかスタンダードプランです。

静的なサイトでデータベースも使わないなら安いライトプランでもいけますが、SSH接続ができないのでスタンダードプランがお勧めです。

ライトプランとスタンダードプランの違いは以下の記事で書いているのでよかったら見てみてくださいね。

【比較】ロリポップのライトとスタンダードの違いとは？どっちのプランを選ぶべき？

2022.4.16

ロリポップ！のライトとスタンダードってどっちのプランを使えばいいの？そんな疑問を解消するためにこの記事ではロリポップ！のライトプランとスタンダードプランの比較をしていきます。記事の内容ロリポップ！のライトプランとスタンダードプランの違いライトプランがおすすめな人スタンダードプランがおすすめ...

ここからはロリポップ！に契約している前提で話を進めるので、ロリポップ！の場合どういった流れでサイト公開することができるのか見ていってください。

ドメインを取得して追加する

既ににドメインをロリポップ！に追加している人は飛ばしてね

ドメインを取得するサイトはどこでもいいけど、お名前.comでやりますね。欲しいドメインの文字列を検索して取得可能か確認しましょう。

既に取得されているものは使うことができないので、いくつか検索してみるといいです。

欲しいドメインにチェックを入れて料金確認へ進みます。申込内容を確認して申し込めばOKです。

これでドメインの取得は完了したので、ロリポップ！でこのドメインを使えるようにします。

ロリポップ！に取得したドメインを追加する

お名前.comでネームサーバーの設定をする

ロリポップ！で今取得した独自ドメインを使うための紐づけをします。[ネームサーバーの設定]から取得したドメインにチェックを入れてロリポップ！のものに設定しましょう。

uns01.lolipop.jp
uns02.lolipop.jp

これでOKボタンを押してやりましょう。

次はロリポップ！の管理画面から今取得した独自ドメインを登録するよ

取得したドメインをロリポップ！の管理画面から登録する

独自ドメイン設定から取得したドメインを設定しましょう。

設定する独自ドメイン・・・取得した独自ドメイン
公開（アップロード）フォルダ・・・公開先のフォルダ名。分かりやすいようにドメイン名と同じものがおすすめ。

ちなみにここ絵指定した公開（アップロード）フォルダはこんな風に作られます。ルートディレクトリ配下ですね。

独自ドメイン設定が終わるとこんな画面になります。

この設定したドメインにWebサイトのファイルたちをアップロードしていくよ

Webサイトのファイルをアップロードする流れ

ドメインを追加したら追加したこのフォルダにWebサイトのファイルたちをアップロードします。

今回の例で言うとmagic-number.siteフォルダの中にアップロードしていきます。どういったファイル名でアップロードすればいいのか？だけどこれはロリポップ！に書かれていますね。

デフォルトドキュメント

デフォルトドキュメントとは、ブラウザで閲覧する場合にファイル名を省略することのできる特別な名前のファイルです。トップページに使用するHTMLファイルなどに使用します。ロリポップ！！では、以下のファイル名がデフォルトドキュメントとして設定されています。また、お客様が.htaccessファイルを設定し追加することもできます。
index.html
index.htm
index.shtml
index.shtm
index.php
index.cgi
同じディレクトリ内にこれらのファイルがある場合は、上記のファイルから優先的に適用されます。
Webサーバーの仕様

htmlファイルならindex.htmlという名称のファイルが起点になるように作るといいでしょう。

ファイルのアップロードはFTPソフトを使ってやる

ロリポップ！にはロリポップ！！FTPっていうサーバー内にあるファイルを確認したりアップロードすることのできるものがあるんだけど、フォルダをアップロードできなかったりちょっと使いづらいのでFTPソフトを使ってやります。

FTPソフトはなんでもいいけど、Cyberduckでアップロードするね