Alberto Luna's blog

Automating blog publishing

Current setup #

As I am trying to use Obsidian more I want to use it also to write blog entries, but at the moment the process of publishing any changes is completely manual:

Objective #

This is obviously too complicated and it will make me not want to write anything. So I want to automate as much as I can:

Moving content out of git #

To achieve this the first thing I need to do is to be able to build the site without having to manually put my files in the git repository.

I am already using remotely-sync plugin for Obsidian in order to access my vault in multiple devices. I am using the WebDAV integration to sync it with my Nextcloud instance. In theory I should be able to pull the content from Nextcloud instead of files in the repository.

For getting the content from Nextcloud I decided to use a simple Node.js script to download all the markdown files from the appropriate place in Nextcloud to the content folder in Eleventy. This is probably a bit hacky, but it is simpler than learning how collections work. Maybe in the future I will move to that method instead.

As I have spaces and exclamations in my notes file names I had to change the permalink computed property to be slugifyed. For some reason this broke the draft feature, so I had to take look how the draft feature worked in my boilerplate and I copy pasted the code in my computed property. This was not intuitive for me. I understand that what I'm doing has priority over the global computed properties, but it would be nice to be able to compose them, instead of a complete override.

Automating deployment #

To upload the site to Cloudflare pages I just configured wrangler and used the pages deploy subcommand and it was quite straight forward. I used an API key so I can have a command that works across environments without having to use wrangler login in every machine.

After uploading the site to Cloudflare pages I noticed something weird: when navigating to a blog post the page would be downloaded instead of navigated to. A file download with all the HTML was triggered, which was quite surprising as it was working before. I was even more confusing because when I previewed the site using Eleventy serve command it was working as expected. While investigating I noticed that Cloudflare was returning a Content-Type header with the value application/octet-stream instead of text/html; charset=utf-8. Then I noticed that if I added an extra / at the end of the url it would return html.

No slash at the end of the URL:

http --headers https://blog.albertoluna.es/blog/hello-blog
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
CF-Cache-Status: DYNAMIC
CF-RAY: 84360f3f8e545e5a-MAD
Cache-Control: public, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 11526
Content-Type: application/octet-stream
Date: Wed, 10 Jan 2024 15:47:37 GMT
ETag: "79c924f167e336352fcbfd697de1add2"
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=ZuXDseUrmqnoUIQbp5PtB93x%2B1UeDJfN8a5%2BCk9MmB99kS0WfaOwCDebICLYPTqUBJbe4yZOLTjnM3DQ23uj7dEVUtIj89XrtMEs30MlxAH4Mjy07E%2BrScC9B4%2F%2FgTRwJzJaXpXm"}],"group":"cf-nel","max_age":604800}
Server: cloudflare
Vary: Accept-Encoding
alt-svc: h3=":443"; ma=86400
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosnif

Slash at the end of the URL:

http --headers https://blog.albertoluna.es/blog/hello-blog/
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Age: 7180
CF-Cache-Status: DYNAMIC
CF-RAY: 84360f5f8b005e56-MAD
Cache-Control: public, s-maxage=604800
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Wed, 10 Jan 2024 15:47:42 GMT
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=gNFtBQEr76yu6c5yjlkb3Qxk2p4NZ0mCWk4tw58gwFb0n2Z1524A3KPI5IWkblzlzVqrKWO%2FqT%2B9pVhz6yUK4r1VY2vi8wjl2fgi%2Fm5StyukzpmsnY3ECOZM6l%2FFws9qVDVU9c%2F2"}],"group":"cf-nel","max_age":604800}
Server: cloudflare
Transfer-Encoding: chunked
Vary: Accept-Encoding
alt-svc: h3=":443"; ma=86400
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
x-robots-tag: noindex

Then I remembered that I ovewrote the permalink computed property and I noticed that I was not adding the extra / at the end. After adding it everything worked as expected.

It was still a bit weird as I have no idea how Cloudflare Pages determines which Content-Type to use.

End #

Now I have automated ways to get the content out of Obsidian and upload it to Cloudflare Pages, but I still have to manually execute the commands in a computer. For now it is good enough for me.