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

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

この記事で分かること

当てはまるものがあったら参考にしてみてね

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

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

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

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

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

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

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

 mixhostを契約していない場合

mixhostを契約していない場合は契約してから公開の準備を進めましょう。おすすめはスタンダードプランです。プランに不安があれば以下の記事を見てみることをおすすめします。

mixhostのおすすめ料金プランはスタンダードです。最安で始めましょう。

2022.2.1

mixhost使いたいんだけど、どの料金プランを選んだらいいの？ そんな疑問を解消するためにこの記事ではmixhostのおすすめ料金プランを紹介していきます。 記事の内容 mixhostのおすすめ料金プラン 他社レンタルサーバーとの料金比較 数あるレンタルサーバーの中でもmixhostを契約して使お...

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

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

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

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

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

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

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

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

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

ドメインを取得する

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

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

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

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

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

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

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

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

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

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

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

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

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

 公開するドメインの確認

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

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

今回は追加したドメインに対して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サイトのファイルたちをアップロードすれば公開できます。

この記事では追加したドメインで行ったよ

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

mixhost