The chicken can dance

Rubber Chicken Paradise

Making the chicken dance one line of code at a time

Setting up a static site on an iPad

An exercise in mild technical masochism

Jeremy Oursler

7 minutes read

When setting up this blog I wanted to try something. Could I set up a static site using just an iPad instead of my desktop. This wasn’t an experiment to see if I could replace my desktop, this was because my kids didn’t want to stop playing their computer games long enough for me to get this up and running. I had an iPad laying around and a Bluetooth keyboard and time. I spent so much time wondering if I could, I never though if I should.

The basic setup

The text editor

Since I went with Hugo for static site generation, all the files were going to be plain text and could be written in any text editor. There are several decent markdown editors out there for iOS so pick your faviourite and let loose.

Since I was also going to be pushing this to github I decided to see if there was a git client that had a good enough editor to cut down on the number of different apps I would need. Turns out Working Copy has a really good text editor and markdown preview. I still haven’t played with css, js, HTML, or Hugo’s theming language yet but I have high hopes from wht I had seen online.

The repository

This one was easy. github because I have my open source projects there already and there are some projects out there that will let me use github issues for a comment system (coming soon).

Create a new repository on github, give it a name, copy the clone url and clone it in your git client.

Setting up the site

Hugo has a pretty simple layout for the folders:

assets/
resources/
static/
themes/
.gitignore
config.toml

I like to have a .gitignore in every git repo even if I dont use it. I did add the public folder to the git ignore so if I ever do use a desktop the build artificts wont be added into the repo.

Using my git client (since working copy has a good file explorer) I created the necessary directories and set out for a theme.

Making it look good with out a lot of work

https://themes.gohugo.io has a long list of themes and is where I got this one, the future imperfect slim theme.

To install a theme just download the files from git, create a new folder for the theme in the themes directory, copy the files, then update the theme entry in your config.toml to the directory name.

Most themes have some configuration you can do so you don’t have to go editing or overriding random theme partial templates, so copy the config.toml from the example site to the root and get configuring.

Since nothing is set in stone you can layout your content and static folders in any manner. I went with a folder for about, blog, and opensource (the paths of this site) in the content folder and the site avatar in the static/img folder.

Posts are just .md files in the blog directory (I name them yyyy-mm-dd-title-of-the-blog-post.md which also makes the slugs easy)

Commit everything and push it to your github repo and you’re ready for the next steps.

No one can see it though

Since you now have your repository set up you have two options:

  1. Kick the kids off the computer, download Hugo.exe and then run Hugo server to have a nice locally accessible and auto building version of your site
  2. Find a hosting provider that has some sort of a CI/CD platform where you can run Hugo --minify and publish the resulting files somewhere.

I went with option 2 in the vain of keeping purely on the iPad and not finding a way to run Hugo on the iPad in 5 min or less of google searching.

After spending an inordinate amount of time to try and figure out what the best hosting provider would be, I eventually said screw it and went with Netlify because it was good enough.

After signing up for Netlify (using github sso) I created a new site from a github repository through their very easy to navigate UI.

Netlify pulled the repo, ran Hugo to generate the files and published the site in about 2 min (at random-words-xxxxxxx.netlify.com)

People can see it, but how do they find it

Since I had the domain name already I just needed to hook up the DNS. If you want / need a new domain you can register through Netlify but their interface for searching domain names needs some work.

There are three options to DNS resolution for your new Netlify site:

  • Let Netlify handle it

This is a good option if you just bought the domain name and don’t have much configured but I have email through Office 365 for this and several other domains and didn’t feel like trying to figure out how to migrate those records.

  • Add a CName

If you just want to have a sub domain pointing at the Netlify site its super simple to just add a CName to your Netlify domain and call it a day.

However if you wanted to also have your apex domain (the part after www.) you cant use a CName. Most DNS providers though are offering ALIAS,AName, or CName Flattening which are different names for the same thing, a CName like entry that works for apex and sub domains alike.

My DNS host had that so I set it up and called it a day. Both rubberchickenparadise.com and www.rubberchickenparadise.com were quickly configured to my Netlify site.

  • The final way is the classic A record to an IP address.

Netlify has the IP’s to add as A records so that’s always an option but you lose some of the benefit of their CDN (cloudfront I believe). It’s not too terrible and if that’s all you got we make it work.

Adding new content

There are two main ways to add content to the site. The first is just open up a text editor and type up a markdown file then commit and push. Netlify will see the new commit on master, pull, rebuild, and publish with out any interaction. CI/CD at work.

The second option is to use a CMS of some sort which will put a slightly better GUI around your git repo and committing.

There are several options out there that all fill different needs so look around. I ended up adding Netlify CMS so I could type up posts when I didn’t have access to a git client.

The setup was simple, add a new folder static/admin then add an index.html and config.yml you can copy and paste from their site.

If you are using a local repo that is all you need (along with node to run the api that it uses, again), but we are using an iPad and cant host anything.

Setting up github oath is relatively simple to do, then you add the key and secret to your config.yml file and off you go. Because github is nice and secure you need something hosted for github to redirect to (read into the oath flow for more detail). Thankfully Netlify handles this as well.

After everything is setup just head to site/admin, login with your github credentials, and start typing up a post. (The user will need access to the repository so its not the greatest for multi author blog but it works for my needs).

It cant be that easy. Can it?

Thankfully it is. The only thing I was missing was a git client on my iPad. Everything else was just plain text files or extracting a zip file. For a really masochistic experience I guess I could try it on an iPhone with out a keyboard.

I was happily surprised at how much I could get done on the iPad. It wasn’t even that limiting. Having additional windows open to look things up, stare and compare, or copy and paste from the internet would have made things a little better but swapping back and forth wasn’t too bad. The biggest thing I missed was my dual 24” monitors. But being able to open up my 9.7” iPad and Bluetooth keyboard that easily fit in my bag and I can take anywhere makes up for the annoyance.

It’s was well worth the experiment and opens up another way to handle issues on the go.

What’s next

Next steps are to get comments on the blog. I have some ideas and they all revolve around using github comments or staticman. Again analysis paralysis. I am leaning towards github comments for the built in notifications and the fact that people would need a github account to comment. The github account introduces a barrier that should keep some bots out.

Recent posts

See more

Categories

About

An ADHD programmer writing about the random stuff they run into. Check the about page for more.