Vraag GitHub-pagina's en relatieve paden


Ik heb een gemaakt gh-pages branch voor een project waar ik aan werk op GitHub.

Ik gebruik Sublime-tekst om de website lokaal te schrijven en mijn probleem is dat wanneer dit naar GitHub wordt gepusht, alle links naar javascrips, afbeeldingen en css-bestanden ongeldig zijn.

Ik heb dit bijvoorbeeld in mijn hoofdgedeelte.

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

Dit werkt prima lokaal, maar het werkt niet vanuit GitHub omdat de links niet worden opgelost met behulp van de naam van de repository als onderdeel van de URL.

Het vraagt ​​om:

http://[user].github.io/assets/css/common.css

wanneer het had moeten vragen om:

http://[user].github.io/[repo]/assets/css/common.css.

Ik zou de repo-naam natuurlijk kunnen plaatsen als onderdeel van de URL, maar dat zou mijn site tijdens de ontwikkeling lokaal laten werken.

Enig idee hoe hiermee om te gaan?


46
2018-05-01 10:16


oorsprong


antwoorden:


Welke browser gebruikt u? Weet je zeker dat dit gebeurt? Omdat het niet zou moeten. Als u een relatieve URL opneemt in een koppeling, wordt deze opgelost ten opzichte van de URL van het document dat de koppeling bevat. Met andere woorden, wanneer u opneemt

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

in een HTML-document op http://www.foo.com/bar/doc.html, de link naar assets/css/common.css wordt opgelost door het toe te voegen aan het voorvoegsel van de URL van het HTML-document zonder het laatste deel van het pad (zonder doc.html), d.w.z. de koppeling zal worden omgezet naar http://www.foo.com/bar/assets/css/common.css, niet om http://www.foo.com/assets/css/common.css zoals je beweert.

Bekijk bijvoorbeeld de bron van de Twitter Bootstrap-webpagina: http://twitter.github.io/bootstrap/. Let op de stijlkoppelingen bovenaan, opgegeven als <link href="assets/css/bootstrap.css" rel="stylesheet">. Die link is correct opgelost http://twitter.github.io/bootstrap/assets/css/bootstrap.css, d.w.z. het bevat de repo-naam.


7
2018-05-01 20:10



Dat moet je doen gebruik Jekyll.

Letterlijk kopiëren van de relevante documentatie:

Soms is het leuk om een ​​voorbeeld van je Jekyll-site te bekijken voordat je je pusht    gh-pages aftakking naar GitHub. Echter, de subdirectory-achtige URL   structuur GitHub-gebruik voor projectpagina's maakt het juiste gecompliceerd   resolutie van URL's. Hier is een benadering voor het gebruik van de GitHub   URL-structuur projectpagina (username.github.io/project-name/) terwijl   behoud van de mogelijkheid om uw Jekyll-site lokaal te bekijken.

  1. In _config.yml, stel de baseurl optie om /project-name - let op de schuine streep en de afwezigheid van een slash.

  2. Bij het verwijzen naar JS- of CSS-bestanden, doe het als volgt: {{ site.baseurl}}/path/to/css.css - noteer de schuine streep die onmiddellijk volgt   de variabele (vlak voor "pad").

  3. Bij het doen van permalinks of interne links, doe het als volgt: {{ site.baseurl }}{{ post.url }} - merk op dat er geen schuine streep tussen zit   de twee variabelen.

  4. Ten slotte, als u een voorbeeld van uw site wilt bekijken voordat u met inzetten / distribueren gebruikt jekyll serve, zorg ervoor dat je een lege geeft   string naar de --baseurl optie, zodat u alles kunt bekijken    localhost:4000 normaal (zonder / projectnaam aan het begin):    jekyll serve --baseurl ''

Op deze manier kunt u een voorbeeld van uw site bekijken vanaf de hoofdmap van de site   localhost, maar als GitHub uw pagina's genereert van de gh-pages   vertakking waarmee alle URL's beginnen /project-name en oplossen   naar behoren.

(Blijkbaar heeft iemand dit bedacht slechts een paar maanden geleden.)


55
2017-10-04 05:25



Dit zou geen probleem meer moeten zijn in december 2016, 3 en een half jaar later.
Zien "Relatieve links voor GitHub-pagina's", gepubliceerd door Ben Balter:

U kunt relatieve links gebruiken bij het maken van Markdown op GitHub.com voor een tijdje.

(dat is vanaf januari 2013)

Nu blijven die links werken wanneer ze via worden gepubliceerd GitHub-pagina's.

Als je een Markdown-bestand hebt in je repository op docs/page.mden u wilt van dat bestand koppelen aan docs/another-page.md, u kunt dit doen met de volgende markup:

[a relative link](another-page.md)

Wanneer u het bronbestand op GitHub.com bekijkt, blijft de relatieve link werken zoals eerder, maar nu, wanneer u dat bestand publiceert met behulp van GitHub-pagina's, wordt de link stil vertaald in docs/another-page.html om overeen te stemmen met de gepubliceerde URL van de doelpagina.

Onder de motorkap gebruiken we de open source Jekyll Relatieve links plugin, die standaard is geactiveerd voor alle builds.

Relatieve links op GitHub-pagina's houden ook rekening met aangepaste permalinks (bijv. permalink: /docs/page/) in de YAML-kwestie van een bestand, evenals de basis-URL van de projectpagina's, voor zover van toepassing, zodat koppelingen in elke context blijven werken.

En vergeet dat niet sinds augustus 2016 kunt u uw pagina's rechtstreeks vanuit de master tak (niet altijd de gh-pages tak)

En sindsdien December 2016, je hebt het niet eens nodig Jekyll of index.md. Eenvoudige markdown-bestanden zijn voldoende.


5
2017-12-13 18:21



Je zou gewoon kunnen zetten

<base href="/[repo]/">

binnenkant van de <head> tag en lost het probleem op.

U kunt deze oplossing ook verbeteren door het volgende in te stellen:

<base href="{{ site.baseurl }}/">

en stel dan in site.baseurl om een ​​string te legen voor de lokale testen.


1
2018-04-20 14:53



Een andere optie is om een ​​nieuwe repository te maken specifiek voor de github.io-webpagina's. Als u de repo een naam geeft [user].github.io op github dan zal het worden gepubliceerd op https://[user].github.io en jij kan voorkom dat de repo-naam volledig in het URL-pad staat. Het nadeel is natuurlijk dat je per github-gebruiker maar 1 repo op deze manier kunt hebben, dus het is misschien niet aan je behoeften, ik weet het niet zeker.


0
2017-10-29 11:54



Het lijkt erop dat Github Pages niet erg responsief is. Hoewel het nieuwe bestanden onmiddellijk beschikbaar maakt, zouden gewijzigde bestanden niet onmiddellijk verschijnen als gevolg van caching of iets dergelijks.

Na ongeveer 15 minuten wachten is alles in orde.


-1
2017-08-27 10:06