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

目次
Webサイトを公開する手順
Webサイトを公開する手順としては以下。
- ドメインを取得して追加する
- 追加したドメインのフォルダにWebサイトのファイルをアップロードする
ロリポップにドメインを追加すると、そのドメインのフォルダが作られます。そのフォルダにWebサイトを構成するファイルたちを入れていけばOKです。
使うべきロリポップのプランは?
サイトを公開するのにおすすめのロリポップ!のプランはライトプランかスタンダードプランです。静的なサイトでデータベースも使わないなら安いライトプランでいいと思います。
ライトプランとスタンダードプランの違いは以下の記事で書いているのでよかったら見てみてくださいね。
ドメインを取得して追加する

ドメインを取得するサイトはどこでもいいけど、お名前.comでやりますね。欲しいドメインの文字列を検索して取得可能か確認しましょう。
既に取得されているものは使うことができないので、いくつか検索してみるといいです。
欲しいドメインにチェックを入れて料金確認へ進みます。申込内容を確認して申し込めばOKです。
これでドメインの取得は完了したので、ロリポップでこのドメインを使えるようにします。
ロリポップに取得したドメインを追加する
お名前.comでネームサーバーの設定をする
ロリポップで今取得した独自ドメインを使うための紐づけをします。[ネームサーバーの設定]から取得したドメインにチェックを入れてロリポップのものに設定しましょう。
- uns01.lolipop.jp
- uns02.lolipop.jp
これでOKボタンを押してやりましょう。

取得したドメインをロリポップの管理画面から登録する
独自ドメイン設定から取得したドメインを設定しましょう。
- 設定する独自ドメイン・・・取得した独自ドメイン
- 公開(アップロード)フォルダ・・・公開先のフォルダ名。分かりやすいようにドメイン名と同じものがおすすめ。
ちなみにここ絵指定した公開(アップロード)フォルダはこんな風に作られます。ルートディレクトリ配下ですね。
独自ドメイン設定が終わるとこんな画面になります。

Webサイトのファイルをアップロードする流れ
ドメインを追加したら追加したこのフォルダにWebサイトのファイルたちをアップロードします。
今回の例で言うとmagic-number.siteフォルダの中にアップロードしていきます。どういったファイル名でアップロードすればいいのか?だけどこれはロリポップに書かれていますね。
デフォルトドキュメント
デフォルトドキュメントとは、ブラウザで閲覧する場合にファイル名を省略することのできる特別な名前のファイルです。トップページに使用するHTMLファイルなどに使用します。ロリポップ!では、以下のファイル名がデフォルトドキュメントとして設定されています。また、お客様が.htaccessファイルを設定し追加することもできます。
- index.html
- index.htm
- index.shtml
- index.shtm
- index.php
- index.cgi
同じディレクトリ内にこれらのファイルがある場合は、上記のファイルから優先的に適用されます。
htmlファイルならindex.htmlという名称のファイルが起点になるように作るといいでしょう。
ファイルのアップロードはFTPソフトを使ってやる
ロリポップにはロリポップ!FTPっていうサーバー内にあるファイルを確認したりアップロードすることのできるものがあるんだけど、フォルダをアップロードできなかったりちょっと使いづらいのでFTPソフトを使ってやります。

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

FTP接続の方法は以下の記事で書いたからよかったら参考にしてみてください。
Webサイトのファイルをアップロード
パソコンにあるWebサイトのフォルダやファイルをFTPソフトを使って、ドメインのフォルダにアップロードします。
そうしてブラウザからドメインにアクセスしてみるとちゃんとサイトが表示されました。
次はReactとVueで作成したサイトをアップロードしてみましょう。
Reactで作成したWebサイトをアップロードしてロリポップで公開する

表示がミスっている部分もあるけど、Reactで作成したサイトも公開することができました。
Vueで作成したWebサイトをアップロードしてロリポップで公開する

Vueの場合も公開することができました。
自作のWebサイトをロリポップで公開する方法まとめ
- HTML・CSS・JavaScriptのサイトをロリポップに公開する
- React.jsで作成したサイトをロリポップに公開する
- Vue.jsで作成したサイトをロリポップに公開する
今回は3つのWebサイトをロリポップで公開するっていうことをやりました。どのサイトも静的なサイトなら必要なファイルをアップロードすれば公開できるから楽ですね。
ロリポップでサイト公開したかったら試してみるといいですよ。