URL change breaks CSS / Images and Navigation

[WillieAhlers1]

Need to figure out what has to change when the URL is changed.

It seems the config yml file needs to be updated, however the new URL is of the format 'microsoft.github.io/dstoolkit-web' the old was of the format 'crispyparakeet.github.io' It seems the 'base url' property in the YML file has something to do with this. I wonder if the 'permalinks' have to be updated in each markdown page?

[WillieAhlers1]

@mtran-affirma could you take a look at why this is happening please, it seems that there is some place we are not updating the URL and BaseURL correctly?

[mtran-affirma]

hi @WillieAhlers1 and @strobaek ,

under Settings > Pages, you should see the setting to configure the custom domain along with a link to documentation for how to configure:

[strobaek]

Hi @mtran-affirma ,

I don't believe it has anything to do with custom domains.

The site url changes to also contain a 'subpage' (I believe).

I think this is what is causing the problems.

/cc @WillieAhlers1

[WillieAhlers1]

@mtran-affirma - click on this url - https://microsoft.github.io/dstoolkit-web/ to see what the issue is :) As @strobaek indicated, it is not about changing the custom URL, but more about CSS / Navigations issues once the URL is changed.

[mtran-affirma]

ah okay I see, thanks for clarifying @WillieAhlers1 and @strobaek !

Do you see the same behavior when running the site and testing locally?

If you don't, then yes, it's possible the image links being broken on the public site may have to do with the _config.yml file then. I do not see much documentation online for this so I would recommend using a different branch to try and fix the bug and test the changes locally before merging back into the main/master branch, gh-pages.

[strobaek]

@mtran-affirma ,

Thx. The challenge with testing locally is, that it does not have the subpage, hence it looks fine.

[mtran-affirma]

Okay thanks for confirming, @strobaek ! So okay, that makes sense why you've been updating directly on the gh-pages branch.

Doing some more research, I found someone else that faced a similar issue: https://github.community/t/broken-images/10485

The marked answer mentions a fix of removing "../" from image src paths:

When I look at the website, you can see the url of the image it's trying to pull:

To test the fix mentioned in the forum, I tried it on one image on the home page, and it worked! Commit: https://github.com/microsoft/dstoolkit-web/commit/a9d9da4511d2cf00fa2e969ce6616ce5721d5857

So then, the fix for any images that are broken is to apply the same fix as was applied in commit https://github.com/microsoft/dstoolkit-web/commit/a9d9da4511d2cf00fa2e969ce6616ce5721d5857

cc: @WillieAhlers1

[mtran-affirma]

hi @strobaek @WillieAhlers1 , here's a blog you may find useful: https://mademistakes.com/mastering-jekyll/site-url-baseurl/

I noticed it isn't just links to images, but also other internal links such as links to other pages within the GitHub pages site

Also FYI, whenever a commit is made to the main branch, gh-pages, the deployment to the site will trigger of which you can view the status of here to confirm that you're seeing the latest committed version: https://github.com/microsoft/dstoolkit-web/actions

[mtran-affirma]

okay hi again @strobaek and @WillieAhlers1 , I discovered the fix for fixing internal links - one needs to add the site.baseurl variable to the front of a url as per https://mademistakes.com/mastering-jekyll/site-url-baseurl/:

You can see I fixed the Home page link on the navigation bar with this commit: https://github.com/microsoft/dstoolkit-web/commit/d3d44c66020b8b38c04b7f69129c3cddc6b54dca

before, going to "Home" would take you to https://microsoft.github.io/ which redirects to https://opensource.microsoft.com/

now it correctly takes you to the Home page

[strobaek]

Thank you @mtran-affirma. I will run through the site 'properly' and correct the images and links.

[mtran-affirma]

hi @strobaek , i took a quick look at the site and tested some of the links! FYI that the link for the logo image also needs to be updated:

cc: @WillieAhlers1