ポートフォリオサイトを作って公開した話

公開日 2024/02/17
どうもこんにちは、梅野と申します。

今回は自身のポートフォリオサイトを作成したので、備忘録として制作過程を記録していきます。


完成品

---

実際のサイト : ポートフォリオ
ソースコード : リポジトリ


使用技術

---

サイトを作成する目的と内容を考える

---

今回、ポートフォリオを作成する目的は
「現段階での自分のスキルを伝えること」
とします。

内容は以下の通りにし、サイトマップの作製を行いました。

• ホームページ
  • 創作物
  • お問い合わせ

今回は、最小構成にしました。後々プロフィールやスキルセットなど追加していきます。


作成手順

---

以下のようにポートフォリオを作成しました。

1. 自宅サーバーの構築
2. コーディング
3. 実装
4. 修正
5. 公開

1. 自宅サーバーの構築
使用しなくなったノートパソコンがあったので、Ubuntuをインストールし自宅サーバーとして利用しました。

導入方法は別の記事で紹介します。

2.コーディング
実際にhtml、css、JavaScriptを書いていきます。インターネットや本を参考にしコーディングしました。

今回のポートフォリオは動きをつけたかったので、JavaScriptのライブラリであるjQueryを利用しました。

3.実装
さて、コーディングが終わったら実装に移っていきます。
あらかじめ用意していたWebサーバーにファイルを移していきます。

コーディング時点ではわからないエラーなどがあるので、実装してデベロッパーツールで確認していきます。

4.修正
3で発見したエラーなどを修正していきます。
自分の場合はJavaScriptがうまく読み込まれないエラーが発生していたのでここで修正しました。

5.公開
1~4の工程が終わったらやっと正式に公開できます。


まとめ

---

中学生の頃にhtmlとcssでのコーディングは行っていたのですが、JavaScriptを使用した動きのあるサイトの作成や、サーバーの構築は行ったことがなかったのでUbuntuの設定に戸惑った部分もあったのですが、最終的にはフルスタックでポートフォリオを完成させることができたので良かった。