Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem loading assets in mkdocs deployed on github pages #4678

Closed
5 tasks done
danimrprofe opened this issue Nov 25, 2022 · 2 comments
Closed
5 tasks done

Problem loading assets in mkdocs deployed on github pages #4678

danimrprofe opened this issue Nov 25, 2022 · 2 comments

Comments

@danimrprofe
Copy link

Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem

Description

Hello, don't know if this is the right place to ask for help, but i'm having a little problem and can't find the solution to it. By the way, love mkdocs and the material theme and I would appreciate if you could help me.

Mkdocs works perfect when served locally (localhost), but displays without styles or images when deployed to github.

Thank you in advance, if more information is needed please let me now.

Expected behaviour

I installed mkdocs, initiated a new project in a repo and configurated the yaml as the guide said. mkdocs serves works perfect as in local server everything displays as expected. Then I deploy with the command with the option gh-deploy on mkdocs but on github doesn't load assets images or styles, only the HTML.

Actual behaviour

This is where the build shoud deploy the website. I did it from command line via mkdocs command, and it pushed to the new branch of the repository (gh-deploy)

https://danimrprofe.github.io/apuntes/

As you can see no styles ar shown:

image

This is how the website is displayed (without styles). Seems to be looking at the media in the root of the URL, where they are not. I mean, the HTML looks for:

https://danimrprofe.github.io/assets/images/favicon.png

Instead of where it really is:

https://danimrprofe.github.io/apuntes/assets/images/favicon.png

My pages options in the repo.

image

Steps to reproduce

  1. Build with mkdocs
  2. Deploy with gh-deploy
  3. Check in the github.io page.

Package versions

  • Python: Python 3.8.2
  • MkDocs: mkdocs, version 1.4.2
  • Material: Version: 8.5.10

Configuration

site_name: My Docs

theme:
  name: material
  language: es
  features:
    - navigation.tabs
    - navigation.tabs.sticky

System information

  • Operating system: windows 10
  • Browser: all
@squidfunk
Copy link
Owner

squidfunk commented Nov 25, 2022

Thanks for reporting. When deploying, you need to specify site_url – it must point to your GitHub URL:

site_url: https://squidfunk.github.io/mkdocs-material/

The reason is that MkDocs will resolve asset URLs relative to the configured site URL. If no site URL is configured, / is assumed, so your project is expected to live at the root of the current URL. Since your documentation is hosted in a subdirectory, this setting is mandatory. I'll add a note to the GitHub Pages deployment guide.

@danimrprofe
Copy link
Author

Thank you very much for your suport, it worked perfectly!!!!

alexvoss added a commit to alexvoss/mkdocs-material-fork that referenced this issue Apr 26, 2024
squidfunk pushed a commit that referenced this issue Apr 28, 2024
* added note on importance of site_url

this was in response to
#4678 (comment)

* re-wording to say why site_url is always needed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants