Font and image files in static folder not showing up on Github Pages

support
1

Hi,

I am using the PaperMod theme and have added my images and font files to the static folder. When i run the site locally both the custom font and the images show but not on my github pages preview, Chantal Partamian my repo is GitHub - rupalimo/papemod-01 · GitHub

My custom font rules are in the assets/css/core/theme-vars.css with the rules

@font-face {
font-family: 'crimson';
src: url('/fonts/CrimsonText-Regular.ttf') format('truetype');
font-style: normal;
}

@font-face {
font-family: 'crimson-bld';
src: url('/fonts/CrimsonText-SemiBold.ttf') format('truetype');
font-style: bold;
}

I have included images on my md files using ![](/home.webp)

my baseURL is https://rupalimo.github.io/

I am assuming i’ve done something wrong with linking the file paths but not sure as i’ve tried removing the backslash / and adding in the project directory to my baseURL. Should i move the files to where the .md and .css files are?

Thank you in advance

2

View the console in your browser’s dev tools to see the detailed 404 errors, then…

First, to reproduce the problem locally, set the baseURL in your project configuration to match the live site:

baseURL: https://rupalimo.github.io/papemod-01/

Second, fix these warnings:

WARN  "/home/jmooring/temp/papemod-01/content/about.md:1:1": duplicate menu entry with identifier "About" in menu "header"
WARN  "/home/jmooring/temp/papemod-01/content/katsakh.md:1:1": duplicate menu entry with identifier "KATSAKH Archives" in menu "header"
WARN  "/home/jmooring/temp/papemod-01/content/press.md:1:1": duplicate menu entry with identifier "Press" in menu "header"
WARN  "/home/jmooring/temp/papemod-01/content/publications.md:1:1": duplicate menu entry with identifier "Publications" in menu "header"

You have defined the menu entries in both your project configuration and in your front matter. Do one or the other, not both.

Third, because you are serving your site from a subdirectory (papemod-01), CSS property declarations such as this will not work because the url value is relative to the server root, not the site root:

src: url('/fonts/scorpius.otf') format('opentype');

Change them to something like this:

```text
src: url('/papemod-01/fonts/scorpius.otf') format('opentype');

Fourth, in your home page content you have this image markup:

![](/home.webp)

That won’t work for the same reason the CSS doesn’t work. Without getting into the details, add this to bottom of your project configuration:

markup:
  goldmark:
    renderHooks:
      image:
        useEmbedded: always
      link:
        useEmbedded: always
module:
  mounts:
    - source: assets
      target: assets
    - source: static
      target: assets

Fifth, remove this line from assets/css/core/theme-vars.css:

@import '../extended/custom_fonts.css';

That file is already bundled. See /themes/PaperMod/layouts/_partials/head.html.

3

Thank you for your prompt and detailed response-- all of the edits you outlined worked! I really appreciate it!