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.

This article is also available in 简体中文.

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)
  • font.im (fontim)
  • ustc.edu.cn (ustc)
• FontAwesome Font Icon CDNs
  • FontAwesome 5 (fontawesome)
  • loli.net (loli)

The default CDN settings are:

_config.icarus.yml

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

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

https://unpkg.com/d3@5.7.0/dist/d3.min.js

can be generalized to this:

UNPKG CDN URL Template

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

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js

while has the following URL on UNPKG:

UNPKG CDN URL Example

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

[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

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

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

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.