30DAYSトライアル1st

30DAYSトライアルのまとめ【DAY20】

DAY20の課題は「ポートフォリオを公開しよう」になります。

DAY20課題

DAY18、19で作成したポートフォリオサイトを実際に公開していきます。

WordPressでブログは公開してはいるもののそれとは全然違う緊張感がありますね。しかもほぼHTMLテンプレートからテキストと画像を変更しただけでこの緊張感…。

一から作ったサイトやサービスの時の緊張は計り知れないですね。

今の会社でもシステムをリリースす時ももちろん緊張はしますけど、そのお客様だけが見るのと、全世界の人が見れるんじゃ訳が違いますよね。(全世界の人が見るかは別として)

そんなポートフォリオの公開をまとめておきます。

サーバー(エックスサーバー)の契約

まずはポートフォリオを公開するためにレンタルサーバーを契約します。

自分はWordPressでブログを開設する時にエックスサーバーを契約していたのでそれを使いました。

ブログ開設したときの記事はこちら

ショーへーさんのDAY20に対する記事でもエックスサーバーがおすすめされていますね。

ドメインの取得・設定

ポートフォリオを公開するためにはインターネット上の住所であるドメインを取得する必要があります。

エックスサーバーは契約すると「.com」などのドメインが無料で1つ取得できるというお得なキャンペーンがあります。

自分はブログを開設したときにエックスサーバーを契約するより前にドメインを取得していたので、このキャンペーンを使ってなかったんです。というか、キャンペーンがあったことすらも忘れていました。

ありがとう30DAYSトライアル。キャンペーンを無駄にせずにすんだよ。(2019年10月31日までに取得しないとキャンペーンドメインが取得できないところでした)

自分はブログ用のドメインを既に設定している状態ですが、取得したドメインの設定方法はショーへーさんの記事どおりでいけました。

FTPクライアントツールを使用してファイルをアップロード

ポートフォリオ公開への最終段階。作成したポートフォリオのファイルをFTPでサーバーに転送します。

ちなみにFTPとは(File Transfer Protocol(ファイル・トランスファー・プロトコル)の略で、クライアントとサーバー間でファイルの転送を行うための通信プロトコルのことです。

詳しくははしょりますが、ある決まったやりとりをクライアント(今回の場合は自分のPC)とサーバー(今回の場合はエックスサーバー)で行うことで、クライアント上のファイルをサーバー上にコピーしたりできるって感じですね。

本来であればターミナルなどでFTPのコマンドを実行しないといけないところを、Finder(Windowsだとエクスプローラー)の感覚で操作できるようにしてくれるのが、FTPクライアントツールになります。

FTPについては【入門】FTPとは?通信・ソフトについて分かりやすく解説しますが分かりやすいかな。

ショーへーさんの記事ではFTPクライアントツールはCyberduckをおすすめしていますが、自分はこれまたブログ開設のときにFileZillaを使ったので、それを使います。

自分と同じようにFileZillaを使用する場合は以下のように設定すればOKです。

設定さえできれば後の操作イメージはCyberduckとさほど変わらないので大丈夫だと思います。

ポートフォリオサイトのファイルをサーバーにアップロードできたらポートフォリオの公開完了です。

Jyu2Kit

やったね。

Twitterカードの設定

Twitterでポートフォリオサイトを公開したことを報告する場合にTwitterカードを設定しておくとTwitterでの見栄えがいいです。

しかもTwiiterカードを導入するとリンクのクリック率が1.6%から3%に向上、サイト滞在時間の増加、直帰率が低下するといったデータがあるようなので、設定しないという選択肢はありませんね。

サルワカさんの【2019年版】Twitterカードとは?使い方と設定方法まとめを参考にすれば簡単に設定できます。

という自分は画像のURLをローカル(自分のPC)のパスで記述してしまって失敗しましたけどね・・・。

Twiiterカードの設定をしたらCard validatorで正しく表示できるかチェックしましょう。

まとめ

  • Webサイトを公開するにはレンタルサーバーの契約とドメイン取得が必要
  • レンタルサーバーはエックスサーバーにするとドメインが無料で1つもらえるのでお得
  • FTPの仕組みは分からなくてもFTPクライアントツールを使って接続さえできればなんとかなる
  • Twitterカードの設定後のテストは確実に(Twitterカードだけに限らず、サイトを修正した場合のテストは確実に)
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す