Writing and Publishing to Webflow from an iPad Pro

I love my iPad Pro. I picked it up mainly for reading. I love to read. I like reading books on an iPad screen much more than using a Kindle. It allows me to read and consume content outside of books too.

When I'm trying to learn something new, I prefer video courses. The iPad is perfect for it. I use it to read API documentation. When I'm working on a project or trying to integrate something new, I love being able to lounge around anywhere in my house and still have the freedom to comb through the details.

But, one thing I wasn't expecting to do on my iPad is write. I've been using iPad's for a long time. Since the original model. I've had plenty of cases and even keyboard cases before, but I had never considered typing on an iPad to be super enjoyable.

But, when I picked up my iPad Pro (12.9 inch model) I was shocked to find out how much I loved typing on it. I prefer writing with iA Writer due to my love of writing with Markdown. I tried Bear, but the way it handled Markdown was frustrating to me at times. iA Writer though hit all the marks.

If you know me at all, you'll know something else I love is Webflow and no-code tools. In fact, I even have a podcast where we talk about no-code every week. The more I used my iPad, the more I started wondering about the possibilities of incorporating it into my content creation process. After tinkering around for a bit, I found a process that worked for me. I was using iA Writer to create content and then was committing it to GitHub with the app Working Copy.

Then using Zapier, I was fetching that file and manipulating it. I tweeted about my process and there was a lot of interest from people wanting to do the same thing. I sat down to make a video of the process and realized that my flow could be simplified. Now, instead of using GitHub and Working Copy, I'm using tools that should be more accessible to a wider range of folks. How am I doing it? Let's dive in and take a look.

Here are the tools I'm using:

Before we get into the weeds, here's a quick overview of how our Zap will work:

  • The trigger will be a Dropbox trigger
    • Zapier will watch for new files in a Dropbox folder
  • Once it sees a new file, we'll use Zapier's text for matter to:
    • Split the content of the file
    • We'll convert the second half to HTML
    • And we'll split the first half into individual lines or strings to use for other purposes
  • Then we'll publish our content to Webflow

To get started, you'll need to fire up iA Writer and whip up content you can use to publish to a Webflow project. If you have files ready to go, that's great. You'll want to make sure you like the name of the file since that's what we'll be using as the name of our Blog Post in Webflow.

Make sure that you have new files set to be created with the .md extension instead of txt. You will need to write in Markdown format in these files since we'll be targeting that format in Zapier. One other thing to note; in iA Writer, you have an option for Smart Quotes. You will want to make sure that is turned off. We will end up writing a small amount of html in out documents from time to time and Smart Quotes can break things if we aren't careful.

Let me walk you through how I am setting up my files. I'm starting up top with metadata. I'm adding the following information each on it's own line. First, I'm adding the Webflow CMS ID of the category this blog post will belong in. You can keep a guide of these in iA Writer, or in Airtable, or wherever is comfortable to you. This isn't necessary, but if you want to have categories it's an easy way to set it. This is optional, but if you have image fields set, you can add in a URL to the location of the image you'd like to use. You can use this same tactic with YouTube or Vimeo videos. On the last line, I write up a summary of my post to use in different layouts and for SEO/meta information. After this on a new line I added a few dashes that I can search for and use to split the file later.

Once you have content ready, you'll need to head on over to Dropbox. Create a new folder in Dropbox to hold all your content and name it appropriately. To get the most out of this workflow, create a second folder to hold assets (read: images and docs). You'll set this folder to public. Then you will be able to add images to the folder and then add the HTML img tags to your document and serve them to your Webflow site. Additionally, you can use GitHub to serve assets if you prefer. Or, use any other service you like to host your images.

Next, we'll head on over to Zapier. Once there, create a new Zap. The trigger, as I said before, will be to watch a Dropbox folder for new files. Authorize your account and select the folder you created to hold your posts or content. Make sure to select the option to include the file contents. Next, add another step and choose Formatter by Zapier. You have options here, but we're working with text. Then we'll choose to split text. We'll use the three dashes we added after our meta information to split it out from our post content. You can choose which text you want, the first or the second. Choose the second.

Add another step and choose Formatter and text again. You will take the content from the step above and use the Markdown to HTML tool to convert your post to HTML. Next, you'll add another Formatter step. We're going to take the original content from the markdown file we added to Dropbox and split it again. This time we're going to take the first segment of text that has all our metadata.

Let's add one final Formatter step. Here, we'll split our metadata text again, but instead of using our dashes like we did before, we'll use [:newline:]. For the segment index, select all as separate fields. This will give you each item as it's own value.

Lastly, we add a Webflow step. Here we want to create a live item. Now we'll go through and map all our fields. We have our content we converted to HTML for the post body, the name of the file for the title, and we have all our metadata separated out. This lets us add ID's from the CMS to set reference items, add image URL's to pass through to the CMS image fields, add our own summary, or any other field you want.

As long as you set up your file the exact same way every time, you can now quickly spin up a new markdown file in iA Writer on your iPad. Once you have it ready, tap on the share icon for that file and if you have Dropbox installed, you can choose to add your file there.

Now, when the trigger runs with Zapier, your content will be automatically posted. It's a fun and simple way to create content on your iPad.

I hope you found this post and site to be helpful to you! If you need more details, take a look at my Zap to see how I set it up! If you're curious about file setup, take a look at the markdown file for this post.

Feel free to hit me up on Twitter if you have any questions.