きっかけ
私は、情報系の3年生で、pythonを中心にプログラムは勉強してきましたが、webサイトなどは作ったことがなく、勉強も込めてwebサイト作ってみたいと思ったのきっかけです。どうせ勉強して何か作るなら、意味のあるものをつくってみたいと思ったので、自分が2年生の頃からの代表としていたサークル（ボランティア団体）のホームページ作ってみたいなと思い作成することにしました。
ホームページ作成ツールは使わなかった理由
webサイトがHTMLという言語で書かれていることは、知っていましたがホームページ作成などしたことがなかったため、まずどのようにしたら作れるのか調べることから始めました。どうやら、ホームページ作成ツール(WordPressなど）というものを使うと簡単にコード書かずに作れるとわかりましたが、自分は勉強のために、自分でコーディングして作ってみようと思いました。
はじめにしたこと
プログラミングはしたことがありましたが、HTMLとCSSとJavaScriptの知識は全くなかったので、とりあえず色んな記事をみたり,YouTubeなどの解説をみて、どのようにして、コードを書いていけばいいのかを勉強していきました。そしてとりあえず、転がっているサンプルのコードを参考に、ローカルでHTMLとCSSとJavaScriptでつくったりのを変更したりして、どのように動いているかなどを大まかに理解していきました。
いざ作成
とりあえずは、webに転がっているテンプレートのコードを変えていきながら、色んなwebサイトを開発者ツールでどんなコードになっているのかを見ながら作っていきました。困ったときには、ChatGPTにも聞きながら、修正のつどどのような仕上がりに、なっているかを確認しながら作っていきました。
そのままHTMLファイルブラウザで開くとjQueryを使っていくうちに上手く開かくなったので、自分が作成しているフォルダで以下のようにコマンドを実行してpythonで検証用のwebサーバを起動していました。
python -m http.server 8000
起動できたら
http://localhost:8000
から開いて確認。
作成をする上で工夫を行った点、苦労した点
- メニューボタンや、スライドショーの追加（jQueryを使用）
メニューボタンを作ったり、スライドショーを追加して、それをcssできれいに整えるのに苦労しました。
- CSSでデザインとレイアウトを設定し、レスポンシブ対応
スマホでも、パソコンでもレイアウト崩れないように、したかったので、レスポンシブ対応にするためのCSSを書いたりするのに苦労しました。
- ブラウザのキャッシュ機能に苦労
少し修正しては、ブラウザでみていたので、ブラウザのキャッシュでうまく反映されないときもあり苦労しました。 そのときは、もう一度webサーバを起動しなおして対応しました。
- 更新が簡単にできるようにした
一度、公開したら、新たな活動報告などの更新を手間なしでできるような形（型）をつくりました。
Github Page でデプロイ
無料で広告も入らず、デプロイも簡単だということで、Github Pageでデプロイすることにしまいた。
以下の記事を参考にすぐにできました。
一度デプロイすれば、リポジトリの中の内容を変更するだけなので、変更は簡単です。
GoogleAnalyticsを追加
どれくらいの方から見られるかも気になったので、以下の記事を参考にGoogleAnalyticsで分析できるようにしまいた。
個人的に数値分析などが好きなので、定期的にチェックしたいなと思っています。
感想
最初はかなり苦戦しましたが、開発者ツールで色々なサイトをみてみたり、自分で１から作ったのですごく勉強にもなりました。ウェブの基本的な知識も着いたので、やって良かったなと思っています。
また何より、自分で、意味のあるホームページを作れて、楽しかったです。
ちなみに私が作成したホームページは以下になります。