Github Pages and Relative Paths

GitHub pages and relative paths

Which browser are you using? Are you sure that this happens? Because it shouldn't. If you include a relative URL in a link, it will get resolved relative to the URL of the document that contains the link. In other words, when you include

<link href="assets/css/common.css" rel="stylesheet">

in an HTML document at http://www.foo.com/bar/doc.html, the link to assets/css/common.css will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css, not to http://www.foo.com/assets/css/common.css as you claim.

For example, view the source of the Twitter Bootstrap webpage: http://twitter.github.io/bootstrap/. Notice the style links at the top, specified as <link href="assets/css/bootstrap.css" rel="stylesheet">. That link correctly resolves to http://twitter.github.io/bootstrap/assets/css/bootstrap.css, i.e. it does include the repo name.

Github-pages relative links not working when custom domain is used

You have two problems:

1. You are not using relative URLs.
2. You are not accounting for the server root being different with a custom domain.

Relative URLs

A relative URL is a path which is relative to the current location. However, a URL which starts with a slash is not relative to the current location. The opening slash indicates a path from the server root. In other words, to "normalize" the URL, simply prepend the domain.

Therefore, for a link to be relative to the current location, it cannot begin with a slash. Using your example structure, any links in the FOLDERFILE.md file would look like this:

[REPO_NAME](../)          <= step back one directory
[README.md](../README.md) <= step back one directory
[FOLDER_NAME](./)         <= the current directory

And any links in the README.md file would look like this"

[REPO_NAME](./)
[FOLDER_NAME](FOLDER_NAME/)
[FOLDERFILE.md](FOLDER_NAME/FOLDERFILE.md)

If it helps, you could start all URLs with the current directory (./). While not necessary, some people find it more readable. In that case, the README.md file would look like this"

[REPO_NAME](./)
[FOLDER_NAME](./FOLDER_NAME/)
[FOLDERFILE.md](./FOLDER_NAME/FOLDERFILE.md)

Server Root

It is important to understand the difference between the server root and your site's root. When they are the same, absolute links will work fine. However, when they are different, only true relative links will work across the two.

When you set up GitHub pages using the GitHub provided domain, your site is hosted at https://USERNAME.github.io/REPO_NAME. In that case, the server root is at USERNAME.github.io/ and that's where / points to. However, your site's root is in the subdirectory /REPO_NAME. Therefore for absolute URLs to work, the must include /REPO_NAME/ in them.

However, when you set up a custom domain, then the server root and the site's root are at the same location: https://example.com/. There is no REPO_NAME subdirectory. The contents of REPO_NAME are at /.

To illustrate, the following URLs point to the same location depending on whether you are using a GitHub domain or a custom domain.

GitHub Domain                        | Custom Domain
------------------------------------ | --------------------------
/REPO_NAME/                          | /
/REPO_NAME/README.md                 | /README.md
/REPO_NAME/FOLDER_NAME/              | /FOLDER_NAME/
/REPO_NAME/FOLDER_NAME/FOLDERFILE.md | /FOLDER_NAME/FOLDERFILE.md

And that difference is why you need to use true relative URLS -- URLs which do not start with a /.

Github Pages failing to properly link to my assets and relative urls

I went through your site and noticed the following. Editing them should resolve your errors:

• In your config file, you have url: 'muygalan.github.io/blog' and baseurl: /blog. You should not be having /blog in your url:.
• In assets/js/index.min.js there's a line r.css({background:"url(/assets/icons/logo_"+i+".svg) no-repeat center","background-size":"100% 100%"}).. See how the url doesn't contain /blog..?

Other pointers:

• Strings in YAML files do not need to be quoted. See how baseurl: /blog is just fine..
• Dont prepend urls with {{ site.baseurl }}.. use relative_url filter instead.
  
  {{ 'foo' | relative_url }}

Yew application unable to access static files when hosted in GitHub pages

Following adds the /my-website base to all the static file links.

trunk serve --public-url /my-website

Why is a Github page url changing on load, causing the public resource path to be incorrect?

It's a bit difficult to say without seeing your code.
However it's likely that your react-router is not setup properly.

You should setup your router like this:

import { BrowserRouter as Router } from ‘react-router-dom’;

const routerBaseName = process.env.PUBLIC_URL;

ReactDOM.render(<Router basename={routerBaseName}>< App /></Router>, document.getElementById(‘root’));

Note the basename part - it should be set to your production url when you build the bundle (in this case: https://CBreakr.github.io/ATTCK_StarWars/)

it should be set to your localhost url when you are developing locally.

You can use .env files to set values for PUBLIC_URL (I believe with create-react-app you will have to change it to REACT_APP_PUBLIC_URL) for dev/prod environments respectively, see: https://create-react-app.dev/docs/adding-custom-environment-variables

How to change relative paths in Franklin.jl?

From here,

In any case, before deploying, if you're working on a project website i.e. a website whose root URL will look like username.gitlab.io/project/ then you should add the following line in your config.md file:

@def prepath = "project"

the publish function will then ensure that all links are fixed before deploying your website.

In other words, it sounds like you're doing a project website, so you need to let Franklin know by setting prepath

---

Related Topics