Jsem velkým fanouškem Gatsby.js. Pohání můj blog a mé další náhodné stránky. Nedávno jsem zkoušel některé naše startéry – zkouším TinaCMS a zobrazovat své příspěvky dev.to na mé vlastní doméně.
Začal jsem si vést seznam toho, co dělám pokaždé, když založím stránky Gatsby, takže si to příště zapamatuji a řekl jsem si, že se o to podělím.
Upgrade všech závislostí
Existuje tolik skvělých Gatsbyho předkrmů. Díky tomu je spuštění webu poměrně bezbolestné a ušetří spoustu času. Než začnu pracovat se startérem, rád bych nastavil všechny závislosti na nejnovější verze. K tomu používám svůj oblíbený příkaz příze:
yarn upgrade-interactive --latest
Tohle může všechno rozbít. Rád bych brzy věděl, jestli mě použití startéru nedonutí zůstat u zastaralé verze Gatsby, React atd. nebo si dát práci na aktualizaci.
Použít přízi
Preferuji přízi před npm. Spustím najít a nahradit v package.json pro "npm run" a nahradím ho "yarn". Také odstraním package.lock.
Přidat atribut jazyka
Když se podívám na ukázku startéru Gatsby, vždy používám rozšíření Chrome pro test přístupnosti sekery, abych se ujistil, že neskončím se spoustou chyb k opravě ve vygenerovaném HTML. Téměř po celou dobu vidím toto porušení:
<html> element must have a lang attribute
Tento problém je považován za závažný a je zde podrobně vysvětlen. Má jednoduchou opravu ve většině spouštěčů a témat Gatsby.
Za předpokladu, že se používá Helmet, můžete použít htmlAttributes prop nastavit atribut na <html> živel:
<Helmet title={config.siteMetadata.title} htmlAttributes={{ lang: 'en' }} />
Přidat nějaké pluginy
Gatsby pluginy jsou super užitečné. Vždy chci vyzkoušet a získat výhody offline mezipaměti PWA a zabezpečení implementace hlaviček CSP, takže přidávám tyto dva pluginy:
- Zásady zabezpečení obsahu
- Offline
Zde je dobrý článek o PWA a Gatsbym.
Co ještě děláte?
To je zatím můj seznam.