2/ Also, if your blog is not based on GitHub Pages, you’ll probably still learn a thing or two, so stay tuned!
4/ From ThreadReaderApp, we’ll publish it to our GitHub pages blog through a Micropub proxy.
What’s Micropub? Fair question. It’s a protocol designed to provide a standard API to post stuff to a blogging platform. w3.org/TR/micropub/
5/ As I’m a lazy developer, I refuse to start from scratch. Fortunately, there is a repo that already provides most of what we need so we’ll start by forking it 👉 github.com/lildude/microp…
6/ Once that’s settled, we’ll go ahead and make a few tweaks.
First, we’ll remove the /config.yml item from the .gitignore file.
7/ Next, we’ll create a /config.yml file in our fork with the contents from this gist 👉 gist.github.com/gdecaso/802fc6….
Please take a moment to go over it and replace the config with your blog specifics.
8/ Finally, we’ll replace the file /templates/note.liquid with the contents from this other gist 👉 gist.github.com/gdecaso/46e5b3…
By using published: false we give ourselves the chance to review our blog post and give it a proper title before it goes live.
9/ Now you can commit and push your changes to .gitignore, config.yml and templates/note.liquid.
Next stop: authentication.
10/ We’ll use indieauth.com as an authentication provider between ThreadReaderApp and our Micropub API.
IndieAuth can be used to authenticate not as a person, but rather as a domain.
11/ It will trust you own a domain foo.com if:
- your GitHub profile lists foo.com as your homepage
- your homepage has a link with rel=”me” to your GitHub profile
So let’s set that up!
12/ First, let’s point your GitHub profile to your blog’s URL.
13/ Next, we’ll edit our GitHub Page HTML to have a link to our GitHub profile.
If you already have an link to your GitHub profile, simply add a rel=”me” attribute to it.
Alternatively, add this to your HTML head, replacing with your GitHub username of course 👇
14/ There a few more changes that you’ll have to make to your blog’s HTML. 👇
15/ At this point we’re ready to test if the authentication works as expected.
Let’s visit IndieAuth.com, go to the “Try it!” section and enter your blog’s URL
16/ If all goes well, you should be see something like this. 👇
17/ Now, let’s deploy the Micropub server that we forked earlier on. In this tutorial I’ll be using Heroku, but you can use whichever cloud provider you want.
18/ Go ahead an create a new Heroku app and connect it to your micropub-github-pages fork.
19/ Let’s also enable the automatic deployments from the master branch
20/ We’ll create a GitHub token from github.com/settings/token… with ‘repo’ permissions only.
21/ Remember to store your token somewhere safe as GitHub will show it to you only once.
Now go ahead and put this token in your Heroku app env as GITHUB_ACCESS_TOKEN.
22/ Finally, we can deploy our Heroku app.
23/ With our Micropub service up and running, we need to once more modify our blog HTML to point it to the Micropub endpoint.
Replace the placeholder for your Heroku app name, but keep the rest of the URL as is 👇.
24/ We’re almost there. Login into threadreaderapp.com, go to My Authored Threads and configure your blog. It’s important to enter your blog URL and not the Micropub service URL.
25/ For a one-time only, ThreadReaderApp will need to be authorized via IndieAuth.
26/ Now, you’re ready to go. Next time you have a killer Twitter thread that you want to move to your GitHub pages blog, you can click on the ‘Publish N tweets to blog’ button on ThreadReaderApp.
27/ You’ll then have a new commit in your repo with the post draft. Simply add a title and remove the published: false from the front matter and you’re ready to roll!
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.