まずは現行の再現
アクセス解析をみた結果、現在のコンテンツやライティング、ベースとなるデザインは悪くはなさそうでした。なので、ベースは同一デザイン、同一コンテンツで、コーディングしました。
まずは、HTMLを文章構造の意味に沿って書きました。メニューが float でつくられてたり、意味的にはリストなのに <p> でくくられて、項目を・ と文字で書いてるのを <ul><li> で書き直したりしていきます。大体こんな感じ（この時点で、 normalize.css はあてています）
何となくざっと見て文章構造に問題がなくなれば、続いてCSSを書きます。フォントサイズが小さめだったので大きくしたり、背景色を設定してコンテンツの区切りをわかりやすくしたりしてっと。
よし書いた。
私は、共通コンポーネントを切り出したCSSファイル module.css と個別スタイルのCSSファイル style.css の2つにファイルを分けて実装を進めました。共通コンポーネントは使いまわしがききますし、似たようなデザインを別コンポーネントに分けると管理が大変面倒になるので、CSSファイルは分けておくことがおすすめです。
続いて、jQueryで書かれてた部分をJavaScriptで書き直していきます。詳しくは https://note.com/rdlabo/n/ndfe07e0c0bcb でまとめていますが、現代ではわざわざjQueryを使うべき理由はないので、JavaScriptで書けるならJavaScriptで書くべきです。
例えば、LPページによくあるスムーズスクロール（目的のコンテンツまでするするっとスクロールするやつ）だとこんな感じです。
const linkScroll = (selector) => {
const links = document.querySelectorAll(selector);
for(const link of links) {
if (!link.hash) {
continue;
}
link.addEventListener('click', (e) => {
e.preventDefault();
const element = document.querySelector(link.hash);
const rect = element.getBoundingClientRect();
const target = rect.top + window.pageYOffset;
let position = 0;
let progress = 0;
const easeOut = (p) => {
return p * (2 - p);
};
const move = () => {
progress ++;
position = target * easeOut(progress / 20);
window.scrollTo(0, position);
if (position < target) {
requestAnimationFrame(move);
}
};
requestAnimationFrame(move);
})
}
}
window.onload = () => {
linkScroll('nav a[href]');
};
nav a[href] 要素のすべてを取得して、ループでまわしてる中で、href属性が#ハッシュになってるリンクのクリックイベントをEventListenerで監視しています。easeOut()でイージング（徐々に減速する様子）を表現しています。requestAnimationFrameでレンダリングに関係ない（アニメーションに表現されない）処理を間引きながらスクロールしています。
改行含めて30行程度です。jQueryなら5行以内で書ける？それの背景には数百行に及ぶScriptの読み込みが必要なので、5行ではなく、数百行と5行ですよね。
ちなみに実際に使ってるのはこちらです（上記は不要なコードを削除しています）。
https://github.com/le-benaton/website/blob/master/src/template/index.js#L5-L40
自動デプロイとソースコードの共有
ここらへんでとりあえず見れるものになったので、オーナーシェフとURLを共有します。ひとりでシークレットにしながらつくって、いきなり完成品を見せたら大体の場合「（ここから変えるの大変そうだし）仕方ないなぁ」となるか、揉めます。
見られて困るものではないですし、案件金額を問わずに、「最低限の体裁」が整ったらさっさと共有してしまいます。
・ リニューアル前のWebサイト
・ 最低限の体裁のWebサイト
最初の共有段階は本当にこのレベルで大丈夫です。「もっとよくなったら共有しよう」はいつまでも共有できないので、本当最低限で共有しましょう。
Netlifyを利用するのは簡単で、ソースコード一式をGitHubにあげたら、そのGitHubアカウントでNetlifyにログインして、レポジトリを選択するだけです。
以下サイトが詳しく解説してるので、やり方がわからないという方は参考にしてください。
一度連携してしまえば、それ以降はGitHubを更新すると自動的にnetlifyのWebサイトに反映されるようになります。
反映が完了したら、とりあえず「このURLに最新版が反映されます」とオーナーシェフとURLを共有しました。簡単。