GitHub-Seiten und relative Pfade

76

Ich habe einen gh-pagesZweig für ein Projekt erstellt, an dem ich bei GitHub arbeite.

Ich verwende Sublime-Text, um die Website lokal zu erstellen. Mein Problem ist, dass alle Links zu Javascrips, Bildern und CSS-Dateien ungültig sind, wenn diese an GitHub gesendet werden.

Zum Beispiel habe ich das in meinem Kopfteil.

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

Dies funktioniert lokal hervorragend, funktioniert jedoch nicht über GitHub, da die Links nicht mithilfe des Repository-Namens als Teil der URL aufgelöst werden.

Es fragt nach: 

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

wann es hätte fragen sollen: 

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

Ich könnte natürlich den Repo-Namen als Teil der URL einfügen, aber das würde verhindern, dass meine Site während der Entwicklung lokal funktioniert.

Irgendeine Idee, wie man damit umgeht?

html github Seesharper
quelle
1
Das passiert mir. Haben Sie es geschafft, den Grund dafür herauszufinden?
Andrey Mikhaylov - lolmaus
1
Hinweis: Im Dezember 2016 haben sich die GitHub-Seiten erheblich geändert. Siehe meine Antwort unten
VonC

Antworten:

13

Welchen Browser verwenden Sie? Sind Sie sicher, dass dies passiert? Weil es nicht sollte. Wenn Sie eine relative URL in einen Link einfügen, wird diese relativ zur URL des Dokuments aufgelöst, das den Link enthält. Mit anderen Worten, wenn Sie einschließen

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

In einem HTML-Dokument unter http://www.foo.com/bar/doc.htmlwird der Link zu assets/css/common.cssaufgelöst, indem er an das Präfix der URL des HTML-Dokuments ohne den letzten Teil des Pfads (ohne doc.html) angehängt wird, dh der Link wird aufgelöst http://www.foo.com/bar/assets/css/common.css, nicht http://www.foo.com/assets/css/common.csswie Sie behaupten.

Zeigen Sie beispielsweise die Quelle der Twitter Bootstrap-Webseite an: http://twitter.github.io/bootstrap/ . Beachten Sie die Stilverknüpfungen oben, angegeben als <link href="assets/css/bootstrap.css" rel="stylesheet">. Dieser Link wird korrekt aufgelöst http://twitter.github.io/bootstrap/assets/css/bootstrap.css, dh er enthält den Reponamen.

Ivan Zuzak
quelle
3
Wie gehst du damit um href="https://stackoverflow.com/"?
Akabab
71

Sie müssen Jekyll verwenden .

Wörtlich aus der entsprechenden Dokumentation kopieren :

Manchmal ist es schön, eine Vorschau Ihrer Jekyll-Site anzuzeigen, bevor Sie Ihren gh-pagesZweig an GitHub senden. Die unterverzeichnisähnliche URL-Struktur, die GitHub für Projektseiten verwendet, erschwert jedoch die ordnungsgemäße Auflösung von URLs. Hier ist ein Ansatz zur Verwendung der URL-Struktur der GitHub-Projektseite ( username.github.io/project-name/) unter Beibehaltung der Möglichkeit, eine Vorschau Ihrer Jekyll-Site lokal anzuzeigen.

  1. In _config.yml, stellen Sie die baseurlOption auf /project-namedem führenden Schrägstrich und das Fehlen eines Schrägstrichs note -.

  2. Gehen Sie beim Verweisen auf JS- oder CSS-Dateien {{ site.baseurl}}/path/to/css.cssfolgendermaßen vor : - Beachten Sie den Schrägstrich unmittelbar nach der Variablen (kurz vor „Pfad“).

  3. Gehen Sie beim Ausführen von Permalinks oder internen Links folgendermaßen vor: {{ site.baseurl }}{{ post.url }}- Beachten Sie, dass zwischen den beiden Variablen kein Schrägstrich besteht.

  4. Wenn Sie eine Vorschau Ihrer Site vor dem Festschreiben / Bereitstellen mit anzeigen möchten, müssen Sie jekyll serveder --baseurlOption eine leere Zeichenfolge übergeben , damit Sie alles localhost:4000normal anzeigen können (ohne / Projektname am Anfang): jekyll serve --baseurl ''

Auf diese Weise können Sie eine Vorschau Ihrer Site lokal vom Site-Stammverzeichnis auf localhost aus anzeigen. Wenn GitHub jedoch Ihre Seiten aus dem gh-pages Zweig generiert, beginnen alle URLs mit /project-nameund werden ordnungsgemäß aufgelöst.

(Anscheinend hat das erst vor ein paar Monaten jemand herausgefunden .)

Anubhav C.
quelle
4
Ja, dies sollte die akzeptierte Antwort sein. Scheint für einen gängigen Jekyll-Anwendungsfall etwas verworren zu sein - ich frage mich, ob es einen Grund gibt, warum sie site.baseurl nicht standardmäßig verwenden?
Kevin Qi
4
Obwohl dies einige Jahre alt ist und sich die Dokumentation geändert hat, hat diese Lösung für mich über das hinaus funktioniert, was in den Jekyll-Dokumenten zur Verwendung empfohlen wurde{{ site.github.url }}
Kyle Shevlin
8

Sie könnten einfach sagen

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

innerhalb des <head>Tags, und es löst das Problem.

Sie können diese Lösung auch verbessern, indem Sie Folgendes einstellen:

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

und dann site.baseurlfür den lokalen Test auf leere Zeichenfolge setzen.

Affilnost
quelle
Wenn Sie nicht mit Jekyll und all dem herumalbern wollen, ist dies die beste Lösung
Pro Q
5

Dies sollte im Dezember 2016, dreieinhalb Jahre später, kein Thema mehr sein.
Siehe " Relative Links für GitHub-Seiten ", veröffentlicht von Ben Balter :

Sie können seit einiger Zeit relative Links verwenden, wenn Sie Markdown auf GitHub.com erstellen .

(das ist ab Januar 2013)

Diese Links funktionieren nun weiterhin, wenn sie über GitHub-Seiten veröffentlicht werden .

Wenn Sie eine Markdown-Datei in Ihrem Repository unter docs/page.mdhaben und von dieser Datei aus eine Verknüpfung herstellen möchten docs/another-page.md, können Sie dies mit dem folgenden Markup tun:

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

Wenn Sie die Quelldatei auf GitHub.com anzeigen, funktioniert der relative Link weiterhin wie zuvor. Wenn Sie diese Datei jetzt mithilfe von GitHub-Seiten veröffentlichen, wird der Link stillschweigend so übersetzt, dass docs/another-page.htmler mit der veröffentlichten URL der Zielseite übereinstimmt .

Unter der Haube verwenden wir das Open-Source- Plugin Jekyll Relative Links , das standardmäßig für alle Builds aktiviert ist.

Relative Links auf GitHub-Seiten berücksichtigen auch benutzerdefinierte Permalinks (z. B. permalink: /docs/page/) in der YAML-Titelseite einer Datei und stellen die Basis-URL der Projektseiten entsprechend voran, um sicherzustellen, dass Links in jedem Kontext weiterhin funktionieren.

Und vergessen Sie nicht, dass Sie Ihre Seiten seit August 2016 direkt in der masterFiliale veröffentlichen können (nicht immer in der gh-pagesFiliale).

Und seit Dezember 2016 brauchen Sie nicht einmal Jekylloder index.md. Einfache Markdown-Dateien reichen aus.

VonC
quelle
Ihre Antwort enthält viele gute Informationen - danke. Nachdem ich alle verlinkten Artikel gelesen habe, kann ich nicht verstehen, warum die relativen Links in einer html tablein meiner .md-Datei während des Github-Seitenprozesses nicht in .html konvertiert werden. Dh in meiner .md-Datei befindet sich eine HTML-Tabelle, die relative Links zu anderen .md-Dateien in meinem Repo enthält. Die Tabelle wird auf github.com ordnungsgemäß gerendert, aber auf Github-Seiten bleiben die relativen Links als MD-Dateien erhalten. Warum?
Seamus
@Seamus Ich habe diese Art der Konvertierung in HTML-Elementen (wie Tabelle) nie gesehen. Ich nahm an, dass der relative Link nur konvertiert wurde, wenn eine reine Markdown-Seite verwendet wurde, nicht in einer Mischung aus Markdown- und HTML-Elementen.
VonC
Anscheinend ist das der Fall. Aber es scheint, dass ich gezwungen bin, zwischen einer hässlichen einseitigen Tabelle und Links zu wählen, die nicht richtig konvertiert werden. Anregungen / Antworten ?
Seamus
4

Es scheint, dass Github Pages nicht sehr reaktionsschnell ist. Obwohl neue Dateien sofort verfügbar sind, werden geänderte Dateien aufgrund von Caching oder Ähnlichem nicht sofort angezeigt.

Nach ungefähr 15 Minuten Wartezeit ist alles in Ordnung.

Andrey Mikhaylov - lolmaus
quelle
Dies war auch bei mir der Fall
Jake
@ AndreyMikhaylov-lolmaus: Es scheint, dass Upvotes auch nicht sehr reaktionsschnell sind :)
Seamus
1

Die beste Option ist jetzt der relative_urlFilter:

<link href="{{ '/assets/css/common.css' | relative_url }}" rel="stylesheet">
Jason Haslam
quelle
0

Eine andere Möglichkeit besteht darin, ein neues Repo speziell für die Webseiten github.io zu erstellen. Wenn Sie das Repo wie [user].github.ioauf github benennen, wird es unter veröffentlicht https://[user].github.iound Sie können vermeiden, dass der Repo-Name vollständig im URL-Pfad enthalten ist . Offensichtlich ist der Nachteil, dass Sie nur 1 Repo wie dieses pro Github-Benutzer haben können, so dass es möglicherweise nicht Ihren Anforderungen entspricht, da bin ich mir nicht sicher.

mulllhausen
quelle
Ich kann nur vermuten, dass der Downvoter der Meinung war, dass Ihre Antwort die Frage nicht beantwortet hat. Ich fand es jedoch nützlich, also +1!
Seamus