はじめに
約1年かけて占いサイトを作成しました
主にHTML、CSS、JavaScriptを使用しています。社会人1年目からフロント言語には興味があり勉強を行っていたというのもあり作成に至りました。
1年前にはイメージは完成していたものの作業がなかなか進まず、本格的に作業をしたのはこの半年です。
webサイトの作成方法から占いサイトの中身について紹介します。
占いサイトのイメージ図を作成
実装の難易度に限らずとりあえず自分が作りたいものを書いてみました
この絵を見ながら実装を進めていきました。いわゆる設計書です。
環境の用意
NetlifyとGitHubを連携し環境を用意しました。
Netlifyとは静的コンテンツのホスティングサービスで、無料でドメインを取得できます。※その代わりアクセス数の制限などがあります
詳しくはこちらの記事にNetlifyとGitHubの方法が記載されています。
Netlifyで静的サイトのホスティングをする
デプロイまでの運用方法は以下のやり方で行いました。
**１、**masterの下に開発ブランチを作成。
**２、**開発ブランチから画面毎のブランチを作成。
**３、**画面毎のブランチから開発ブランチにマージしたタイミングでデプロイを走らせる。
何度かデプロイが上手くいかずエラー画面が表示されることもありました
Netlifyのページ内は英語で書いてあり、翻訳しても変な日本語だったので操作が少し難しかったです。
ホーム画面の紹介
作成したサイトのホーム画面はこちらとなります！！
自信が書いた絵よりもポップな感じに仕上がりました。
設計書と比較してみるとレイアウトが少々変わってしまいました。
自分で作っているからこそ変更できるのがいいですね。
今回はここまでとなります。
次回では作成したページ１つ１つの紹介を行っていきます
続きはこちら！
社会人2年間の集大成！占いサイトを作成した話②