One of my side projects was trying to conduct webcam capture and making a video stream all client side. Turns out prior to the MediaRecorder API this was done primarily server side? Before full client side support everything was done using WebRTC which from my research requires server side. Which would not fit my requirements. So anywho, I'm an adventurous person, lets go. I develop a sample app using the MediaRecorder API. I primarily use Chrome as a browser so I did all my development based upon Chrome. As soon as I get a prototype I figure it's time to make sure there's cross-browser compatibility. Edge (because it's now based on Chrome engine) worked well, no problems. Then using Safari on my iMac nothing works. So I launch the developer tools and there is no MediaRecorder API, it's undefined. Now mind you, I'm new to web development but I've known there's been some cross-compatability issues, which is why there are polyfills. But this is different. After some research I found this blog post from the WebKit website. Cool hopefully it'll be supported soon? It says that it's in the iOS 14.3 Beta... Wait I didn't even think about mobile.

Now, I borrowed my parents android tablet to test my prototype... it worked. The MediaRecorder API was supported in Chrome on Android. Cool lets try Apple. I tried Safari though I knew it wasn't going to work. It didn't. Though I can turn it on in the Technology Preview Section.... but I wouldn't want my users to have to do that. Then I used Chrome on iOS..... naively I expected this to work. It also didn't. I was taken aback. Time to research again. Turns out Apple forces all browsers on their platform to use the same underlying engine, of which is also based upon WebKit. Great.

Now here's the kicker for me, I have a side project and prototype that I wanted to release and now I'm faced with either dropping support entirely for Apple Safari on desktop and all.. yes all! iOS devices, or at least waiting until the MediaRecorder API is supported and established. Which is who knows when. I can implement a server side capability to bypass this issue, but I don't want to do that and have to manage another thing. I did find an audio polyfill for this, but it didn't support video....

All in all, why does it take so long for Apple to support API's that seem like they should be standard? I already know a lot of the answers....

But, if anyone has any suggestions on being able to accomplish MediaRecorder capabilities without the API please let me know. Or else my side project will just gather dust thanks to Apple.

P.S. I'm an avid Apple user.... and an avid Linux User. I used both my iMac and a laptop running Arch Linux. This blog was written on my Arch machine...

I've always liked the Ghost Blogging platform since it was released years ago. I like it's editor, CMS, among other things. However, I don't like that I can't host it as a static site (SS). I want to be able to use the like of Netlify, Github/Gitlab pages or any other static hosting provider. I started googling and found Ned's blog post. He explained his requirements which was exactly what I was looking for. He didn't explain everything, but did a good job at the overview, and so I did some of my own edits.

Note: SS version of ghost does remove some features, so check Ned's list to make sure you don't need them. I didn't because I was going for simple, and I mean really simple.

Basically the pipeline for doing a Static Site from Ghost is as follows

1. Setup a local instance of Ghost (I'm using a container w/ podman
2. Create the site per your wants
3. Create a Static Site from the local ghost installation
4. Host the static site (We'll go over using Github pages, but you could use anything else)

Setting up local Ghost installation

I'm using podman so.... I can get up and running with one command....

podman run -d --name ghost -e url=https://eli-xciv.github.io -p 8080:2368 ghost

Now I can point my browser to https://eli-xciv.github.io/ghost

Creating your site

Checkout the Ghost docs to set up your site. I'm doing a simple blog using the Attila Theme, modified of course.

Creating the static site

Now this is the bread and butter. There's a nifty npm package called ghost-static-site-generator.

(sudo) npm install -g ghost-static-site-generator

That command will install a utility called gssg.

Now gssg will basically go to our local ghost installation and pull down a static version of the site.

Hosting + Git

I'm using github, follow their guide to create a Github pages repo.

git clone <your_pages_repo>

** Edit the Settings for your repo to deploy the /docs folder from your repo

Now we're going to get a static site into /docs

gssg ---domain "https://eli-xciv.github.io" --url "https://eli-xciv.github.io" --dest docs

Now all you need to do is to commit and push the repo to Github and it will publish your static site.

git add . ; git commit -m "First commit of Ghost Static Site"; git push -u origin master

Voila! in a second or so, your static site is hosted on github.io!

Extras

In my repo I've created a script under bin/migrate.sh that will run the migration, and commit it to github.

#!/bin/bash
printf -v date '%(%Y-%m-%d %H:%M:%S)T\n' -1

gssg ---domain "https://eli-xciv.github.io" --url "https://eli-xciv.github.io" --dest docs

git add .

git commit -m "Blog Update: $date"

git push