Icarus User Guide - CDN Providers

Choosing the right CDN providers can significantly reduce the page loading time of your viewers. Icarus lets you pick among several built-in CDN provider options for serving third-party libraries and asset files used by Icarus.

The following CDN functionalities are provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported providers and their configuration details.

Built-in CDN providers

Currently, Icarus offers the following built-in CDN providers:

  • CDNs for JavaScript Libraries
    • cdnjs.com (cdnjs)
    • jsDelivr (jsdelivr)
    • UNPKG (unpkg)
    • loli.net (loli)
  • CDNs for Web Fonts
    • Google Fonts (google)
    • loli.net (loli)
  • FontAwesome Font Icon CDNs
    • FontAwesome 5 (fontawesome)
    • loli.net (loli)

The default CDN settings are:

_config.icarus.yml
1
2
3
4
providers:
cdn: jsdelivr
fontcdn: google
iconcdn: fontawesome

Custom CDN providers

Additionally, you can also custom CDN providers via URL templates. The template formats for each type of CDN provider are listed below:

CDNs for JavaScript Libraries

CDN URL Template
1
https://some.cdn.domain.name/${package}/${version}/${filename}

You need to replace the actual package name, version of the package, and relative file path with ${package}, ${version}, and ${filename} placeholders. For example, a JavaScript library with the following URL:

UNPKG CDN URL Example
1
https://unpkg.com/d3@5.7.0/dist/d3.min.js

can be generalized to this:

UNPKG CDN URL Template
1
https://unpkg.com/${package}@${version}/${filename}

Some CDN providers may adopt different URL schemes. For example, the moment.js library has the URL like this on CDN.js:

CDN.js CDN URL Example
1
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js

while has the following URL on UNPKG:

UNPKG CDN URL Example
1
https://unpkg.com/moment@2.22.2/min/moment.min.js

Therefore, you should be aware of the URL format of your custom CDN provider. By default, Icarus will try to pass in the parameter using npm package name and relative file path (e.g., moment@2.22.2/min/moment.min.js). This npm scheme is used by jsDelivr and UNPKG. Otherwise, if you are using a CDN.js like provider, please prepend [cdnjs] to its URL template:

CDN.js-style URL Template
1
[cdnjs]https://some.cdn.domain.name/${package}/${version}/${filename}

CDNs for Web Fonts

You can pass in the URL of a Google Font mirror or compatible webfont CDN. Icarus depends on the Ubuntu, Oxanium, and Source Code Pro fonts, so make sure your CDN provides those. The URL template should have two placeholders for font type (icon or font) and fontname:

Webfont CDN URL Template
1
https://some.google.font.mirror/${type}?family=${fontname}

FontAwesome Font Icon CDNs

You can pass in the URL to a custom FontAwesome CDN. No placeholders are required. The provided custom CDN should at lease have FontAwesome 5 icons as some of them are used in this theme.

Icon Font CDN URL Template
1
https://custom.fontawesome.mirror/some.stylesheet.css

All of the above should be put in the providers section of the theme configurations:

_config.icarus.yml
1
2
3
4
providers:
cdn: 'https://some.cdn.domain.name/${package}/${version}/${filename}'
fontcdn: 'https://some.google.font.mirror/${type}?family=${fontname}'
iconcdn: 'https://custom.fontawesome.mirror/some.stylesheet.css'

CDN helper functions

Three helper functions have been defined to help developers include third-party libraries easily with custom CDN support. You can check them out at ppoffice/hexo-component-inferno.

Something wrong with this article? Click here to submit your revision.
Author

PPOffice

Posted on

2017-01-31

Licensed under

CC BY-NC-SA 4.0

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×