Dropboxでホームページのホスティングをする方法

急にキャンペーンサイトやランディングページが必要になることや、もっと気軽にホームページを立ち上げたいと思ったことはありませんか？

小規模なホームページを作成するための最もポピュラーな方法はレンタルサーバーを借りることですが、実はオンラインストレージサービス「Dropbox」でも、静的なホームページであれば簡単に開設できるのをご存知でしたか？

今回は、Dropboxでホームページホスティングをする手順を丁寧に解説していきます。WordPressなどは使わないけれど、ある期間だけ簡易的なホームページを開設したい場合などに便利です。

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

Dropboxでホスティングができる？

Dropboxは2008年からサービスがスタートしたオンラインストレージサービスです。DMRによれば、2017年11月末時点で、ユーザー数500億人・毎日のアップロードファイル量は12億ファイルにも上るとされています。

オンラインストレージサービスはDropboxの他にGoogleのGoogle Driveなどがあります。オンラインストレージサービスは基本的にクラウド上にファイルを保管する役割を担っていますが、Dropboxでは簡単なホームページであれば公開できます。残念ながら、Google Driveは2016年にホスティング機能が廃止され、OneDriveはホスティング機能は利用できません。

今回は、3つの方法でDropboxでホームページを公開する方法をご紹介します。

参考：
Dropbox
30 Staggering Dropbox Statistics and Facts | DMR

1. KISSrを使ってホスティング

Dropboxを使ってホスティングを行う方法はいくつかありますが、最も簡単なのはKISSrを使う方法です。

参考：
KISSr

KISSrを使う方法は簡単です。ホームページにアクセスして、入手可能なサブドメインを入力しましょう。サブドメインは

http://サブドメイン.kissr.com/

という形式になりますが、独自ドメインを持っている場合は、ドメイン管理者側でカスタムドメインを指定することも可能です。入力できたら、「Create Site」ボタンを押します。

次に、Droboxのログイン画面が表示されるので、通常使っているDropboxアカウントを入力し、ログインします。アクセスのリクエストが表示された場合には、「許可」をクリックします。

すると、このような画面が表示され、「Your Sites」の欄に先ほど入力したドメインが表示されています。試しにアクセスしてみましょう。

アクセスすると、このように仮のページが作成されました。

Dropboxアカウントには、KISSr用のフォルダが作成されています。「ホーム＞アプリ＞KISSr」の順に辿り、その中に入れた「index.html」ファイルがトップページとして認識されるようになります。

CSSや画像などは、相対パスでも指定できるようになります。静的なホームページであれば、上のようにハイセンスなホームページを運営することも可能です。

2. DropPagesを使ってホスティング

Dropboxを使ってWebホスティングを行う類似サービスとして、DropPagesというサービスを使うことも可能です。

参考：
DropPages

こちらも非常に簡単にホームページを開設できます。DropPagesのホームページで、「Sign in」ボタンをクリックします。

次に、Droboxのログイン画面が表示されるので、通常使っているDropboxアカウントを入力し、ログインします。アクセスのリクエストが表示された場合には、「許可」をクリックします。

すると、このようなアカウント情報が表示されるページに到着します。「Your sites」の下にある「Create a new site」というボタンを押してみましょう。

このページのテキストボックスには、入手したいサブドメインを入力します。サブドメインは、

    http://サブドメイン.droppages.com/

という形式になります。ここでは、「サブドメイン.droppages.com」の形式で入力してください。サブドメインだけを入力するとエラーが発生します。

Dropboxアカウントには、DropPages用のフォルダが作成されています。「ホーム＞アプリ＞DropPages」の順にたどると、その下に3つのフォルダがあります。

こちらの3つのフォルダは少し特殊な構成になっており、「Content」にあるIndex.txtにはテキストの本文が格納されており、「Public」にはmain.css、「Templates」にはデザイン可能なテンプレートファイルbase.htmlがあります。静的サイトジェネレーターを利用していれば、構成に慣れているかもしれませんが、フォルダ構成に気をつける必要があります。

もしうまく同期されない場合には、アカウントページの緑色のボタン「Publish now」を押すことで、強制的に同期させることができます。また、何らかのエラーが起きた場合は、赤色のボタン「Reset Sync」を押してみましょう。

3. site44を使ってホスティング

最後に紹介するのはsite44というサービスです。こちらは10のWebサイトを月額4.95ドルで利用できる有料のサービスですが、使いやすく、30日間は無料で利用できるので、複数サイトを運営する予定がある場合は利用を検討してみるといいでしょう。

参考：
site44

利用を開始するには、site44のホームページで「Start your 30-day free trial」と書かれたボタンをクリックします。

続いてDropboxのアカウントにログインします。アクセスのリクエストが表示された場合には、「許可」をクリックします。

フリートライアルの画面に移動します。カード番号などを入力する欄があるので、情報を入力しましょう。もちろん、30日以内にキャンセルすれば請求はありません。

管理画面に移動するので、「Create a new website」ボタンを押します。

サブドメインを指定するか、独自ドメインを指定するかを決めます。ここでは、サブドメインを開設してみましょう。左側のテキストボックスにサブドメインを入力します。サブドメインは、

    http://サブドメイン.site44.com/

の形式で指定できます。

規約が出てくるので、よく読んで、「Accept」(同意)をクリックしましょう。

これで、サイトが作成されたようです。Dropboxアカウントには、site44用のフォルダが作成されています。「ホーム＞アプリ＞site44」の順に辿り、その中に入れた「index.html」ファイルがトップページとして認識されるようになります。

あとの使い方はKISSrと同様です。CSSや画像などは、相対パスでも指定できるようになります。

まとめ：ランディングページなど簡易的なサイト制作に

Dropboxを使ったWebサイトのホスティングでは、静的なファイルしか扱えないため、WordPressなどデータベースが必要な複雑なWebサイトは運用できません。

しかし、最近では静的なサイトジェネレーターも多くリリースされています。中でもGatsbyやMetalsmithは一度設定をしてしまえば書き出しは簡単なので、フロントエンドの知識がある方は利用してみてはいかがでしょうか。

参考：
WordPressの代わりになる！2018年注目の静的サイトジェネレーター6選