mixhostで自作のWebサイトを公開する方法を紹介します【HTML/CSS/JavaScript・React・Vue】

mixhostで自作したWebサイトを公開したいんだけど?

今回はそんな悩みを解消するためにmixhostで自作したWebサイトを公開する方法を書いていきたいと思います。

この記事で分かること

  • HTML/CSS/JavaScriptで作成したWebサイトをmixhostに公開する方法
  • Reactで作成したWebサイトをmixhostに公開する方法
  • Vueで作成したWebサイトをmixhostに公開する方法
当てはまるものがあったら参考にしてみてね

 mixhostでワードプレスサイトを作りたい場合

mixhostでワードプレスサイトを公開する方法は以下の記事で紹介しているから、ワードプレスサイトを作りたい方は↓を見てみてください。

ワードプレスはクイックスタートを使った方が楽だよ

mixhostで自作のWebサイトを公開する手順

どういう手順でWebサイトって公開できるの?

サイトの公開手順は大まかにこんな感じです。

サイトの公開手順
  1. ドメインを取得する
  2. ドメインをmixhostに割り当てる
  3. Webサイトを作成する
  4. 作成したWebサイトのファイルたちを追加したドメイン配下にmixhostにアップロードする

ドメインの取得と割り当ては初期ドメインを利用するのであれば、特に気にしなくていいです。今あるドメイン以外でサイトを公開したい場合には新しいドメインを取得しましょう。

これらの手順について書いていきますよ。

30日間返金保証あり

Webサイトをmixhostに公開する共通の手順

以下の部分はHTMLで作ったものやReactで作ったもの、Vueで作ったものでも手順に変わりはないです。

  1. ドメインを取得する
  2. ドメインをmixhostに割り当てる

ここではドメインの取得からそれをmixhostで使えるようにしていくまでを書いていきますよ。

 初期ドメインかそうでないドメインを使うか

mixhostを契約するときに初期ドメインを取得することができると思うけど、その初期ドメインを使うか新たにドメインを取得して公開するか?っていうのが迷うかもしれません。

  • 初期ドメインでサイトを公開する
  • ドメインを追加してサイトを公開する

初期ドメインの場合はそのままWebサイトのファイルたちをpublic_html配下にアップロードすれば公開することができます。

初期ドメインを使う場合はドメインを取得する必要はないから飛ばしてね

ドメインを追加してサイトを公開する場合はドメインを取得してmixhostに割り当ててからそのドメイン名のフォルダにアップロードします。

ドメインの取得・割り当てについて書いていくよ

ドメインを取得する

ドメインを取得するサイトはどこでもいいけど、今回はお名前.comで取得します。新たに作成したいサイトのドメインを検索して取得していこう。

ドメインを利用するためのサーバーはmixhostを使うから[利用しない]を選択。

mixhostを使うからmixhostにチェックを入れておこう。ネームサーバーをmixhostのものに設定してくれます。

じれで申し込めばOK。申込時にレンタルサーバーの青い訴求画面が出てきたら[ドメインのみ申込む]を選択

これでドメインの購入は完了したから、このドメインをmixhostのコントロールパネルから追加します。

取得したドメインをmixhostに追加する

取得したドメインをmixhostのコントロールパネルのアドオンドメインから追加します。

ここに取得したドメイン名を入力してドメインの追加をクリック。

これでドメインが追加されたので、このドメインでWebサイトを公開していきます。

mixhostに公開してみるWebサイトは3種類

mixhostで公開するWebサイトはシンプルなこんなやつでやります。

デザインは同じようにした以下の3つがあるからこれらでmixhostでサイト公開っていうことをやりますよ。

公開するサイト
  • HTML・CSS・JavaScriptで作成したWebサイト
  • Reactで作成したWebサイト
  • Vueで作成したWebサイト

Webサイトを公開するドメインフォルダの確認

 公開するドメインの確認

初期ドメインを使う場合も追加したドメインを使う場合もまずはそのフォルダを確認しておきましょう。mixhostからcPanelにログインしてファイルマネージャーを見てみるといいです。

mixhostファイルマネージャー

ここでサイトを公開したいドメイン名のフォルダがあることを確認します。初期ドメインを使う場合はpublic_htmlにアップロードすればOKです。

アップロード先
  • 初期ドメインの場合・・・public_html配下にWebサイトのファイルたちをアップロード
  • 追加したドメインの場合・・・ドメイン名のフォルダ配下にWebサイトのファイルたちをアップロード

今回は追加したドメインに対してWebサイトのファイルをアップロードしていきます。初期ドメインを使う場合はpublic_html配下に同じようにアップロードしてみてください。

 アップロードにはFTPソフトを使おう
WebサイトのファイルたちをmixhostのサーバーにアップロードするためにFTPソフトを使いましょう。アップロードしたいファイルやフォルダを簡単にアップロードすることができます。

以下の記事でFTPソフトでmixhostに接続するっていうことを書いているので参考にしてみてください。

HTML/CSS/JavaScriptで作成したWebサイトをmixhostに公開する

まずはHTML/CSS/JavaScriptで作成したサイトを公開するよ

まずはHTML/CSS/JavaScriptで作成したサイトの公開です。WebサイトのファイルたちをFTPソフトでmixhostにアップロードしましょう。

これでそのドメインにアクセスするとサイトを見ることができました。

 

Reactで作成したWebサイトをmixhostに公開する

Reactで作成したサイトをアップロードするよ

Reactは作成したらbuildする必要があるからbuildしたファイルたちをドメイン配下にアップロードします。

これでアクセスしてみると表示されたけど、黄色いパーティクル部分が表示されていないです。(どこかでミスったけど許して・・・)

Reactで作ったサイトをmixhostに公開するっていうことはできたので良しとします。

 

Vueで作成したWebサイトをmixhostに公開する

次はVueで作ったサイトを公開するよ

Vueもbuildする必要があるので、buildしたらそれらのファイルたちをドメイン配下にアップロードします。Vueの場合はdist配下にbuildしたファイルが作られる。

アップロードして確認してみるとちゃんと表示されていますね。

mixhostにWebサイトを公開する方法まとめ

今回はいくつか作ったWebサイトをmixhostに公開するっていうことを書いたけど、作成したWebサイトのファイルたちをアップロードすれば公開できます。

  • 初期ドメインの場合・・・public_html配下にWebサイトのファイルたちをアップロード
  • 追加したドメインの場合・・・ドメイン名のフォルダ配下にWebサイトのファイルたちをアップロード
この記事では追加したドメインで行ったよ

何か公開したいサイトがあればmixhostで公開してみてください。

30日間返金保証あり