この記事を読むのに必要な時間は約 21 分です。
ブログやアフィリエイトサイト、コーポレートサイトなどはWordPressで簡単に作ることが可能で、その手法もそこら中で色々な方が解説されています。
ところが、それら以外のWebサイトやWebアプリケーションなどはそこまで情報が無い状態です。
実際には無いことは無いけどある程度知識がある前提で書かれていることが多いです。
htmlとかcss/jsの書き方まではあるけどそれをどうやってサーバー上で公開するのかとかってあまり情報が無いですよね。。。
僕は先月からmixhostを使い始めたのですが、どうせレンタルサーバー契約してるならブログ以外もなんかやりたいなーと思ってWordPressを使わずにWebサービスを作っています。
作り込むこと自体は色々考えながらやらないといけないので多少時間はかかりますが、Webサイトの公開自体は恐ろしく一瞬でできたので記録がてら記事にします。
「Webアプリとか作りたいけど難しそう」
とか思ってる人はこの記事読んでハードル下げてください！！
Webサイトを公開するまでの手順
それでは手順を記載していきます。
簡単5ステップです！
既にレンタルサーバーを持っている人はドメイン決めて適当なオシャレなデザインでサイトを公開するところまでなら30分でいけます！
初心者でも数時間あれば作成可能です。手順自体は大まかには全て書いてあるので記載の通りにやれば公開までいけるはずです。
レンタルサーバー持っていない人は契約からなのでもうちょっと時間かかるかもしれません。
ちなみにレンタルサーバーはmixhostなら最初の30日間はお試し期間で無料で使用することができます。
- レンタルサーバーと契約する
- ドメインを取得する
- ドメインにネームサーバーを設定する
- レンタルサーバーにドメインを追加する
- サイトのテンプレート(デザイン)をサーバーにアップする
レンタルサーバーと契約する
まずはレンタルサーバーと契約しましょう。
既にレンタルサーバー持っている人は飛ばしてください。
持っていない人にはmixhostをオススメします。
mixhost公式サイト
プランの選択する必要がありますが、スタンダードで十分です。
この先はドメインを入力する場面などもありますが、独自ドメインを使用する場合は適当な値で大丈夫です。
それ以外は画面の指示に従って必要な情報を入力していけば登録は完了です。
これでサーバーの契約は完了です。簡単ですね。
ドメインを取得する
続いてドメインを取得しましょう！
ドメインというのはURLのことです。このサイトだと「takeiho.com」てのがドメインです。
ドメインは取得サイトがいくつかありますが、大手の「お名前.com」とかで取得すると簡単です。
上記のリンクを開くと以下のような画面が表示されるので取得したいドメインを検索してください。
検索結果が表示されます。四角い空白が表示されているドメインが使用可能なドメインになります。
使用したいドメインが無い場合は、検索の文字を少し変えたりして使用できるものを探してください。
ここに記載されている料金は契約から最初の1年間の料金です。ドメインは1年単位の契約となります。
にゃー
と言っても1年で数千円程度なので安いものですね。特に最初の1年は安いドメインだと1円とかもあるので気軽に取得して遊んでみてください。更新しなければ追加の費用もかからないのでお試しで1円ドメインとか取得してみるのも良いと思います。
使用したいドメインにチェックを入れると、右側の「選択されたドメイン」にドメインが追加されていきます。
ここのドメイン名が表示されていることを確認したら、「お申込みへ進み」をクリックしてください。
次の画面では料金の確認とサーバーの利用有無になります。
以下の２点を確認した上で「次へ」をクリックしてください。
- 「Whois情報公開代行」にチェックが入っていること
- サーバー選択が「利用しない」にチェックが入っていること
ドメインにネームサーバーを設定する
次に取得したドメインをどこのサーバーで利用するかという設定を行います。
恐らく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」をクリックします。
確認画面が表示されますが、「更新画面から移動する」をクリックしてください。
続いて表示された画面中程の左側に「ネームサーバーの設定」欄があるので、「ネームサーバーの変更」をクリックしてください。
「他のネームサーバーを利用」をチェックして、サーバー契約時にメールで送られてきているネームサーバーを入力してください。
mixhostの場合は画像通りに5つネームサーバーを指定すればOKです。
次の更新のタイミングまでドメイン側はログインも何も不要です！！
レンタルサーバーにドメインを追加する
次の取得したドメインをレンタルサーバー側に設定してあげましょう！
これをすることにより、取得したドメインにアクセスした際に特定のページが表示されるようになります。
まず、mixhostのcPanelにログインしてください。
cPanel上で「アドオン」と検索すると、「アドオンドメイン」というメニューが検索できるのでクリックしてください。
表示された画面での「新しいドメイン」に取得したドメインを入力してください。
「サブドメイン」と「ドキュメントルート」はドメインを入力すると自動で入力されるのでそのままで大丈夫です。
「ドメインの追加」をクリックすることでドメインの追加は完了です。
ここでエラーが発生する場合は「お名前.com」での設定がまだインターネット全体に反映されていない可能性があるため、少し時間を置いてから試してみてください。
いつまで経ってもエラーが出る場合はネームサーバーの設定が上手くできていないかドメイン名を間違えているので確認してください。
作成したページを確認する
レンタルサーバーにドメインの追加まで完了するとすでにwebサイトは公開された状態になります。
ただこの時点では検索エンジンなどには反映されていないためドメインを知っている人だけがアクセス可能な状態です。
試しに取得したドメイン名をChromeやSafariなどのウェブブラウザでアクセスしてみてください。
「Index of」というページが表示されたら成功です。
にゃー
この階層はcPanel上からも確認できます。
cPanelで「ファイルマネージャー」を開いてみてください。
以下の階層のファイルが表示されていることがわかります。
/PUBLIC_HTML/{取得したドメイン名}/
この階層に「index.html」というファイルを置いてあげるだけでウェブサイトの公開が可能です。
試しに作成してみてください。
左上の「＋ファイル」ボタンをクリックして、「index.html」というファイルを作成してください。
作成した「index.html」ファイルを選択して「HTMLエディター」をクリックすることでHTML形式での編集が可能です。
保存が完了したら再度自分のサイトにアクセスしてみてください。
「Index of」の表示ではなく、先ほど作成したindex.htmlに入力した内容が表示されるはずです。
にゃー
サイトのテンプレート(デザイン)をサーバーにアップする
これまでの手順で取得したドメインでサイトを作る方法はわかったかと思います。
htmlやcss/jsが書ける方はここからゴリゴリと書いていけば良いですが、苦手な方はテンプレートを利用しましょう。
にゃー
takeishi
テンプレートを公開しているサイトは多くあります。
ここでは一部のサイトを紹介しておくのでお気に入りのデザインを見つけてください。
好きなデザインを探そう
各デモページは上記のサイトから確認が可能です。レスポンシブ対応(PC/スマホで綺麗に見える)かつBootstrapを使用したおしゃれなデザインが多いのでこの中から選んでおけば間違いないです。
今回はお試しで「Agency」というテンプレートを適用します。
Agencyのでもサイトはこちら(外部リンク)
おしゃれですねー。
デザインテンプレートをダウンロードしよう
これをまずダウンロードするところから始めます。
「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は配置している階層以下に対して有効となる。
そのため、各階層毎の設置もできるようす。(基本は不要)
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
Google Analyticsも設定しておこう
Google Analytics(GA)も最初に設定しておきましょう。
ネタサイトとかであれば不要ですが、これを設定しておくとサイトへのアクセス数を計測することが可能です。
どの時間帯にどのような人がアクセスしているのか等が数値として確認できるようになります。
サイトが完成したらSearch Consoleにも登録しよう
こちらも身内で楽しむ場合は不要ですが、Webサービスとして公開する場合はGoogleの検索エンジンから流入があるように登録しておくと良いです。
ここに登録することで、Googleに「こんなサイトありますよー」というのを伝えることが可能となり、検索結果にも表示されるようになります。
まとめ
いかがでしたしょうか。
思っていたより簡単にできそうでないですか？
実際にサービスの中身を作るときはPHPやPython,Rubyなどの言語を使う必要がありますが、大まかなデザイン及びサイトの立ち上げ自体はこの記事の手順通りにやればすぐ公開が可能です。
わかりにくい点が出てくれば随時追記していくのでコメント等残してくれると助かります。
