WordPress+Xserverでブログ以外の独自Webサイトを作ってみた

2019年5月27日

スポンサーリンク

こんにちわ、そにたんです

今日は、web開発の話です。
最近、webの作成に興味を持ち始めました
そして、作ったものはとりあえず皆が観覧できる環境をつくりたいなーなんて思いました。
その時、思ったんです
WordPressで使っている、Xserverで公開できないの!?
はい、結論から言うとできました!

今回は以下のような、サンプルサイトを作ってみました

てな訳で今回は、Xserver+WordPressで使っている環境で
webサイトを個別に公開する方法をお教えします!

"no-img2″
そにたん

ちなみに、web言語はほぼ初心者なため、サンプルサイトは本当にサンプル

"no-img2″
なな

これ、コピペで作ったさいとだにゃ?

今回のおすすめターゲット!

  1. ブログを持っていて、さらにwebサイトの勉強をしたい方
  2. 作ったものをなんでもいいから、公開したい!
  3. Xserver+WordPressの環境をもっと生かしたい!

スポンサーリンク

環境構築

今回は、まず以下の環境構築を目指しました

  1. Xserverのファイルをwebブラウザ以外から見る
  2. TeraTermでssh接続をできるようにする
  3. htmlファイルの編集後Xserverへ上げる仕組みを作る

今回は上記3点を構築して、webサイトを作成してみました。
では、実際に方法の解説を紹介!

Xserverのファイルをwebブラウザ以外から見る

これは、つまりXserverのファイル管理サイトで見ていた
ファイルの中身を、windowsのソフトで見ようという事です。
今回はffftpサーバを使ってみました。
ffftpサーバは、昔使った事があったのでしっていたので今回はこれを使用
ちなみに、使い方はもう分かりやすいサイトが、あったので以下を参考にしました。

ここでは、特に詰まる箇所はなかったです。

TeraTermでssh接続をできるようにする

TeraTermとは、サーバにsshで接続して
CUI操作できる、ソフトです。
CUIは、用は文字だけでパソコンを操作するような感じです。
winodwsのコマンドプロンプトが、一番身近なんですかね...
まあ、今回はsshとかcuiとかはあまり説明しません。
わかって欲しいのは、自分のPCから遠隔操作でXserverを操作する感じ!

Teratermの設定は、以下のサイトを参照しました


Xserver+WordPressの環境をもっと生かしたい!

さてここからが、実際のプログラミング環境構築!!
今回使ったのは、Sublime Text 3
web系の開発をしている人なら、一度は聞いた事があるのではないかという有名ソフト
このソフトは、メモ帳が何百倍も便利になってテキストエディタソフトです。

ダウンロードやらは、そこまで大変ではないので以下のサイトを参考にして
作業を進めました。

そして、SublimeText3でhtmlを編集して、それをXserverへアップロードする簡単な方法はないか調べました。
そしたら、ありましたよ便利なプラグインSFTP!!
これを使う事で、登録したファイルを保存する事で自動で
xserver上へアップロードしてくれるすごい奴!

私は以下のサイトを参考にして、行いました

まずは、SublimeText3のインストールです。

こちらは、とても分かりやすく簡単に環境構築ができました。
さあ、SubllimeText3のインストールが終わったら、いよいよ
XserverとSublimeText3をインストールしますよ!
今回は、以下のサイトを参考にしました!


私は、この時設定完了後にアップロードに失敗するというエラーでつまずきました。
いま、この記事を読みながら作業している方に気をつけていただきたいのは
FTPソフト(FileZilla)のインストールという項目の作業をやっていませんでしたorz
FFFTPを導入しているから、いらない作業と勝手に解釈して飛ばした結果それが原因でエラーが発生していましたorz
さあ、これで今日からwebサイトを公開できますよ!!

さいごに

いかでしたか?何か分からない事等がありましたら、いつでもコメントください
なるべく早く返すように努力します。

ちなみに、webサイトの公開方法は以下に乗っていました。
ドメイン名/public_html というディレクトリに格納すれば公開ができるようです。

つまり、本ブログは
etolog.jp/public_html/index.php みたいな感じで、サイトが置かれているみたいですね

ちなみに、今回公開したサイトは
public_html/sonitan_hobby/20190526/index.html という階層でサイトを作成しました。
この場合は以下のURLでアクセスできるようになっています。
https://etolog.jp/sonitan_hobby/20190526/

スポンサーリンク