An awesome, function website for an awesome, functional font — Lexend is a font designed specifically to increase to reading-proficiency, and it's got some data to back it up. We designed this sucker to show it.
There's a lot of fun but not-too-complicated tech here:
- next.js for a minimal react framework
- react-spring for amazing animation
- emotion for simple & mostly-contained component styling
- mdx to keep our homepage in fairly simple markdown, with components mixed in
Make sure you've got a recent Node (18+) installed. These examples use
npm, butyarn/pnpmwork too.
- Install dependencies:
npm install- Run locally:
npm run dev # http://localhost:3000- Build the static site (output is written to
./out):
npm run buildThe site is a fully static export (Next.js output: 'export'). Pushing to main triggers .github/workflows/build.yml, which builds ./out and publishes it to the gh-pages branch automatically — you don't need to run anything by hand.
To deploy manually if you ever need to: npm run build && npm run deploy.
Moving to Cloudflare Pages? Use Build command:
npm run build, Build output directory:out. No special Node flags are required anymore. Cloudflare handles the custom domain, so theCNAME/.nojekyllfiles (kept inpublic/for GitHub Pages) become irrelevant there.
Non-dynamic assets (fonts, images, favicons) live in public/static. Anything in public/ is served from the site root, so public/static/fonts/lexendgx.woff2 is available at /static/fonts/lexendgx.woff2. The site is served from the domain root (www.lexend.com), so relative static/... URLs resolve correctly — no asset-prefix juggling needed.
The entire page is pages/index.mdx — markdown with React components mixed in. Components are imported at the top of the file and rendered inline; the export default at the bottom is the page layout wrapper.