cachingjekyllgithub-pages
Missing styles on Jekyll website deployed on GitHub Pages (likely cache issues)
I am trying to deploy a Jekyll website for my Github project. The code for the website is found in the gh-pages branch.
When deployed on localhost, the page looks as intended but on Github Pages it is missing a lot of styles (and possibly other resources). The Console of the deployed website is filled with 404 errors.
Here is a screenshot of the website on localhost:
Here is a screenshot of the deployed website:
The errors in the console are as follows:
GET https://faeq-f.github.io/styles/Plugins.css net::ERR_ABORTED 404 (Not Found)
Quokka/:56
GET https://faeq-f.github.io/styles/FAQ.css net::ERR_ABORTED 404 (Not Found)
Quokka/:59
GET https://faeq-f.github.io/styles/Documentation.css net::ERR_ABORTED 404 (Not Found)
Quokka/:398
GET https://faeq-f.github.io/scripts/Gallery.js net::ERR_ABORTED 404 (Not Found)
Quokka/:402
GET https://faeq-f.github.io/scripts/Docs.js net::ERR_ABORTED 404 (Not Found)
header.js:51 Uncaught TypeError: Cannot read properties of null (reading 'getContext')
at header.js:51:20
I have previously deployed a similar site here on Github Pages without any issues so this issue seems pretty random.
While searching online, I found that cache might be the culprit. However, clearing the browser cache does not help. An answer I found suggested it was due to GitHub's DNS cache and as a result I started to use links like the following:
<link rel="stylesheet" href="../styles/DarkTheme.css?{{site.time | date: '%s%N'}}" />
This too did not help. I have tried other solutions like changing the GitHub-pages branch and un-publishing the site but nothing has worked.
Edit (5 Jan 2023) :
I have tried using a _includes file which has absolute links to the styles on raw.githubusercontent.com but this does not work as well.
Thanks in advance for any help.
Solution
Your problem is mainly a file path issue. When your jekyll website is bundled, the file directory structure is not the same as your current structure. Take a look at the _site folder generated to see what the final structure looks like:
_layouts/home.html becomes the _sites/index.html.
In _layouts/home.html, to reference a stylesheet:
<link rel="stylesheet" href="../styles/About.css" /> <!--WRONG-->
<link rel="stylesheet" href="styles/About.css" /> <!--Correct-->
Therefore the correct home.html file is:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quokka</title>
<meta
name="description"
content="A customizable keystroke launcher with plugins"
/>
<link rel="icon" type="image/x-icon" href="Resources/SearchIcon.png" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--Scroll library-->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="styles/Main.css" />
<link rel="stylesheet" href="styles/About.css" />
<link rel="stylesheet" href="styles/Plugins.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/home.css" />
<link rel="stylesheet" href="styles/gradButtons.css" />
<link rel="stylesheet" href="styles/DarkTheme.css" />
<link rel="stylesheet" href="styles/FAQ.css" />
<link rel="stylesheet" href="styles/Documentation.css" />
<!--Used to fix github pages dns cache issues-->
</head>
<body>
<div id="top">
<p style="color: transparent">.</p>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
<a href="#">upgrade your browser</a> to improve your experience.
</p>
<![endif]-->
<header id="header" class="hidemee">
<nav>
<ul class="navbar">
<li class="headerLink">
<a href="#top" onclick="lenis.scrollTo('#top')">
<span class="headerText">Home</span>
</a>
</li>
<li class="headerLink">
<a href="#About" onclick="lenis.scrollTo('#About')">
<span class="headerText">About</span>
</a>
</li>
<li class="headerLink">
<a href="#Plugins" onclick="lenis.scrollTo('#Plugins')">
<span class="headerText">Plugins</span>
</a>
</li>
<li class="headerLink">
<a href="#FAQ" onclick="lenis.scrollTo('#FAQ')">
<span class="headerText">FAQ</span>
</a>
</li>
<li class="headerLink right-li connectButton">
<a href="#Documentation" onclick="lenis.scrollTo('#Documentation')">
<span class="headerText">Documentation</span>
</a>
</li>
</ul>
</nav>
</header>
<div id="HomeView" class="hidemee">
<p id="title">
<strong>Quokka</strong
><br style="display: block; content: ''; margin-top: -4%" />
<span style="font-size: medium; font-weight: bold"
>A customizable keystroke launcher with plugins<br
/></span>
<span style="display: inline-block">
<a href="https://github.com/Faeq-F/Quokka/releases/latest">
<button class="button-64" role="button">
<span class="text">Download Latest Release</span>
</button>
</a>
</span>
<span style="display: inline-block">
<a href="https://github.com/Faeq-F/Quokka">
<button class="button-64" role="button">
<span class="text">View Repository</span>
</button>
</a> </span
><br />
<span style="position: inherit">
<input
id="themeSlider"
class="slider__input"
type="range"
role="slider"
value="288"
min="0"
max="360"
id="hue"
/>
<input
id="themeSwitch"
class="switch__input"
type="checkbox"
role="switch"
/>
</span>
</p>
</div>
<img
src="Resources/scrollDown.gif"
id="HomeScrollImg"
/>
<div id="About">
<div class="ag-timeline_title-box" data-aos="fade-down">
<div class="ag-timeline_tagline">What is this?</div>
<div class="ag-timeline_title">About Quokka</div>
</div>
<div class="card aboutCard" data-aos="fade-down">
<p>
Quokka is an extremely customizable keystroke launcher for Windows.
<br />
<br />
Quokka has a plugin-architecture, open to third parties. Through this,
Quokka will have a large number of features, like color conversion,
translation, web search, Unicode character search, and much more!
Please see the
<a href="#Documentation" onclick="lenis.scrollTo('#Documentation')"
>Documentation</a
>
for all (official) planned plugins. If you do not see a plugin you
wish to have, maybe start a discussion over
<a href="https://github.com/Faeq-F/Quokka/discussions">here</a>, or
create it yourself.
<br />
<br />
Quokka was designed to replace the need for your ugly start menu, task
bar and any other clunky applications you currently use to add
functionality to your system. For example, it can replace your start
menu by allowing you to launch all of your desired applications and
shortcuts, and replace windows search through plugins like Everything,
calculator, wikipedia, etc.
<br />
</p>
<br />
<hr />
<br />
<div>
<a href="https://github.com">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=GitHub&color=181717&logo=GitHub&logoColor=FFFFFF"
alt="Github"
/>
</a>
<a href="https://en.wikipedia.org/wiki/Unified_Modeling_Language">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=UML&color=FABD14&logo=uml&logoColor=FFFFFF"
alt="UML"
/>
</a>
<a href="https://dotnet.microsoft.com/en-us/">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=.NET&color=512BD4&logo=dotnet&logoColor=FFFFFF"
alt="dotnet"
/>
</a>
<a
href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/?view=netdesktop-7.0"
>
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=WPF&color=0078D4&logo=windows&logoColor=FFFFFF"
alt="WPF"
/>
</a>
<a href="https://learn.microsoft.com/en-us/dotnet/csharp/">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=C%23&color=512BD4&logo=csharp&logoColor=FFFFFF"
alt="C#"
/>
</a>
<a
href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-7.0"
>
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=xaml&color=0C54C2&logo=xaml&logoColor=FFFFFF"
alt="xaml"
/>
</a>
<a href="https://docs.microsoft.com/en-gb/powershell/">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=PowerShell&color=5391FE&logo=PowerShell&logoColor=FFFFFF"
alt="Powershell"
/>
</a>
<a href="https://www.json.org/json-en.html">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=JSON&color=000000&logo=JSON&logoColor=FFFFFF"
alt="JSON"
/>
</a>
<a href="https://code.visualstudio.com/">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=Visual Studio Code&color=007ACC&logo=Visual Studio Code&logoColor=FFFFFF"
alt="visual studio code"
/>
</a>
<a href="https://visualstudio.microsoft.com">
<img
align="center"
margin="10px auto"
src="https://img.shields.io/static/v1?label=&message=Visual%20Studio&color=5C2D91&logo=visualstudio&logoColor=FFFFFF"
alt="visualstudio"
/>
</a>
</div>
</div>
</div>
<div id="Plugins">
<section>
<aside>
<div class="ag-timeline_title-box" data-aos="fade-up-right">
<div class="ag-timeline_tagline">What features?</div>
<div class="ag-timeline_title">Plugins</div>
</div>
<div class="card" data-aos="fade-up-right">
<p class="PortfolioWorkHeader" style="font-size: 1.17em">
Screenshots for selected plugin:
</p>
<div id="PluginScreenshotsGrid" data-lenis-prevent></div>
<img
src="Resources/scrollDown.gif"
id="PortfolioScrollImg"
/>
</div>
</aside>
<div class="content" data-aos="fade-up-left">
<p class="PortfolioWorkHeader">Recognized plugins:</p>
<div style="text-align: center">
<div class="ProjectCard">
<p class="PluginName">Installed Apps</p>
<p class="PluginDesc">
Allows the launching of apps installed on the system
</p>
<div class="PluginButtonGroup">
<a
class="SiteButton"
title="Visit site"
href="https://github.com/Faeq-F/Quokka"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
width="20"
viewBox="0 0 640 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="var(--primary)"
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
/>
</svg>
</a>
<p class="DeveloperName">Developed by Faeq</p>
</div>
</div>
<div class="ProjectCard">
<p class="PluginName">Portable Apps</p>
<p class="PluginDesc">
Allows the launching of portable apps<br />(apps not installed
on the system)
</p>
<div class="PluginButtonGroup">
<a
class="SiteButton"
title="Visit site"
href="https://github.com/Faeq-F/Quokka"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
width="20"
viewBox="0 0 640 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="var(--primary)"
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
/>
</svg>
</a>
<p class="DeveloperName">Developed by Faeq</p>
</div>
</div>
<div class="ProjectCard">
<p class="PluginName">Everything</p>
<p class="PluginDesc">
Allows searching through files and folders on the computer -
requires the
<a
href="https://www.voidtools.com/"
style="font-style: oblique"
>
Everything
</a>
service to be running
</p>
<div class="PluginButtonGroup">
<a
class="SiteButton"
title="Visit site"
href="https://github.com/Faeq-F/Quokka"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
width="20"
viewBox="0 0 640 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="var(--primary)"
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
/>
</svg>
</a>
<p class="DeveloperName">Developed by Faeq</p>
</div>
</div>
<div class="ProjectCard">
<p class="PluginName">Power Commands</p>
<p class="PluginDesc">
Allows the execution of power settings like logout, lock, sleep,
shutdown, etc.
</p>
<div class="PluginButtonGroup">
<a
class="SiteButton"
title="Visit site"
href="https://github.com/Faeq-F/Quokka"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
width="20"
viewBox="0 0 640 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="var(--primary)"
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
/>
</svg>
</a>
<p class="DeveloperName">Developed by Faeq</p>
</div>
</div>
<div class="ProjectCard">
<p class="PluginName">Calculator</p>
<p class="PluginDesc">
Allows the calculation of mathematical expressions
</p>
<div class="PluginButtonGroup">
<a
class="SiteButton"
title="Visit site"
href="https://github.com/Faeq-F/Quokka"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
width="20"
viewBox="0 0 640 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="var(--primary)"
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
/>
</svg>
</a>
<p class="DeveloperName">Developed by Faeq</p>
</div>
</div>
<div class="ProjectCard">
<p class="PluginName">English Dictionary</p>
<p class="PluginDesc">
Allows the viewing of denotations for words in the English (US)
language
</p>
<div class="PluginButtonGroup">
<a
class="SiteButton"
title="Visit site"
href="https://github.com/Faeq-F/Quokka"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
width="20"
viewBox="0 0 640 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="var(--primary)"
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
/>
</svg>
</a>
<p class="DeveloperName">Developed by Faeq</p>
</div>
</div>
<p style="color: var(--primary)">Please support all developers!</p>
</div>
<h2 style="color: transparent">Title 1</h2>
<h4 style="color: transparent">Subheading</h4>
<p style="color: transparent">Text</p>
<h4 style="color: transparent">Subheading</h4>
<p style="color: transparent">Text</p>
<h4 style="color: transparent">Subheading</h4>
<p style="color: transparent">Text</p>
</div>
</section>
</div>
<div id="FAQ">
<div class="ag-timeline_title-box" data-aos="fade-down">
<div class="ag-timeline_tagline">I have a question!</div>
<div class="ag-timeline_title">Frequently asked Questions</div>
</div>
<div class="card aboutCard" data-aos="fade-down">
<p>
Quokka is an extremely customizable keystroke launcher for Windows. It
has a plugin-architecture, open to third parties.
</p>
</div>
</div>
<footer id="Documentation">
<div id="DocumentationCard" class="ContactCard" data-aos="fade-down">
<div id="container-stars" style="top: 0; left: 0">
<div id="stars"></div>
</div>
<div class="ag-timeline_title-box ConnectTitleBox">
<div
class="ag-timeline_tagline ConnectTagline"
style="font-weight: bold; font-size: x-large !important"
>
<div id="DocsHeader">
<button id="FillPageButton" title="Fill Page"></button>
<button id="FullscreenButton" title="Fullscreen"></button>
<button id="DocsHeaderButton">Documentation</button>
</div>
<div id="DocsNav" data-lenis-prevent>
<ul>
<li><button>Installation</button></li>
<li><button>How to use</button></li>
<ul>
<li><button>Tray task</button></li>
<li><button>Plugins</button></li>
<li><button>Special commands</button></li>
</ul>
<li><button>Settings</button></li>
<ul>
<li><button>Themes</button></li>
<li><button>Defaults</button></li>
</ul>
<li><button>Building the app</button></li>
<li><button>Writing a plugin</button></li>
<ul>
<li><button>Creating a new item type</button></li>
<li><button>Creating a context pane</button></li>
<li><button>Creating the plugin</button></li>
</ul>
<li><button>FAQ by Developers</button></li>
</ul>
</div>
</div>
<div id="DocsContent" data-lenis-prevent></div>
</div>
</div>
</footer>
<div id="bottom">
<p style="color: transparent">.</p>
</div>
<div class="cursor"></div>
<div class="cursor2"></div>
<script src="scripts/cursor.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="scripts/Gallery.js"></script>
<script src="scripts/header.js"></script>
<script src="scripts/ScrollFade.js"></script>
<script src="scripts/HueRotate.js"></script>
<script src="scripts/Docs.js"></script>
<script>
function themeChangeHandler() {
var queryString = "?reload=" + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
document
.querySelector("#themeSwitch")
.addEventListener("change", themeChangeHandler);
</script>
</body>
</html>
You also had a missing file and a wrongly named file as well. Double check your file names (be careful with casing).
After fixing these issues, your website will work fine both on localhost and on Github Pages.
Here's a repository that I set up to show your website working correctly. The corresponding website is at: https://creme332.github.io/quokka-test/:
There are still some styling issues that you will have to fix but there are no 404 errors in console.
- How to prevent autofill of previous data in ASP:Textbox?
- If cache invalidation happens every time memory mappings change, why not opt for VIVT?
- What happens if an invalid address is prefetched?
- WP Super Cache cannot tell logged-in users properly (Nginx)
- How and when to align to cache line size?
- Performance comparison of using Redis hashes vs many keys
- Flutter web service worker cache not updating immediately despite new version in flutter_bootstrap_js
- Make @lru_cache ignore some of the function arguments
- HIbernate Entity Manager: How to cache queries?
- Next static page on Vercel first load is not cached
- Delete browsers cache
- How can I invalidate Google Cloud CDN cache from my express server?
- Why Integer class caching values in the range -128 to 127?
- Can I read a CPU x86 flag to determine if prefetched data has arrived in the L1 cache?
- What's the point of cache clean _and_ invalidate in ARM Cortex processors?
- TYPO3 News IMG_RESOURCE gives error on first call for sys_category images selected with overwriteDemand
- C - fastest method to swap two memory blocks of equal size?
- What is the proper way to tell the browser not to cache?
- Stop Chrome Caching My JS Files
- Python functools lru_cache with instance methods: release object
- Set cache to files in Firebase Storage
- Cache invalidation using the query-string, bad practice?
- Flask cache memoize not working with flask restful resources
- base64 Image Cached?
- How do I clear a System.Runtime.Caching.MemoryCache
- How do I return 304 Unmodified status with Express.js?
- How can I get the memory distance in bytes between any two objects (if this measurement exists in a meaningful way)?
- Why does cache use Most Recently Used (MRU) algorithm as evict policy?
- How can I deploy cache when the order of arguments doesn't matter?
- How do I tell Spring cache not to cache null value in @Cacheable annotation