components | ||
data | ||
lib | ||
pages | ||
static | ||
.gitignore | ||
next.config.js | ||
now.json | ||
package.json | ||
readme.md | ||
yarn.lock |
Lexend Website
![Screen Shot 2019-06-08 at 7 26 26 PM](https://user-images.githubusercontent.com/25366/59153730-83bfec80-8a2f-11e9-8c25-a188c906e3ed.png)
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
withnpm
if that's what you've got.
- Install dependencies:
yarn install
- Run locally:
yarn dev
- Make some changes, #whatevs, commit to the repo
- 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.