Use absolute URLs for assets

Author: ang-zeyu

packages/core/src/Page/index.js

@@ -141,11 +141,8 @@ class Page {
     if (this.siteConfig.titleSuffix) {
       title = (title ? title + TITLE_SUFFIX_SEPARATOR : '') + this.siteConfig.titleSuffix;
     }
-    // construct temporary asset object with only POSIX-style paths
-    const asset = {};
-    Object.entries(this.asset).forEach(([key, value]) => {
-      asset[key] = _.isString(value) ? fsUtil.ensurePosix(value) : value;
-    });
+
+    const asset = { ...this.asset };
     return {
       asset,
       baseUrl: this.siteConfig.baseUrl,

packages/core/src/Site/index.js

@@ -281,52 +281,38 @@ class Site {
     const sourcePath = path.join(this.rootPath, config.pageSrc);
     const resultPath = path.join(this.outputPath, fsUtil.setExtension(config.pageSrc, '.html'));
 
+    const baseRelativePath = path.posix.join(
+      this.siteConfig.baseUrl || '/', TEMPLATE_SITE_ASSET_FOLDER_NAME,
+    );
+
     const pageConfig = new PageConfig({
       asset: {
-        bootstrap: path.relative(path.dirname(resultPath),
-                                 path.join(this.siteAssetsDestPath, 'css', 'bootstrap.min.css')),
+        bootstrap: path.posix.join(baseRelativePath, 'css', 'bootstrap.min.css'),
         externalScripts: _.union(this.siteConfig.externalScripts, config.externalScripts),
-        fontAwesome: path.relative(path.dirname(resultPath),
-                                   path.join(this.siteAssetsDestPath, 'fontawesome', 'css', 'all.min.css')),
-        glyphicons: path.relative(path.dirname(resultPath),
-                                  path.join(this.siteAssetsDestPath, 'glyphicons', 'css',
-                                            'bootstrap-glyphicons.min.css')),
-        octicons: path.relative(path.dirname(resultPath),
-                                path.join(this.siteAssetsDestPath, 'css', 'octicons.css')),
-        materialIcons: path.relative(path.dirname(resultPath),
-                                     path.join(this.siteAssetsDestPath,
-                                               'material-icons',
-                                               'material-icons.css')),
-        highlight: path.relative(path.dirname(resultPath),
-                                 path.join(this.siteAssetsDestPath, 'css',
-                                           HIGHLIGHT_ASSETS[this.siteConfig.style.codeTheme])),
-        markBindCss: path.relative(path.dirname(resultPath),
-                                   path.join(this.siteAssetsDestPath, 'css', 'markbind.min.css')),
-        markBindJs: path.relative(path.dirname(resultPath),
-                                  path.join(this.siteAssetsDestPath, 'js', 'markbind.min.js')),
-        pageNavCss: path.relative(path.dirname(resultPath),
-                                  path.join(this.siteAssetsDestPath, 'css', 'page-nav.css')),
-        siteNavCss: path.relative(path.dirname(resultPath),
-                                  path.join(this.siteAssetsDestPath, 'css', 'site-nav.css')),
-        bootstrapUtilityJs: path.relative(path.dirname(resultPath),
-                                          path.join(this.siteAssetsDestPath, 'js',
-                                                    'bootstrap-utility.min.js')),
-        polyfillJs: path.relative(path.dirname(resultPath),
-                                  path.join(this.siteAssetsDestPath, 'js', 'polyfill.min.js')),
+        fontAwesome: path.posix.join(baseRelativePath, 'fontawesome', 'css', 'all.min.css'),
+        glyphicons: path.posix.join(baseRelativePath, 'glyphicons', 'css', 'bootstrap-glyphicons.min.css'),
+        octicons: path.posix.join(baseRelativePath, 'css', 'octicons.css'),
+        materialIcons: path.posix.join(baseRelativePath, 'material-icons', 'material-icons.css'),
+        highlight: path.posix.join(baseRelativePath, 'css',
+                                   HIGHLIGHT_ASSETS[this.siteConfig.style.codeTheme]),
+        markBindCss: path.posix.join(baseRelativePath, 'css', 'markbind.min.css'),
+        markBindJs: path.posix.join(baseRelativePath, 'js', 'markbind.min.js'),
+        pageNavCss: path.posix.join(baseRelativePath, 'css', 'page-nav.css'),
+        siteNavCss: path.posix.join(baseRelativePath, 'css', 'site-nav.css'),
+        bootstrapUtilityJs: path.posix.join(baseRelativePath, 'js', 'bootstrap-utility.min.js'),
+        polyfillJs: path.posix.join(baseRelativePath, 'js', 'polyfill.min.js'),
         // We use development Vue when MarkBind is served in 'dev' mode so that hydration issues are reported
         vue: this.dev
           ? 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'
-          : path.relative(path.dirname(resultPath), path.join(this.siteAssetsDestPath, 'js', 'vue.min.js')),
-        jQuery: path.relative(path.dirname(resultPath),
-                              path.join(this.siteAssetsDestPath, 'js', 'jquery.min.js')),
+          : path.posix.join(baseRelativePath, 'js', 'vue.min.js'),
+        jQuery: path.posix.join(baseRelativePath, 'js', 'jquery.min.js'),
       },
       baseUrlMap: this.baseUrlMap,
       dev: this.dev,
       faviconUrl: config.faviconUrl,
       frontmatterOverride: config.frontmatter,
       layout: config.layout,
-      layoutsAssetPath: path.relative(path.dirname(resultPath),
-                                      path.join(this.siteAssetsDestPath, LAYOUT_SITE_FOLDER_NAME)),
+      layoutsAssetPath: path.posix.join(baseRelativePath, LAYOUT_SITE_FOLDER_NAME),
       pluginManager: this.pluginManager,
       resultPath,
       rootPath: this.rootPath,