Lexend Website

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

🏃‍♂️ Getting Up & Running

Make sure you've got Node installed, cuz we usin' JavaScript. I prefer yarn to install dependencies, but npm works, too. You just need one or the other — the commands are the same, switch yarn with npm if that's what you've got.

1. Install dependencies:

yarn install

2. Run locally:

yarn dev

2. Make some changes, #whatevs, commit to the repo
3. Deploy to Github Pages:

yarn deploy

The deploy command simplifies the gh-pages deploy process using the lovely gh-pages library, which is included in the development dependencies when you yarn install and uses git behind the scenes.

👨🏻‍🚒 Gotchas to Watch Out For in Future Development

Deployment

One gotcha (which you might notice in package.json on #master and shouldn't have to worry about if you use as-is), is that we have to pass the -t argument, which is shortcode for including dotfiles — gh-pages ignores folders that start with an _ if you don't include a .nojekyll file, and we're making sure to include that shnaz in the predeploy command that gets automatically run when you hit yarn deploy.

Static Files

The /static folder is an important part of Next.js, and where we store all our non-dynamic files like fonts, images, etc. Because gh-pages is running in a subdirectory (thomasjockin.github.io/lexend instead of just thomasjockin.github.io or lexend.com), we have to change the URLs for static files to match whatever directory it's living in.

You'll notice all the static files are absolute URLs, just to make it simple. If you change where this lives, you'll want to do a find & replace to update those static files. There aren't a lot.