GitHub pages and relative paths

by

You’ll need to use Jekyll.

Copying verbatim from the relevant documentation:

Sometimes it’s nice to preview your Jekyll site before you push your
gh-pages branch to GitHub. However, the subdirectory-like URL
structure GitHub uses for Project Pages complicates the proper
resolution of URLs. Here is an approach to utilizing the GitHub
Project Page URL structure (username.github.io/project-name/) whilst
maintaining the ability to preview your Jekyll site locally.

  1. In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.

  2. When referencing JS or CSS files, do it like this: {{ site.baseurl}}/path/to/css.css – note the slash immediately following
    the variable (just before “path”).

  3. When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between
    the two variables.

  4. Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty
    string to the --baseurl option, so that you can view everything at
    localhost:4000 normally (without /project-name at the beginning):
    jekyll serve --baseurl ''

This way you can preview your site locally from the site root on
localhost, but when GitHub generates your pages from the gh-pages
branch all the URLs will start with /project-name and resolve
properly.

(Apparently someone figured this out only a few months ago.)

More Related Contents:

  1. How do I do awesome refreshless page changes like GitHub do?
  2. Images in github pages and relative links
  3. How to see an HTML page on Github as a normal rendered HTML page to see preview in browser, without downloading?
  4. Can I create more than one repository for github pages?
  5. Images not displaying in Github Pages?
  6. How to make moving CSS objects like this?
  7. how to align the image to the center? [closed]
  8. How to modify HTML file with Perl: preserving lists and erasing all other tags [closed]
  9. Proper use of flex properties when nesting flex containers
  10. POST unchecked HTML checkboxes
  11. How can I override Bootstrap CSS styles?
  12. Nesting block level elements inside the tag… right or wrong?
  13. Applying a background to and/or
  14. Using flex order property to re-arrange items for desktop and mobile views
  15. Create a responsive navbar sidebar “drawer” in Bootstrap?
  16. Do you have to include ?
  17. Where can I get a list of all countries/cities to populate a listbox? [closed]
  18. Disable spell-checking on HTML textfields
  19. Pixels vs. Points in HTML/CSS
  20. How to do tag wrapping in VS code?
  21. Specifying Tab-Width?
  22. Is there a way to tell browsers to honor the jpeg exif orientation?
  23. Forms with action=””
  24. CSS hide scroll bar if not needed
  25. jQuery – Follow the cursor with a DIV
  26. The css padding is not working in outlook
  27. HTML Input is not updating value attribute on change
  28. Why would Google use a font tag?
  29. Styling the “ element in CSS?
  30. inline-block element with no text renders differently

Leave a Comment