\仮想通貨は積立投資がオススメ/

初心者でも簡単!レンタルサーバーでWordPressを使わずにオシャレなWebサイトやアプリを作る方法

ブログやアフィリエイトサイト、コーポレートサイトなどはWordPressで簡単に作ることが可能で、その手法もそこら中で色々な方が解説されています。

ところが、それら以外のWebサイトやWebアプリケーションなどはそこまで情報が無い状態です。

実際には無いことは無いけどある程度知識がある前提で書かれていることが多いです。

htmlとかcss/jsの書き方まではあるけどそれをどうやってサーバー上で公開するのかとかってあまり情報が無いですよね。。。

僕は先月からmixhostを使い始めたのですが、どうせレンタルサーバー契約してるならブログ以外もなんかやりたいなーと思ってWordPressを使わずにWebサービスを作っています。

作り込むこと自体は色々考えながらやらないといけないので多少時間はかかりますが、Webサイトの公開自体は恐ろしく一瞬でできたので記録がてら記事にします。

「Webアプリとか作りたいけど難しそう」

とか思ってる人はこの記事読んでハードル下げてください!!

 

Webサイトを公開するまでの手順

それでは手順を記載していきます。

簡単5ステップです!

既にレンタルサーバーを持っている人はドメイン決めて適当なオシャレなデザインでサイトを公開するところまでなら30分でいけます!

初心者でも数時間あれば作成可能です。手順自体は大まかには全て書いてあるので記載の通りにやれば公開までいけるはずです。

レンタルサーバー持っていない人は契約からなのでもうちょっと時間かかるかもしれません。

ちなみにレンタルサーバーはmixhostなら最初の30日間はお試し期間で無料で使用することができます

オシャレサイト作成の5ステップ
  1. レンタルサーバーと契約する
  2. ドメインを取得する
  3. ドメインにネームサーバーを設定する
  4. レンタルサーバーにドメインを追加する
  5. サイトのテンプレート(デザイン)をサーバーにアップする

レンタルサーバーと契約する

まずはレンタルサーバーと契約しましょう。

既にレンタルサーバー持っている人は飛ばしてください。

持っていない人にはmixhostをオススメします。

mixhost公式サイト

mixhost公式サイト

SSDで高速だし、30日間の無料お試しもあるしでこれ選んでおけば間違い無いです。

mixhost公式サイトから「クレジットカード不要で今すぐ30日間無料お試し」をクリックしてください。

プランの選択する必要がありますが、スタンダードで十分です。

この先はドメインを入力する場面などもありますが、独自ドメインを使用する場合は適当な値で大丈夫です。

それ以外は画面の指示に従って必要な情報を入力していけば登録は完了です。

これでサーバーの契約は完了です。簡単ですね。

 

ドメインを取得する

続いてドメインを取得しましょう!

ドメインというのはURLのことです。このサイトだと「takeiho.com」てのがドメインです。

ドメインは取得サイトがいくつかありますが、大手の「お名前.com」とかで取得すると簡単です。

ドメイン取得サイト

ドメイン取るならお名前.com

上記のリンクを開くと以下のような画面が表示されるので取得したいドメインを検索してください。

検索結果が表示されます。四角い空白が表示されているドメインが使用可能なドメインになります。

使用したいドメインが無い場合は、検索の文字を少し変えたりして使用できるものを探してください。

ここに記載されている料金は契約から最初の1年間の料金です。ドメインは1年単位の契約となります。

にゃー

たったの30円で1年間も使えるのか!!

契約更新時には更新料が発生し、その料金はもう少し高くなります。(初期1年700円程度のドメインで契約更新時は3,500円ほどかかった気がします。)

と言っても1年で数千円程度なので安いものですね。特に最初の1年は安いドメインだと1円とかもあるので気軽に取得して遊んでみてください。更新しなければ追加の費用もかからないのでお試しで1円ドメインとか取得してみるのも良いと思います

使用したいドメインにチェックを入れると、右側の「選択されたドメイン」にドメインが追加されていきます。

ここのドメイン名が表示されていることを確認したら、「お申込みへ進み」をクリックしてください。

次の画面では料金の確認とサーバーの利用有無になります。

以下の2点を確認した上で「次へ」をクリックしてください。

  1. 「Whois情報公開代行」にチェックが入っていること
  2. サーバー選択が「利用しない」にチェックが入っていること

ドメインの購入が完了すればドメイン取得はOKです。

 

ドメインにネームサーバーを設定する

次に取得したドメインをどこのサーバーで利用するかという設定を行います。

恐らくwebやプログラミングをしたことが無い人はここを理解するのがなかなか難しいと思うので簡単に説明しておきます。
(理解してなくてもサイト公開自体は可能なので飛ばしても大丈夫です。
ただ、何かあった時のトラブルシューティングには役立つ知識だと思うので時間があれば読んでください。)

ネームサーバーとは

ネームサーバーとは、ドメインとIPを紐付けた情報を保持するサーバーを指します。

なんのこっちゃかわからないと思いますが、ドメインというのは人が分かりやすいように付けた名前で、裏ではIPというものが割り振られています。

例えば、このサイト「takeiho.com」の場合、「150.95.52.100」といIPが割り振られています。
(コマンドプロンプトで[ping ドメイン名]を入力すると確認できます。)

googleのIPは「172.217.25.227」ですね。

でこのドメイン名とIPの組み合わせを保持しているのがネームサーバーで、どこのネームサーバーに読み取りに行くのかを指定してあげるのがネームサーバーの指定です。なんとなく分かりました?

ちなみにサーバーってのは情報が詰まったコンピューターのようなものだと思っておいてください。

ネームサーバーというのは世界に一つとかではなくて各レンタルサーバーの会社とかがそれぞれ保持しているわけです。

今回の場合はmixhostを利用してサイトを公開するので、mixhostのサーバーに今回取得したドメインを追加します。

そうなるとネームサーバーもmixhostを利用する必要があります。

お名前.comで取得したドメインはネームサーバーがお名前.comで設定されているため変えてあげないといけないというわけです。

にゃー

取得したドメインとレンタルサーバーを繋げてあげる情報ってことだね!

画像使わずに文章だけなので分かりにくいかもしれませんが、使用するレンタルサーバーに合わせてドメインのネームサーバーも指定する必要があるということを覚えておいてください。

 

ネームサーバーの変更方法

それでは実際にネームサーバーの変更方法についてです。

今回はお名前.comでドメインを取得している前提で進めていきます。

お名前.comにログインすると以下の画面が表示されるので、「DNS」をクリックします。

確認画面が表示されますが、「更新画面から移動する」をクリックしてください。

表示された画面で「ドメインのDNS関連機能設定」を選択し、「次へ」をクリックします。

続いて表示された画面中程の左側に「ネームサーバーの設定」欄があるので、「ネームサーバーの変更」をクリックしてください。

確認画面が出てくるので青いボタンの方をクリックしてください。設定を変更するドメインにチェックを入れてください。

「他のネームサーバーを利用」をチェックして、サーバー契約時にメールで送られてきているネームサーバーを入力してください

mixhostの場合は画像通りに5つネームサーバーを指定すればOKです。

以上でドメインの取得及びドメイン側の設定は完了です。

次の更新のタイミングまでドメイン側はログインも何も不要です!!

 

レンタルサーバーにドメインを追加する

次の取得したドメインをレンタルサーバー側に設定してあげましょう!

これをすることにより、取得したドメインにアクセスした際に特定のページが表示されるようになります。

まず、mixhostのcPanelにログインしてください。

cPanel上で「アドオン」と検索すると、「アドオンドメイン」というメニューが検索できるのでクリックしてください。

表示された画面での「新しいドメイン」に取得したドメインを入力してください。

「サブドメイン」と「ドキュメントルート」はドメインを入力すると自動で入力されるのでそのままで大丈夫です

「ドメインの追加」をクリックすることでドメインの追加は完了です。

ここでエラーが発生する場合は「お名前.com」での設定がまだインターネット全体に反映されていない可能性があるため、少し時間を置いてから試してみてください

いつまで経ってもエラーが出る場合はネームサーバーの設定が上手くできていないかドメイン名を間違えているので確認してください。

 

作成したページを確認する

レンタルサーバーにドメインの追加まで完了するとすでにwebサイトは公開された状態になります。

ただこの時点では検索エンジンなどには反映されていないためドメインを知っている人だけがアクセス可能な状態です。

試しに取得したドメイン名をChromeやSafariなどのウェブブラウザでアクセスしてみてください。

「Index of」というページが表示されたら成功です

にゃー

おぉー!なんか表示された!

この状態ではまだwebサイト自体は作成していないため、このようにファイル階層のみが表示される状態になります。

この階層はcPanel上からも確認できます。

cPanelで「ファイルマネージャー」を開いてみてください。

以下の階層のファイルが表示されていることがわかります。

/PUBLIC_HTML/{取得したドメイン名}/

この階層に「index.html」というファイルを置いてあげるだけでウェブサイトの公開が可能です。

試しに作成してみてください。

左上の「+ファイル」ボタンをクリックして、「index.html」というファイルを作成してください。

作成した「index.html」ファイルを選択して「HTMLエディター」をクリックすることでHTML形式での編集が可能です。

文字を入力したら左上の保存をクリックしてください。

保存が完了したら再度自分のサイトにアクセスしてみてください。

「Index of」の表示ではなく、先ほど作成したindex.htmlに入力した内容が表示されるはずです。

にゃー

URLにアクセスすると最初にindex.htmlが表示されるようになっているんだね!なんかわかってきた気がする!

基本的なサイト表示はこのようにURLにアクセスしたタイミングでindex.htmlが読み込まれるようになっています。

 

サイトのテンプレート(デザイン)をサーバーにアップする

これまでの手順で取得したドメインでサイトを作る方法はわかったかと思います。

htmlやcss/jsが書ける方はここからゴリゴリと書いていけば良いですが、苦手な方はテンプレートを利用しましょう

にゃー

htmlもcssもjsも聞いたことはあるけど全くかけないよ。。。
サイトのテンプレートを利用することでかけなくてもおしゃれなWebサイトを作れるよ

takeishi

テンプレートを利用するだけでおしゃれなデザインのサイトを一瞬で作成することが可能です。

テンプレートを公開しているサイトは多くあります。

ここでは一部のサイトを紹介しておくのでお気に入りのデザインを見つけてください。

 

好きなデザインを探そう

おしゃれテンプレートが探せるサイト

Start Bootstrap
https://startbootstrap.com/

僕が作成したサイトは上記のデザインテンプレートの中から選んで作成しています。

各デモページは上記のサイトから確認が可能です。レスポンシブ対応(PC/スマホで綺麗に見える)かつBootstrapを使用したおしゃれなデザインが多いのでこの中から選んでおけば間違いないです。

今回はお試しで「Agency」というテンプレートを適用します。

Agencyのでもサイトはこちら(外部リンク)

Agency-demo page

おしゃれですねー。

デザインテンプレートをダウンロードしよう

これをまずダウンロードするところから始めます。

「Download」ボタンをクリックしてダウンロードしてください。
(github上にソースはあるのでできる方はサーバーに直接Cloneすることも可能です。)

一度自分のPCに保存してからレンタルサーバーにアップロードします。

 

 

 

テンプレートをサーバーにアップロードしよう

cPanelの「ファイルマネージャー」からダウンロードしたテンプレートをzipファイルのままアップロードしてください。

※解凍した状態だと一発でアップロードできないです。。

アップロードが完了したら、zipファイルを解凍してください。

抽出先のパスは一旦デフォルトのままでOKです。

先ほど解凍した階層に移動し、ファイルを全て選択して右クリック「Move」を選択します。

解凍したファイルは全て、「/PUBLIC_HTML/{取得したドメイン}」以下に移動させてください。

最終的には、以下の画像のようなファイル構成になります。最初から存在する「cfi-bin」と同じ階層に全てのフォルダとファイルがある状態です。

これで作成したサイトにテンプレートの適用が完了しました。

試しに自分のサイトにアクセスしてみてください。

にゃー

うわ!やばおしゃれやん!!

選んだテンプレート通りのサイトが表示されていれば成功です。

「index.html」を編集することでサイトの文言は自由に変えることが可能です。

自分のWebサービスを作るなり、ネタサイトを作るなり、告知用のサイトを作るなり自由に作成してください。

 

補足説明

SSL化も最初にやっておくと楽

SSL化されていないサイトは警告が表示されるようになるのでSSLも最初に合わせてやっておきましょう。

SSLというのは「https」の表記のことです。このサイトもURLの左側に「保護された通信」と表示されているかと思います。

SSLはセキュリティがしっかりしたサイトであることをサイトを訪ねた人やGoogleに知らせることが可能になっています。

ブログとかの場合だとこれがSEOに影響してきたりもします。

ドメイン直下に「.htaccess」ファイルを作成して以下の記述を行ってください
※.htaccessは配置している階層以下に対して有効となる。
そのため、各階層毎の設置もできるようす。(基本は不要)

hrrpsリダイレクト

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

設定したら、httpでアクセスしてhttpsにリダイレクトされることを確認してください。

 

Google Analyticsも設定しておこう

Google Analytics(GA)も最初に設定しておきましょう。

ネタサイトとかであれば不要ですが、これを設定しておくとサイトへのアクセス数を計測することが可能です。

どの時間帯にどのような人がアクセスしているのか等が数値として確認できるようになります。

 

サイトが完成したらSearch Consoleにも登録しよう

こちらも身内で楽しむ場合は不要ですが、Webサービスとして公開する場合はGoogleの検索エンジンから流入があるように登録しておくと良いです。

ここに登録することで、Googleに「こんなサイトありますよー」というのを伝えることが可能となり、検索結果にも表示されるようになります。

 

まとめ

いかがでしたしょうか。

思っていたより簡単にできそうでないですか?

実際にサービスの中身を作るときはPHPやPython,Rubyなどの言語を使う必要がありますが、大まかなデザイン及びサイトの立ち上げ自体はこの記事の手順通りにやればすぐ公開が可能です。

わかりにくい点が出てくれば随時追記していくのでコメント等残してくれると助かります。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です