koleben’s blog

モノ・時間・情報からの自由になりたい。スローでイージーな暮らしを目指して

WebサイトをVue Pressで再構成しました。自分のWebサイトの変遷も振り返ってみます。

突然ですが、(このブログではなく)Webサイトをリニューアルしました。

といってもコンテンツ自体は変わってませんが...

こんな感じです。

f:id:koleben:20190722212526p:plain

forcetrek.web.app

Vue Pressで構築

あたらしいサイトはVue Pressというスタティックサイトジェネレータを使って構築しました。

vuepress.vuejs.org

いわゆる”個人のホームページ”というより技術ドキュメントを簡単に作成するのが向いてるんでしょうけどね。

コンテンツはMarkdownというフォーマットに統一しました。

HTMLよりは表現力は低いのですがとにかく簡便に記述できます。

最近は仕事でもなんでもドキュメントはほとんどこれになってます。

Webサイト変遷

今回のリニューアルの際に、どんな風に変遷してたんだっけ??と、思い振り返ってみました。サイトのURLすらほとんど忘れてて結構大変でした。

web.archive.orgを漁ってなんとかサルベージしてきました。一部画像とかが表示しきれてないです。

Wayback Machine

第1期 menber.nifty.ne.jp で Apple風 2000年2月ごろ〜

メニューは当時のAppleサイトの丸パクリですw

ツールは、のちにAdobeに買収されたGoLive CyberStudio Personal Editionってので作っていたと思います。

鬼のテーブルレイアウトを生成してデザインを構築するという、今だとありえないHTMLを吐くツールでした。

更新ニュースに2/12 Aquaに変更とありますので、その前から作ってはいたのかと思います。(アーカイブにはありませんでした。)

f:id:koleben:20190722212533p:plain

第1期 終了時点 〜2004年8月まで

移行通知を出してました。

menber.nifty.ne.jpの”ホームページ”サービスが終了してしまうというので、geocities.jpに移行しました。

多分、homepage.nifty.comに移行する手もあったと思います。

NIFTY-Serveパソコン通信時代から使ってたんですが、プロバイダもYahoo!BBに移った頃でしたのでgeocities.jpを選んだ気がします。

f:id:koleben:20190722212538p:plain

第2期 geocities.jpで開始 2004年8月ごろ〜

なんかフレームで取り込んでましたね。なんだろ?ブログかな?

f:id:koleben:20190722212550p:plain

第2期 ブログを取り込み 2007年4月ごろ〜

ブログのRSSを取り込んでウェブサイトに表示するようにしてました。このころからGoogle App Engineを使い始めたと思います。

f:id:koleben:20190722212554p:plain

第3期 横長デザインへ 2007年9月ごろ〜

その当時のAppleのサイトを参考にリニューアルしました。昔の横幅640ピクセルから960ピクセルくらいをターゲットにして横長デザインにしてますね。

サイトはツールは使わずHTMLをエディタで書くようになりました。

f:id:koleben:20190722212600p:plain

第4期 appspot.comへ移行&Bootstrapでレスポンシブデザイン 2016年1月ごろ〜

その後、TwitterやらFaceboookに書き込むことが多くなってウェブサイトを放置してました。

あるとき急に思い立ってサイトをBootstrap対応にして、サービスもGoogle CloudのGoogle App Engineに移行しました。

ブログの内容を取り込むJavaScriptはweb.archive.orgでもちゃんと動いてるようで今の内容が表示されてました。

f:id:koleben:20190722212608p:plain

20年前からコンテンツ変わってない...

2000年からほぼ20年のサイトの変遷でした。

Aquaってデザインありましたよね〜懐かしすぎです。

Vue Pressでの方式はどのくらい持つのかな?