目次
FTPソフトとは？
この記事はHTMLとCSSを学び終わり、サイトを作れるようになった！という方に読んでほしい記事です。
いろんなサイトで、HTMLやCSSの使い方を覚えたかと思います。
しかし、作れるようになったものの、実際にどうやって公開したらいいかわからない、という方を多くお見受けします。
サイトを公開するには
まず、公開する環境が整ったパソコンが必要です。
そういう「公開環境の整ったマシン」をサーバーと言います。
サーバーは自分の使っているパソコンでも作れるのですが、当然ながら電源を落としてしまったり、ネットが繋がらなくなってしまった状況ではそのサーバーで公開している内容は表示されなくなってしまいます。
高負荷がかかるようなものは、ものすごい熱や負荷により火災の危険もあるそうです。
電気代もかかります。
自由に設定をいじれ、自由にできるメリットはありますが初心者がいきなり自宅でサーバーを設置するのはあまり現実的ではありません。
そういった環境を貸し出している業者の「レンタルサーバー」を借りるのがいいでしょう。
レンタルサーバーを借りる
広告ありですが、無料で使いたいという方は下の記事を参考に試してみてください。
https://logzitsu.tlog.work/xdomein/
月額有料のサービスが多いです。無料のものは広告が出てしまったり、なんらかの機能制限があることが多いです。
レンタル会社はいくつかありますので、そこから必要なものを選ぶといいです。
高額のものは高性能です。
静的なHTMLを公開するだけであれば、ものすごいアクセス数がくるとかでなければ安いところでも問題ないでしょう。
もし、今後高性能なものに変える可能性がある、SEOをしっかりやっていきたいということであれば「ドメイン」も取得しておく必要があるでしょう。
ドメインの設定も一癖あり、初心者が苦労するポイントでもあります。
サーバー会社の紹介
サーバーのレンタルは、各ページのヘルプをみながら進めてアカウントを取得してもらえばいいと思います。
最初にくるメールにすごく重要な情報が書かれている。
業者によって異なりますが、
サーバーを仮取得した際にくるメールに非常に重要な情報がまとまっていますので無くさないようにしましょう
下記は代表的な情報です。業者により、呼び名が異なりますので注意しましょう。
Xdomainの場合
本サイトで紹介しているXdomainのFTPを利用するための設定はこちらです。
https://logzitsu.tlog.work/xdomain-ftp/
具体的には
公開サイトURL
こちらが自分に割り当てられたアドレスです。ドメインを取得して設定した場合は別の場所になりますがとりあえずの練習はここでやるのがいいでしょう。
管理アカウント情報
レンタルサーバーには
管理パネル
サーバー管理パネル
など複数の管理画面が存在することが多いです。ややこしいですね。
さらにワードプレスをインストールするとワードプレスの管理画面があって初心者は大混乱ポイントでもあります。
慣れればたいしてややこしいものではないです。
FTP情報
今回の記事のメインです。業者、FTPソフトで呼び名がばらばらなんですよねーこれが。
– ホスト
– FTPアカウント
– パスワード
– 公開フォルダ・初期フォルダ
ホストとはレンタルしているサーバーの場所を表します。
FTPアカウントとは 自分のアカウントの名前です。
パスワードは FTP 接続するためのパスワードになります。
公開フォルダというのは、ここに設置したものが公開されますよ、ということです。
試しにそのフォルダ直下に「index.html」を置いてみるとそれが表示されるはずです。
FTP と 安全な SFTPがあるので注意。
FTPって何？
サーバーに接続する方法は２種類あります。
– WEBブラウザーでみる
– FTPソフトで接続する。
WEBブラウザーで接続するには、メールに記載されている「公開URL」にedgeやchrome・safariで接続しサイトを表示するだけです。
「何もアップロードされていません」というサーバーが用意したファイルが表示されているのではないでしょうか。
しかしこの接続方法ではサイトをみることはできますが、基本的にサイト内容を書き換えたり、削除したりすることはできません。
次にFTPでの接続です。
ブラウザではFTP接続はできないので、専用のソフトを使う必要があります。
などがあります。自分はMACですので filezilla を使っています。このソフトはwindowsでも使えます。
ダウンロードしてインストールしましょう。
画面はMACですが基本的な使い方は違わないはずです。
このソフトを使うことで、公開フォルダにファイルをアップロード、削除、移動をすることができます。
filezilla の使い方
上のリンクからファイルをダウンロードしてfilezillaをインストールしましょう。
サーバーに接続する
- ホスト
- FTPアカウント
- パスワード
を画像のクイック接続の部分に入力し、接続してください。
頻繁に使うものは画像の○印をしたところから登録できますのでそこから登録してください。
左側が自分のパソコン。
右側がサーバー上にあるファイルになります。
ファイルをアップロードしてみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FTPソフトの練習</title>
</head>
<body>
<h1>FTPソフトの練習</h1>
<p>htmlがファイルの表示が成功しました！</p>
</body>
</html>
すでに運用しているサーバーでは安易に行わないように注意。
新規取得サーバーでのテストを推奨します。
上のタグは何の変哲も無いHTMLです。これをエディタで「index.html」というファイルで保存して「公開フォルダ」直下にアップロードしてください。
その後、公開URLに接続しちゃんとこのファイルが表示されたらOKです。
FTPソフトではファイルをアップロードできるほか、移動・削除も可能です。
今までに作成したサイトデータをアップロード
index.htmlが公開フォルダのすぐ下にくるように構造を作って、アップロードしてみてください。
CSSや画像などもそのままの構造でアップロードしないと動きませんよ。
正常に表示されたらOKです。
うまく表示されない場合は何かがおかしいです。
ローカルの絶対パスでファイルを参照していたとかね。
調整してみてください。
