自分の周辺情報をまとめる静的サイトをつくった
created at:
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。
令和元年台風第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の素振り
- なんかいいネタください