A link pointing to /awesome-article on localhost needs to lead to /my-project/awesome-article in production. Github Pages hosts your site at a location equal to the repository nameĮverything on your site – including your assets such as images, CSS and JS files - is available at the new location. The location of your site changes from root ( /) to the project's repository name: How Github Pages generates an URL The same thing happens when you develop your site locally and then deploy to Github Pages. Root-relative links ignore their current path and they don't follow location changes.
If you were linking to another article from that page, say, the link would lead to the old location which doesn't exist anymore. Suppose you have your articles hosted at and you decide to move them into a dedicated blog section on your website. The inflexibility of root-relative links shows when we move a site to a different path location. Consider the following examples: 🔗Root-relative links and Github Pages The path of the following URL, for example, is /blog/articles.Ī root-relative link always leads to the same path within the current domain, regardless of where it is found. Which part of an URL is the path? Everything that comes after the domain. When clicked, a root-relative link ignores the path location of the current URL. Root-relative links are links that start with a forward slash ( /). To better understand why links often break when deploying to Github Pages, first we need to learn what root-relative links are. Let's investigate the issue and make your site work as expected in production. It happens to many developers - the website works fine on localhost but after deploying to Github Pages, everything breaks.īy understanding the core problem, you will be able to spot it and prevent it from happening in all your future deployments, not just on Github Pages. You pop up dev inspector only to find a bunch of 404 status codes. You see a blank page, or maybe the homepage shows up fine, but then you click on a link and nothing happens. Is your site not working after you've deployed to Github Pages?