ブログ開設ついでにサイトの開発メモを残しておくよ。
サイトのベースはこちらの記事を参考にしました。怠惰だけどある程度自分で作ってみたかった今回の状況にピッタリでした。ありがたや〜。
『2020年版、もっと楽をしたいオタク向け個人サイトの作り方』
以下うちの創作個人サイト（叩き）の制作に使用したサービスやライブラリです。
ラフな説明と個人的所感を添えてみたよ。
【GitHub】
ソースコードを管理・公開できるなんかよく聞く有名な場所。今回はここをコード置き場にしました。あと（ついでに）バージョン管理。プライベート設定です。
どうやらGitHubだけでも次に挙げるNetlifyと似たようなことができるみたいですね。いつかこちらも試してみたい。
【Netlify】
静的webサイト用ホスティングサービス。コードを置いたGitHubと連携させるだけでサイトが動き出します。連携せずに直接ファイルをアップロードしてもOK。英語サイトだけどがっつり読まなくても最低限使う分には大丈夫と思います。英語しょぼしょぼの自分でもなんとかなった。サーバーサイドで色々やりたい場合は使えないけど、私はJavaScriptで遊びたいだけなので丁度よかったです。
【GrapesJS】
web上でHTML,CSSを触らず視覚的にページを作れるサービス。ドラッグ&ドロップで要素を動かしたり設定値を指定したりしてページをデザインするやつですね。JimdoやWixほど直感的には触れないし英語サイトだけど、HTMLとCSSの知識があればなんとなく分かると思います。（自分はイマイチだったのでそっちを覚えるのにも役立った）。一から作るよりは断然楽なのではないでしょうか。コードをダウンロードしてNetlifyに投げればそれだけでサイトができるのだ。やったね！
ただ何も考えずに使うと不要なidやclassが大量に生成される気がします。たぶん上手な使い方があるんでしょうね…自分は未使用のコードをごっちゃりさせながら作ってました。機能的には問題ないし叩き用だったから良いんだけどもね。あとJavaScriptに組み込んで自分でエディタをカスタマイズできるできるらしいです（やってない）
【Vue.js】
SPA（シングルページアプリケーション）を簡単に作れるというJavaScriptのライブラリ。HTML、CSS、JavaScriptが多少わかると使いやすいと思います。似たようなライブラリは他にもあって、世界的にはReactとか熱いらしいです。Vue.jsは日本語のリファレンスがある、部分的に実装できる（小難しくて躓きがちな環境構築をしなくても気軽に使える）等の理由で学習コストが低いと見かけてこちらを選択。
【Vue CLI】
Vue.jsのプロジェクトを簡単に作れる便利ツール。私は最初Vue.jsと混同してました。大規模開発でVue.jsを使う時はこちらを使用することが多いようです。自分が使用した教材では導入からVue CLIを使っていたけど、個人で軽くVue.jsを試したい場合には不要かも？Vue.jsを部分的に使用する時とは違い、使用には開発環境を整える必要があります（Node.js、npmのインストール等）。
これでファイルを作成すると、ベースのフォルダ構成をまるっと作ってくれます。私は事前に作っていたサイトの叩きをパーツごとに分けてこちらにコピペして、JavaScriptで動きを加えていきました。
環境構築時
・【Node.js】
・【yarn】
・【webpack】
・【babel】
時間切れ＆理解が浅いのでこちらの説明は割愛。
元々webの知識が乏しく勢いで突貫工事してるので、全体的に理解が甘いです。間違いがあったらすいません。理解していなくても動く便利なものであることは確かです。
yarn(npm)のインストールしたものが専用ファイルに自動で書きこまれていく仕組みは、個人的にちょっと感動しました。JavaScriptは書いた後すぐに動きが見れて楽しいですね。少しずつ理解を深めていけたらと思います。