自分の周辺情報をまとめる静的サイトをつくった
出典元: scrapbox.io
この記事は公開から5年以上が経過しています。内容が一部古い箇所があります。
令和元年台風第 19 号すごかったですね
- みなさん大丈夫でしたでしょうか
- yamanoku の家のアンテナが魚の骨なので怖かった
- 大丈夫でした
エンジニアの端くれとしてなにか作りたい
- まずは「知る」ことに特化しよう
- あとは自分がメインで使えるようにしたい
やれること
- 経験のある技術
- コッテコテのフロントエンド太郎
- バックエンド側でなんとかやってくれてるのに付随する
- コッテコテのフロントエンド太郎
- よっしゃフロントエンド太郎だし静的サイトでもつくるか！！
https://nagareyama.yamanoku.net/
- 流山市避難所
- 小児科
- ご飯どころ
- 現状周辺のことを載せてるだけですね
- 全然足りんし
利用技術
GatsbyJSに関する不満点
React.Fragmentができない- 内包している React が v16 じゃない
- ちゃんとHTML書きてえなぁ
- スタイルが余計なものを考慮しないといけない
height: 100%をしたかったのですが___gatsbyが果てしなく邪魔html.jsなるものを弄らないと困るやつ
- TypeScript対応
gatsby-plugin-typescriptが必要- そのほか色々設定した
- ハマりどころが多かった気がする
- そもそもいらんやろ
- 脱React.jsできるか
- ガッツリReact.js依存
- 素振りの感覚だったし別にそこまで心中する気はない
最近11tyというのがいいというのを聞く
- 静的サイトジェネレーター
- いいとこ
- なにも気にしなかったら
@11ty/eleventyだけで完結できちゃうnpx eleventyでビルド
- 様々なテンプレートがひっぱれる
- サイトの URL 設計がツールに縛られない
- コレクションの設定が柔軟
- Data ディレクトリが便利、JS を書いたりもできる
- ファイルを生成する前にフックで加工できる（
.addTransform） - https://twitter.com/_yuheiy/status/1200976795396235264
- なにも気にしなかったら
- 実例
- 試してみた
- クセはあった
- 設定を自分であれこれカスタマイズできる
- 記法の慣れは必要
- モジュールの css を読み込みたい時
- クセはあった
{% set css %}
{% include "node_modules/yama-normalize/yama-normalize.css" %}
{% endset %}
ネクストステップ
- そもそもAPIにしてみるか
- FROKAN × UIT #2 「年忘れ LT バトル」#5df9fb9ec2cd3f0000d46b25
- 自分の個人情報を API 化してるやつが居た
- それをビルドして静的サイトジェネレートする
- FROKAN × UIT #2 「年忘れ LT バトル」#5df9fb9ec2cd3f0000d46b25
- 天気情報とかがあってもいいかな
- 流山市役所の情報クロール
- Puppeteerの素振り
- なんかいいネタください