#10 FileZillaのインストールとデータ転送　HP公開出来る！

「ドメイン」「サーバ」

手に入れた！

プログラミングの勉強もたくさんして「HTML」「CSS」などで

ホームページを作成出来た！

「ん？」

これってどうやって公開するんだぁーーー

って思っていませんか？そんなみなさんにHPを公開する方法を教えます。

はじめに　簡易説明

HPを公開するには作成した「HTML」ファイルなどをレンタルしたサーバーに保存しなければなりません。
保存するために「FileZilla」を使います。ということは「FileZilla」をインストールして設定する必要があるわけです。

FileZillaのインストール

「FileZilla」とはサーバーとファイルの送受信を行うために使用する

FTPソフトです。

なるほど～。で、FTPソフトって？
「FTP」とは「File Transfer Protocol」の略で通信規格のことです。ここでは深く取り扱いません。

つまり自分のPCとサーバーをつなぐ架け橋が「FileZilla」ということですね。

ではインストールしてみましょう。

公式サイトは→こちら

ちょっと待ってください！
公式からダウンロードするとウィルスを検知する時があるそうです。
なので別の方法でダウンロードします。

（※公式でダウンロードする場合は自分で色々調べてから実行しましょう）

OSDN株式会社さんから「FileZilla」をダウンロードします。
https://ja.osdn.net/projects/filezilla/
↑こちらです

「最新リリース」の一番上をクリックします。次に↓のファイルをクリックします。
「FileZilla_〇.〇〇.〇_win●-setup.exe」●はビット数で64or32はお使いのPCいよって異なります。

「コントロールパネル」→「システム」で確認しましょう。

ダウンロード出来たら、ダウンロードフォルダ内にファイルがあるのでこれを立ち上げましょう。

基本的に設定は変えなくて良いです。「I agree（同意する）」→「next」で進めましょう。
「Choose Components」というところで、
「Icon sets」

「Language files」

「Shell Extension」

にはチェックを入れましょう。
一番下に「Desktop Icon」とありますが、デスクトップにショートカットを作成したい場合はチェックを入れましょう。
最後に「Install」をクリックします。
その後、「FileZilla」を立ち上げた時にアップデートの確認が出たら「新しいバージョンをインストール」をクリックしましょう。

FileZillaの設定

FileZillaを立ち上げたら左上の「ファイル」の下のアイコンをクリックします。

「サイトマネージャー」が立ち上がるので新規フォルダ―（フォルダーは作成しなくてもよい）でフォルダーを作成。
そのフォルダーの中に「新しいサイト」を作成します。
フォルダーもサイトも名前はお好きな名前で良いです。

次に右側に色々入力していきます。
・プロトコル　「FTP-ファイル転送プロトコル」
・ホスト　「エックスサーバーにて確認」
・暗号化　「使用可能なら明示的なFTP over TLSを使用」
・ユーザー　「エックスサーバーにて確認」
・パスワード　「エックスサーバーにて確認」

ホストなどはエックスサーバーで確認しましょう。

確認方法↓
サーバーパネルで「サブFTPアカウント設定」「FTPソフト設定」のタブからご覧になられます。
ただし、パスワードはエックスサーバー登録時などにメールに記載しています。（ログインパスワードではありません）

これらを入力。

「転送設定」タブをクリック
転送モードをパッシブに変更

これでOKです。
「接続」をクリックしましょう。「パスワードを保存しますか？」と聞かれたら「保存する」で良いです。
これで設定完了です。

ファイルのアップロード

いよいよサーバーへFileZillaを使ってファイルをアップロードしてみよう。
まずは、FileZillaを立ち上げて、サーバーに接続しよう。
①サーバー側でドメイン名になっているフォルダを開きます。
②「public_html」というフォルダを開きます。
③サブドメイン名になっているフォルダを開きます。
④その中に「html」ファイルをアップロードします。
アップロードの方法はファイルやフォルダをドラッグするか、右クリックするとアップロード出来ます。

注意点
１　トップページのファイル名は「index.html」にしなければなりません。
２　「index.html」はサーバー内ではサブドメイン名のフォルダの直下にあるので、ローカルでも同じようにサブドメイン名のフォルダを作成し、その直下に「index.html」ファイルを置きます。
同じにしておかないと、パスがうまく作動せず、「CSS」などが読み込まれません。基本的に同じファルダ名、同じファイル名、同じ階層にしましょう。

私もここで失敗しました。

ローカルで動くのに何で公開すると「CSS」が作動しないんだよぉ～って嘆いていました。

これで公開出来ました。どうでした？うまくできましたか？

関連記事

サブドメインを取得しよう！