{"componentChunkName":"component---src-templates-post-template-js","path":"/2020/04/30/large-md-assets-to-cdn/","result":{"data":{"mdx":{"frontmatter":{"title":"Moving Large Markdown Assets to a CDN","date":"2020 April 30th"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2020-04-30T00:00:00.000Z\",\n  \"title\": \"Moving Large Markdown Assets to a CDN\",\n  \"tags\": [\"information\", \"markdown\"],\n  \"published\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I\\u2019ve spent a while today trying to bring down the size of this\\nproject, I have several posts that are particularly large so I wanted\\nto work out a way to reduce that.\"), mdx(\"p\", null, \"I\\u2019m an Ubuntu user and wanted to see if there was a way I could\\nidentify the larger files in the project.\"), mdx(\"p\", null, \"I found \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://serverfault.com/questions/200949/how-can-i-find-the-biggest-directories-in-unix-ubuntu\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"this SO question\"), \" which details using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"du\"), \" command (\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://ss64.com/bash/du.html\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Disk\\nUsage\"), \") which I used to list out the folder sizes. I put the following\\ncommand into my terminal:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"du --max-depth=7 /home/scott/repos/thelocalhost/posts/ | sort -n\\n\")), mdx(\"p\", null, \"It gave a similar output to this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"592   /thelocalhost/posts/2017/01/04/twitter-mctwitbot\\n2412    /thelocalhost/posts/2017/01/28/twitter-bot-bootstrap\\n38708   /thelocalhost/posts/2018/12/24/wsl-bootstrap-2019\\n\")), mdx(\"p\", null, \"The output was a bit noisier that what I\\u2019ve put here actually, lot\\u2019s\\nof output, but it helped identify large assets in folders. That\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wsl-bootstrap-2019\"), \" folder is nearly 40mb in size! \\uD83D\\uDE31\"), mdx(\"h2\", {\n    \"id\": \"markdown-file-structure\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#markdown-file-structure\",\n    \"aria-label\": \"markdown file structure permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Markdown file structure\"), mdx(\"p\", null, \"I have become quite particular about my Markdown as of late and like\\nto \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://thelocalhost.io/2020/04/18/add-tracking-links-to-your-markdown/#the-other-problem-for-me-anyway-\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"structure things in a certain\"), \" way. I started to do this with the\\nimages and gifs that are in here as well.\"), mdx(\"p\", null, \"So, as an example this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), \"![twitter logo](./twitter-bird.png)\\n\\nI got to doing this from finding it on [GitHub](https://github.com) I\\nthink I was looking for the Twitter icon in bootstrap whilst\\nworking...\\n\")), mdx(\"p\", null, \"Will become this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), \"![twitter logo]\\n\\nI got to doing this from finding it on [GitHub] I think I was looking\\nfor the Twitter icon in bootstrap whilst working...\\n\\n<!-- Links -->\\n\\n[github]: https://github.com\\n\\n<!-- Images -->\\n\\n[twitter logo]: ./twitter-bird.png\\n\")), mdx(\"p\", null, \"It looks like the second option here takes more space but the links at\\nthe bottom of the document aren\\u2019t visible and it makes the writing\\nexperience a lot easier to parse and manage when there are a lot of\\nlinks and assets in the document.\"), mdx(\"h2\", {\n    \"id\": \"cool-story-bro\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#cool-story-bro\",\n    \"aria-label\": \"cool story bro permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Cool story bro\"), mdx(\"p\", null, \"So I\\u2019m putting this here to document what I did, the assets in the\\nlarge folder I mentioned earlier have now been removed and added to\\nthe Now CDN in their own folder.\"), mdx(\"p\", null, \"So now at the end of each document, rather than have a load of local\\nfiles in the same folder they can all be references to the CDN.\"), mdx(\"p\", null, \"How do I add them to a CDN? I make a folder with the same(ish) folder\\nstructure then reference the CDN in place of the local images:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"images-on-now-sh/\\n\\u251C\\u2500 2020/\\n\\u251C\\u2500\\u2500 this-post-im-talking-about/\\n\\u2502   \\u251C\\u2500 image1.png\\n\\u2502   \\u251C\\u2500 image2.png\\n\\u2502   \\u2514\\u2500 image3.png\\n\")), mdx(\"p\", null, \"The whole reason I did this was so that if I wanted to I could run all\\nthese through a service like \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://images.weserv.nl/docs/#how-it-works\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Images.weserv.nl\"), \" where I could add the\\nURL to their service like so:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"[image1]: //images.weserv.nl/?url=https://images-on-now-sh/2020/this-post-im-talking-about/image1.png&w=300&h=300\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"I've spent a while today trying to bring down the size of this\nproject, I have several posts that are particularly large so I wanted\nto work…","tableOfContents":{"items":[{"url":"#markdown-file-structure","title":"Markdown file structure"},{"url":"#cool-story-bro","title":"Cool story bro"}]},"timeToRead":1,"fields":{"slug":"/2020/04/30/large-md-assets-to-cdn/","editLink":"https://github.com/spences10/thelocalhost/edit/authoring/posts/2020/04/30/large-md-assets-to-cdn/index.mdx"}}},"pageContext":{"slug":"/2020/04/30/large-md-assets-to-cdn/","previous":{"id":"2dad7b88-20e8-5fde-8d71-aeb030a63754","excerpt":"I have spent the last two days now questioning how and what I write\nafter reading a  post from Richard Haines . In his post he mentioned\nhow he stumbled across the Digital Garden idea. Richard's post led me to  Chris Biscardi's thoughts  on that and…","frontmatter":{"title":"A Digital Garden","date":"2020-04-27T00:00:00.000Z"},"fields":{"slug":"/2020/04/27/a-digital-garden/"}},"next":{"id":"bbc51806-c0c0-5312-a9db-3ab773ef0311","excerpt":"So, I followed the awesome video content and blog post from Leigh\nHalliday and I now have a way to generate Social Sharing cards for\nTwitter, Facebook and LinkedIn without having to add a cover image to\nevery post I do.","frontmatter":{"title":"Open Graph Images with Gatsby and Now","date":"2020-04-30T00:00:00.000Z"},"fields":{"slug":"/unpublished/serverless-og-images/"}}}}}