Page views: View counter

Publishing Notebook in MDX via my iPad

It’s no secret that my iPad Pro is my primary computer. It’s the perfect device for being a student, & even outside that, I absolutely love using it.

But I’m also a web designer. Coding on an iPad has long been…a joke. There are various hacky workarounds, & this is one of them, but it’s free & requires no complicated setup.

My notebook is a place for me to post daily notes. They’re kind of blog posts, but with a much lower bar for posting, more options in authoring/presentation, & more of a ”work in public“ attitude. I’m not trying to get maximum claps on Medium, maybe no one at all cares, but I want to make what I’m thinking about & working on public, & I love this format.

Before you ask, yes, this site is open source. Read the source

My notebook here runs on Gatsby with MDX, hosted on Netlify.

Original inspiration came from jxnblk/notebook, but I set mine up pretty differently. I’m eyeing John Otander’s digital garden, but the Gatsby Theme is still maturing.

MDX

I love MDX because I can embed custom-styled React components inside my writing, while still writing in readable, easily-editable Markdown. Check out this recent post for an example of embedded components.

Basic workflow

I draft the text in my native Markdown editor (more below), then write the code on Glitch, my favorite web-based Node.js editor. I then export changes to GitHub, where Netlify jumps in to deploy the latest changes to my site.

This means the Glitch preview is just that—a preview. For real visitors, they’re getting the static site served by a CDN, instead of a tiny development server that takes a minute to boot up.

I typically write posts in Drafts on my iPad, because it’s a great text editor that immediately opens to a new note. If I’m writing a longer piece, iA Writer is my go-to.

Shortcuts

(The most useful one is the first one, the others are for processing images)

Regarding New Notebook Page: Remember to change the project URL to yours at the end! I have two notebooks, this one & one for my college major coursework—if you just have one, delete the Choose from Menu near the end.

Publishing a post

Once I’ve got the text ready & want to jump into adding code components/previewing it on the site, I run the New Notebook Page Shortcut. Type in the short name of the post to show up on the homepage/become the slug. I typically put Safari in Split View next to Drafts, running the Shortcut from the widget/Slide Over.

I then tap New File, paste, then copy the post text, & paste it into the editor. Show Live → In a New Window, check it out, make edits.

When it’s ready for primetime, I just tap Tools → Git, Import, Export → Export to GitHub, add a commit message, & wait 1 minute while it deploys. All done!

Images

If you take a photo with your iPhone or iPad, you’ll have a multi-megabyte file, & sometimes the Live Photo is important, etc. I linked a variety of Shortcuts to aid:

Create GIF is fun if you have a bunch of images taken in short sequence.
Live Photo to GIF does just what it sounds like.
Convert Image just changes image formats.
Compress Image is the most important—you’ll want to compress photos before embedding them on your page, for performance reasons.

When you’ve got an image ready, just upload it to Glitch Assets, copy the URL, & use it in Markdown as a standard image.

Technical note: if you use Next.js or Gatsby

If you set up a basic project on Glitch with Next.js or Gatsby, you’ll find development unbearable, as Glitch entirely restarts the server on every change, instead of allowing those frameworks’ hot reloading to work.

This forum post rescued me. I think Glitch should make this built-in, but until then, make a watch.json file in the root of your project & paste in:

{
  "install": {
    "include": ["^package\\.json$"],
    "exclude": []
  },
  "restart": {
    "include": ["^\\.env$"],
    "exclude": []
  },
  "noSavedEvents": true
}