webディレクター

Cyberduckでwebサイトを公開する方法

新米webディレクターのmei(@mei_1123ak)です。

先日、初めて自分で作ったサイトが完成しました!
(ヒューマンアカデミーに通って作った卒業制作です)

初めて作ったので、結構時間もかかりたいへんでした・・・



完成して嬉しくなったので、ブログにアップしたいなぁと思ったのですが・・・
公開する方法が分からず手こずりました。。


でも、やり方が分かれば意外と簡単〜!と思ったので、
今回はCyberduckでwebサイトを公開する方法をご紹介します!

私が実際にアップしたサイトがこちら。

\こんな疑問が解決できる記事になっています/

  • 自分で作ったサイトってどうやって公開するの?
  • Cyberduckの使い方が分からない!

FTPクライアントってなに・・・?

自分のPC上にあるファイルをサーバーにアップするときに使うのが、
「FTPクライアント」
です。

FTPとはファイルを転送するときに使うプロトコル(約束ごと)で、
FTPを使ってファイルの送受信を行うソフトウェアが「FTPクライアント」です。

サイトをネット上で公開するときに使うものと考えれば良いかと思います!

FTPクライアントはいくつかありますが、
今回は定番のCyberduck(無料)の使い方についてご紹介します。

Cyberduckをダウンロードする

まずCyberduckにアクセスします。

Cyberduck

Cyberduckを開いたら、macOSまたはWindows用のダウンロードをクリック。
(無料です)

続いて、Windowsかmacを選んでダウンロードします。
今回はmac用をダウンロードしますが、Windowsでも同様です。

Cyberduckの設定

自分のPCにダウンロードできたら、zipファイルを開くとあひるさんのアイコンが出てくると思います。

あひるさんをクリックしてCyberduckを開きます。

何もないこちらの画面になりますが問題ありません!
左上の「新規接続」をクリック。

サーバー、ユーザー名、パスワードを入力します。

これらは、サーバーを契約した時に送られてくるメールに記載があります。

サーバー ▶︎FTPホスト名(FTPサーバー名)
ユーザー名▶︎FTPユーザー名(FTPアカウント名)
パスワード▶︎FTPパスワード

3つを入力できたら「接続」をクリック!



非セキュアなFTP接続というページが出てきた場合は「続ける」をクリックします。

いくつかフォルダがあると思いますが、自分のドメイン名のフォルダを開きます。

続いて、自分のドメイン名のフォルダの中の「public_html」を開きます。

この「public_html」の中に、自分で作成したサイトのデータをドラッグ&ドロップします。


私は、「public_html」フォルダの中に「site」というフォルダを作って、
その中にhtmlやcssのデータを入れています。

これで完成です〜!!(ヤッター!!)
意外とかんたん〜!

実際にアップされているか、自分が保存した場所のURLを確認してみてください!

ドメインのトップページにしたい場合

表示したいhtmlファイルの名前を「index.html」にして、
「public.html」フォルダの直下に入れるとトップページに表示されます!

どこに保存するかによって変わってくるのですが、
最初はそれが分からず手こずりました・・・

そして間違えて必要なフォルダの中身を消してしまい、ブログ記事が消えてしまった
ということがあったので、お気をつけください!
(普通に進めてもらえればなんの問題もありません・・・!)

ちなみに・・
一度接続すると、次回からは、履歴(時計のマーク)から接続できます。

まとめ

Cyberduckの使い方についてご紹介しました。

手順が分かると意外と簡単だったので、
サイトを作った際は、ぜひ実際にweb上で公開してみてください!

https://meiblog.info/website-flow/