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

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

Webサイトを公開する手順

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

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

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

サイトを公開するのにおすすめのロリポップ！のプランはライトプランかスタンダードプランです。静的なサイトでデータベースも使わないなら安いライトプランでいいと思います。

• ライトプラン　詳細はこちら
• スタンダードプラン　詳細はこちら

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

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

2022.4.16

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

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

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

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

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

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

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

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

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

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

これで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でアップロードするね

FTPソフトを使ってWebサイトのファイルをアップロードして公開する

ここからはWebサイトのファイルたちをアップロードして公開していきます。

まずはHTML・CSS・JavaScriptでできたWebサイトをアップロードするよ

FTP接続の方法は以下の記事で書いたからよかったら参考にしてみてください。

 Webサイトのファイルをアップロード

パソコンにあるWebサイトのフォルダやファイルをFTPソフトを使って、ドメインのフォルダにアップロードします。

そうしてブラウザからドメインにアクセスしてみるとちゃんとサイトが表示されました。

次はReactとVueで作成したサイトをアップロードしてみましょう。

Reactで作成したWebサイトをアップロードしてロリポップで公開する

Reactの場合はbuildしたファイルたちをアップロードするよ

表示がミスっている部分もあるけど、Reactで作成したサイトも公開することができました。

Vueで作成したWebサイトをアップロードしてロリポップで公開する

Vueの場合はbuildしたファイルはdistフォルダの中に入るからそれらをアップロードするよ

Vueの場合も公開することができました。

自作のWebサイトをロリポップで公開する方法まとめ

今回は3つのWebサイトをロリポップで公開するっていうことをやりました。どのサイトも静的なサイトなら必要なファイルをアップロードすれば公開できるから楽ですね。

ロリポップでサイト公開したかったら試してみるといいですよ。