The Localhost

Modern web development guides hints and tips.

Moving Large Markdown Assets to a CDN


I’ve spent a while today trying to bring down the size of this project, I have several posts that are particularly large so I wanted to work out a way to reduce that.

I’m an Ubuntu user and wanted to see if there was a way I could identify the larger files in the project.

I found this SO question which details using the du command (Disk Usage) which I used to list out the folder sizes. I put the following command into my terminal:

1du --max-depth=7 /home/scott/repos/thelocalhost/posts/ | sort -n

It gave a similar output to this:

1592 /thelocalhost/posts/2017/01/04/twitter-mctwitbot
22412 /thelocalhost/posts/2017/01/28/twitter-bot-bootstrap
338708 /thelocalhost/posts/2018/12/24/wsl-bootstrap-2019

The output was a bit noisier that what I’ve put here actually, lot’s of output, but it helped identify large assets in folders. That wsl-bootstrap-2019 folder is nearly 40mb in size! 😱

Markdown file structure

I have become quite particular about my Markdown as of late and like to structure things in a certain way. I started to do this with the images and gifs that are in here as well.

So, as an example this:

1![twitter logo](./twitter-bird.png)
2
3I got to doing this from finding it on [GitHub](https://github.com) I
4think I was looking for the Twitter icon in bootstrap whilst
5working...

Will become this:

1![twitter logo]
2
3I got to doing this from finding it on [GitHub] I think I was looking
4for the Twitter icon in bootstrap whilst working...
5
6<!-- Links -->
7
8[github]: https://github.com
9
10<!-- Images -->
11
12[twitter logo]: ./twitter-bird.png

It looks like the second option here takes more space but the links at the bottom of the document aren’t visible and it makes the writing experience a lot easier to parse and manage when there are a lot of links and assets in the document.

Cool story bro

So I’m putting this here to document what I did, the assets in the large folder I mentioned earlier have now been removed and added to the Now CDN in their own folder.

So now at the end of each document, rather than have a load of local files in the same folder they can all be references to the CDN.

How do I add them to a CDN? I make a folder with the same(ish) folder structure then reference the CDN in place of the local images:

1images-on-now-sh/
2├─ 2020/
3├── this-post-im-talking-about/
4│ ├─ image1.png
5│ ├─ image2.png
6│ └─ image3.png

The whole reason I did this was so that if I wanted to I could run all these through a service like Images.weserv.nl where I could add the URL to their service like so:

1[image1]: //images.weserv.nl/?url=https://images-on-now-sh/2020/this-post-im-talking-about/image1.png&w=300&h=300
A Digital Garden...
Open Graph Images with Gatsby and Now... →