Discussion
Closed
拝啓 梅雨の候、時候不順の折、まだ夏を実感することのない七月、いかがお過ごしてしょうか。
私、ホームページを手作りして早 20 年近く経っております。
ポートフォリオサイトを作ってはドメイン切れ、ブログを作っては三日坊主、
RSS にはカビが生え、フロントエンドフレームワークを導入しては outdated する日々です。
昨今、皆々様におかれましては、個人のホームページ今作るならどんな風にお造りになられるか、
大変興味がありまして折角の Qiita のベータ機能を用いて意見交換させていただきたく存じます。
もし、お時間が可能でしたらご意見こちらにお寄せいただければと考えております。
ご多用の中、急なご意見の募集、ご相談で恐れ入りますが何卒よろしくお願い申し上げます。
敬具
私も、ホームページを手作り後に放置して早 15 年近く経っております。
(作り始めは前世紀ですが、最終更新日をみたら2005年1月16日でした。)
リニューアルするなら、ヘッドレスCMS or 静的サイトジェネレーター が選択肢かなと思っています。いっそ、ヘッドレスCMSを自作するのもいいかなと。静的サイトジェネレーターは長いことMiddlemanを(自分のホームページ以外で)使ってきていましたが、開発の方向性が迷走して下火になっているので、今さら使うのはちょっと違う感じもしています。かといって、Hugoは思想がなんか受け付けない感じだし…。いっそ、parcelを使いながら、SPAを目指すのもいいかと思っていたりします。
HTMLをべた書きしていた前世紀に比べると、なまじ技術が発展しすぎていて、やり方に迷うってのも悩ましい物です。
ヘッドレス CMS 自作は熱いですね。それでチャリンチャリン稼げそうな気もします。
やはり Gatsby 次いで Next/Nuxt あたりの SSG が盛り上がってる感じもしますね。
ホームページのコンテンツを作ってる暇がなくなりますね。
StaticGenを見てみると、SSG界隈はHugo一強だったのが、GastbyやNext.js、NuxtといったReactやVueを使った物が今は熱いみたいっすね。でも、俺一押しのJSフレームワークがマイナーなHyperappなので、なかなか食指が伸びないんですよね。
Hyperapp も React Vue ほどとは言えずとも人気があるみたいですね。六本木界隈でよく使われているイメージがあります。
Hugo は今でもよく使われていますが、私は好きになれませんでした。go 構文はどうも出生の関係でサーバーでのみ見たくなります。
WordPress+Gatsbyの和書が出たので次はこれかなあという気がしています
https://ebisu.com/note/about-gatsbyjs/
（追記：記憶だけでリンク貼ったらWordPressではなかったですね… 失礼）
ご紹介いただいてるサイトでは Gatsby + Contentful + Netlify という感じですね。
WordPress REST API で headless CMS 的に WordPress を使うのもできそうですね。
MkDocs といえば Material for MkDocs で若手エンジニアの方が作られていて良くできたドキュメントサイトをよく見ていました。Google っぽい見た目のドキュメントサイトになるのでとても見やすいと思っていました。
Markdown に少しのカスタマイズでページが生成できるのは見事ですよね。
私も markdown からウェブサイトが作れる同様の機能を持った docsify.js でちょっとしたドキュメントサイトを作ったことがあります。
そしてやっぱり JavaScript で動的な機能といえば Express が人気のようですね。
前略 @feb19 さま
突然の質問に驚いています。Qiita さんから 20 年にも及ぶホームページにまつわるご苦労を伺い、大変驚きました。激務のご心労が重なってのことではと推察しております。
日頃ご壮健な @feb19 さまでございますから、じき快方に向かわれることと信じておりますが、どうかご無理をなさいませんよう、この機会に十分ご静養されてください。
さて、先日 GitHub に遊びに行ったところ GitHub Pages なる品を知りました。Qiita さんと同じ Markdown でいただけるそうですので、健康には良さそうな気がいたします。
@feb19 さまもそうだとは思うのですが、実は GitHub Pages の存在自体は存じておりました。しかし、ジキル博士のお世話にならないといけないと思い込んでおり、試してみようと登録だけはしたものの、博士の仰る意味がわからず、そのままにしておりました。
当時は、git などの油の濃いものは苦手だったのですが、コラーゲンであることを知り美容のためにと、最近は積極的に git を摂取しております。
どうやらテンプレートをコピーしてタイトルなどの設定を変えて設置するだけで使えるそうです。あの Qiita さんに似たテーマもあるそうです。お口に合うかは分かりませんが、再度見直されてみてはいかがでしょうか。
季節の変わり目はシステムの変わり目くらい怖いと言います。夏風邪には十分ご注意のうえ、@feb19 さまの更なるご発展ご繁栄を心よりお祈り申し上げますとともに、蝉の声にも勝る賑やかな夏をお過ごしください。
まずは書中にて、ご挨拶まで。
草々
拝復 @KEINOS さま
ネット文化しぐさと申しますか、田舎の小さなバス停、蝉の鳴き声、遠くに見える入道雲が眩しく感じられ、あぜみちを自転車で走るかのような大変心地のよいレスありがとうございます。
GitHub Pages で Qiita のようなテーマがあるというのは初めて知りました。だったら Qiita で書けばいいのに天邪鬼なのではと一旦は思ったものの、ポエムを書くならこちらが最適なのかと膝を打った次第です。ポエム報告をされないかと戦々恐々としながら書き込むことをしなくてよいので、私のような Qiita フリークには破れ鍋に綴じ蓋といったように思えます。
大変素敵な文をありがとうございました。「季節の変わり目はシステムの変わり目ぐらい怖い」が非常に素晴らしい一節だと感銘を受けました。
今後とも変わらぬお引き立てのほど、よろしくお願い申し上げます。
敬具
Hugo + Netlify でサイト作ってますが、表示のパフォマンス上げにくいですね＾＾；
やはり、Reactや Vue に移行していくんですかね？
この話題、興味深いです。
React や Vue を使ったからパフォーマンスが上がるなんてことはなくて、
Hugo の方が高速に動くこともあると思います〜。
React や Vue は比較的深みのあるフレームワークなので話題になりやすいですね。
Netlify ってエッジロケーションに対応してましたっけ、
今リージョンって一番近くてシンガポールみたいですね。
パフォーマンス的にここは結構影響大きそうな気がしますね。
重要であれば日本にエッジサーバーのあるクラウドを検討されてもいいのかもしれません。
今ちょっと見てみたら Netlify Edge ってサービスが提供されているみたいですね。
これどうなんでしょう、なかなか良さそうですね。
https://www.netlify.com/products/edge/
一度作ったらそれほど頻繁な更新は必要なく、物量的にもそう大きくはならないであろう、自己紹介・ポートフォリオ系の「ホームページ」と、日夜更新してどんどん大きくしていくブログ・wiki系の「ホームページ」では、適する道具が違ってくるように思います。
前者は、適当なCSSフレームワークをダウンロードしてきて必要最小限のところだけ書き換えこれをもって完成品とするというのが、一番手間がかからず効果的に思います。レスポンシブデザインにも適合したイケてるデザインを実現するCSSファイルと、一通りの型紙HTMLファイルをアーカイブしたものが、いろいろ公開されています。
後者については、私も静的サイトジェネレータ（SSG）に注目しています。
私は10年以上前からMovableTypeでブログを運用していたのですが、これがもうややこしすぎて、モチベーションが落ちてきた今ではメンテナンスに手を出す気にもなれないという状況になっています。どういうわけか一部の機能が不全状態に陥っているのですが、問題個所を探索する気になれない…。
そもそも、個人ホームページに必要な機能なんて限られていると思うのですよ。不要不急の機能をサポートするために万事に妙にややこしい手順を要求されるのはバカバカしいことです。
というわけでSSGですが、巷で話題らしいHugoとかには背を向けて、perlベースのDapperというツールに注目しています。私自身がperlに最もなじみがあることと、シンプルなつくりなのでシステムを把握するのもカスタマイズを試みるのも容易そうなところが気に入っています。また、本文データの構築にはmarkdownが使えます。
perlベースの静的サイトジェネレーター : Dapperを試してみませんか？ - Qiita
公開用htmlファイルの型紙を「レイアウトファイル」という名前で作る必要があるのですが、これを前述のフリーCSSフレームワークをちょこっと改変して作り上げるというアプローチも可能です。
個人ベースのサイト構築なら、この辺が一番身の丈に合っているのではないかと考えているところです。
先日、簡易なプロフィールページを制作いたしましたが、
GitHub Pages上にて1ファイルでHTMLのみを記述して作り上げました。
Classless CSS frameworkという、
HTMLタグに直接スタイルが当てられてるCSSフレームワークを用いました。
様々な人たちが制作しているらしくこちらにまとめページがあります。
A list of classless CSS themes/frameworks with screenshots
1ファイルでまとめ上げたことにより、
Google Page Insightsが
PC → 99点、SP → 92点 叩き出せました。
環境構築などに時間をかけるより、
既存のテンプレート上でばばーと書いたほうが楽ですよね。
参考までに今回作ったURL載せておきます。
URL：https://urswtlvin.github.io/
ソースコード：https://github.com/urswtlvin/urswtlvin.github.io
@doikoji さんご紹介の Perl ベースの Dapper は初めて知りました。
https://metacpan.org/pod/distribution/App-Dapper/bin/dapper
Amon2 や Xslate には一定馴染みがあります。
テンプレート構文は TTerse っぽいですね。
https://metacpan.org/pod/Text::Xslate::Syntax::TTerse
馴染みのある言語での SSG ツールを使うのが地続きに学習しながら制作できそうで効率よさそうですね。
@urswtlvin さんの Classless CSS Framework も初めて知りました。
セマンティックな HTML (死語？) を書くだけでそれっぽくしてくれるというのはスマホネイティブになってきて HTML を書くことが減ってきた世代が HTML を書きはじめることの学習にも良い気もしました。
個人的には見た目的なデザインが一定自分で作れた方が楽しいのでこちらを使うことはなさそうですが、
アクセシビリティ ARIA 系の属性だけがあれば完璧になりそうなので HTML が綺麗で良いですね。
関係ないですが、Static Forms すごいですね。。。
内部的にどうやってるのか想像しましたが AWS SES を使わせてもらえる SaaS みたいですね。
(Static Forms 社どうやって生計立ててるのかな。。一旦顧客を呼ぶ事業投資フェーズなのかな。。)
https://twitter.com/hussainanjar/status/1267702689951027200
国内だと From Run とか人気になってきてそうですね。
https://form.run/ja
github pages + Vuepressでブログ風の静的サイトを作りました。
自動デプロイを組んで満足して記事はしばらく書いていません(｀・ω・´)ｷﾘ
デザイナーさんにはおすすめしません（面倒臭さが勝りそう）が、プログラマならmarkdownでサクッと書いてサクッと公開できるのでおすすめしていいかな〜という感じです。改造も楽しいですよ！
@perpouh わかります。おまおれでございます。
