ポートフォリオサイトつくりました
デイトラ初級DAY17～19にて自分のポートフォリオサイトをつくりました。
[今回の学習内容]
サイトは一から作成してもよかったのですが、HTMLテンプレートは使ったことがなかったので使ってみました。
Kerri – Responsive Bootstrap 4 One Page Portfolio Template というテンプレートを使用。2600円くらいでした。
テンプレートを扱うのも勉強になりますね。今まで知らなかった実装が感じれます。
すでにできているものをつかってカスタマイズしていきますが、なれないうちはこれも大変。なにがどうなっているのかわからないものを触っていくんですから。
簡単なプロフィールと今まで作ってきた模写サイトを掲載していきました。
ちなみに僕が作ってきたのはHikoProさんのサイトを主に参考にしてます。
模写サイトはGitHubを使ってアップロードしました。
GitHubはデイトラでは教えていなかったですが、僕がYouTubeでよく見ているしまぷーのＩＴ大学さんの動画を見ながら実行しました。
動画を見ながらやったらけっこう簡単にできました。
エックスサーバーでは1年契約でサーバーを契約（年間13200円くらい）
エックスサーバーでドメイン永久無料のキャンペーン中でしたので、そのままドメインを取得。
ちなみに、サーバーはインターネット上の土地、ドメインはインターネット上の住所のことです。
この2つを契約しないとサイトをWEB上で公開できないそうです。
そして最後にFTPクライアントソフト、Cyberduckをダウンロードして、
エックスサーバー登録時にメールで送られてきていたFTPパスワードなどを入力してサイトのファイルをアップロード。
これでサイトがWEB上にアップロードできました。
でも反映に時間がかかるのか、初めてアップロードした時はURLを入力してもWEBでは全く見れませんでした。次の日に確認したら普通にみれました。
1日弱かかるときもあるんですね。
なれない作業で結構時間がかかりましたが、なんとか公開できました。
その他今回したこととして
- 画像の圧縮
画像データが大きくなってくるとサイトのアップロードが遅くなり結果としてユーザーから使いにくいサイトになってしまうので圧縮してから上げたほうが良いらしいです。
- ロゴの作成
オリジナルサイトらしく簡単にロゴが作成できるサイトです。
僕もこれでfaviconやIconを作りました。
- Twitterカード、メタタグの設定
tiwitterやLINEなどのSNSでリンク先の内容が表示されるために必要なものです。
ユーザーにクリックされやすくするために重要です。
headタグ内に書いていきます。
<meta name="twitter:card" content="カード種類" /> <!--①-->
※カード種類は４種類
①Summary Card ②Summary Card with Large Imag
③App Card（アプリ配布用） ④Player Card（動画サイト用）
通常は①か②でOK
<meta name="twitter:site" content="@ユーザー名" /> <!--②-->
<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:title" content="記事のタイトル" /> <!--④-->
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--⑤-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->
以上が今回学習したことです。
まだまだ未熟なのでさらに上達していきたいです。
それでは
