2020-09-05

酒飲んでたらドメイン買ってたから15年ぶりに個人サイトを公開した

掲題のとおりです。

先日ひとりで自宅酒に浸っていたところ、HN「わたはり」を名乗り始めて10年くらい経つなと気づき、せっかくだからwatahari.comを取ってやろうと思ったらしく(酔っているので記憶はあやしい)、翌朝起きるとValueDomainから領収書メールが届いていました。
初めて「わたはりさん」と呼んできた学生時代の友人todoさん、お元気ですか。

せっかくなので、vue.jsに初挑戦してvuetifyに初挑戦してnetlifyに初挑戦したらあっけなく個人サイトができました。



目次

  • 思い出話
  • 四苦八苦したメモ
  • まとめ

思い出話

初めてHTML/CSSに触れたのは、思い起こせば20年くらい前だったでしょうか。

Windows98についてきてたFrontPage Expressって覚えてますか。私はさっき調べるまで、「あの赤い羽根?ペン?みたいなアイコンのソフト・・・」くらいしか覚えてませんでした。あのFrontPage Expressでセコセコと、framesetごりごり、maqueeタグごりごり、マウスカーソルにはもちろんシャラシャラしたなにかがくっついてきて、、、しかもこれ、インターネットに公開するわけでもなく、PCローカルで作って遊んでいました。


FrontPage Expressがあまりに非力だった(あるいは使いこなせなかった)結果、HTML/CSS/Javascriptを「とほほ」さんで勉強し、図書館で謎のクソ厚本を読み、十数年も経ったいまは、Web系エンジニアをやっているんだからわからないものです。意識高くいえばDot to dotってやつですか。いや、同じことに熱中したまま成長していないだけかもしれません。
実際に、作ったウェブサイトを初めてインターネット上に置いた(もちろん工事中のページがたくさん)のは15年前くらいの忍者サーバだと思いますが、逆に言えばその頃の知識の残り香+αだけでやってきた人生でした。

もちろん今ではある程度は色々組めますが、残念ながら昨今のフロントエンドは全くわかりません。なんせ仕事ですので(社内ツールをbootstrapで組んだのを除けば)デザイナーさんが組んでくださったHTMLをベースにサービスを組んでいくわけですし、今はゴリゴリのアプリケーションバックエンドを担当しております。

悔しい。

初めて組んだHTMLが、ブラウザで表示したらなぜかきれいに表示されたときの感動。
コピペで置いたJSのおかげで、マウスカーソルにシャラシャラがついた嬉しさ。
そういうものを忘れていたんじゃないか。

というわけで、なんか聞いたことあるモダンな感じのあれをやってみたい。
そんな感じでやってみました。

四苦八苦したメモ

(この章は個人用メモなので読まなくていいです)

★選定基準
 なんかJSでさくっと組んだらブラウザ側でい〜〜感じにアレしてくれるアレやってみたい。そんな動機で選定し、node.jsにしよ→vue.jsにしよう→vuetify使ったろう、となった。
 ホスティングはどうやらnetilifyってのが楽そう。コードはgithubに置いておけば、よしなにデプロイしてくれるし、どうせ誰も見ないウェブサイトなら無料枠で断然収まりそう。

★セットアップと構築メモ
anyenv等々インストール。

anyenv(随分前に入れてたので再インストール)
$ brew reinstall anyenv
$ anyenv init
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
$ anyenv install --init

anyenv-update
$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

anyenv-git
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

nodenv
$ anyenv install nodenv
$ exec $SHELL -l

なんかこれはやっといたほうがよさげ
$ anyenv install nodenv
$ exec $SHELL -l
nodeいれる
$ nodenv install -l
$ nodenv install 13.14.0


vue.js環境設定編
この辺からは公式ドキュメント通りにやればいい。

vue cliをいれる
$ npm install -g @vue/cli

VueのApp作成。
default (ver2)を選択した。なんとなくデフォっぽいので。
それにしてもめちゃ丁寧ね。モダ〜〜ン。
$ vue create wataharicom

vuetify導入。
$ cd wataharicom
$ vue add vuetify

これもデフォを選択。大丈夫やろ。
なんせrecommendedやからな

で、npm run serveしてみると、
http://localhost:8080/
あらーさすがナウいわね

なるほど、ローカル立ち上げておけば、リアルタイムにいけそう
component単位で作り上げておけばいいのかな
それをApp.jsで組み立てる感じそう。

・・・そして公式ドキュメントに四苦八苦しつつ、組み上げました。

netlifyはあまりにも簡単だったのでメモを省略します。
こんな簡単にCI/CD環境が組めるようになったんだなぁ・・・(あとhttps公開も簡単だなぁ・・・すごい・・・)

まとめ


はい、どん。

Vuetifyのモジュールの使い方は個別に四苦八苦したものの、全体としてはあっけなく、それらしいものができた。一方、四苦八苦していたときに感じたのだが、結局HTML/CSS/JSの基礎知識がないと、自力で解決するときに迷走はしかねない。ありがとな、小中学生時代の俺。

最近は自宅でPCを開く頻度が随分と減ってしまった。
数年前の、仕事で死ぬほどキーボードカタカタやってるんだからもういいじゃない、みたいな気持ちのときからだと思う。それは良い「逃げ」だ。自分を守れた。仕事がしんどいときは、PCの電源を落とす勇気を持っていいのだと思う。

ただ、今回(ものすごく表層的にだが)Vue.js周り触って、楽しかった気持ちは大事にしたいと思う。偉人たちのあれこれをコピペして、だけど自分のコーディングの結果で少しづつ出来上がっていく楽しみを、ちゃんと覚えておくべきなのだ。
どうせこの個人サイトも、誰かに見てもらうために作ったものではない。ただただ自己満足で楽しく作りたい。

インターネットに公開もせず、誰に見せるわけでもなく、ただただ作るのが楽しかった頃の気持ちをちょっとだけ思い出した数日であった。
おわり。

0 件のコメント: