web-dev-qa-db-fra.com

Pages GitHub et chemins relatifs

J'ai créé une branche gh-pages pour un projet sur lequel je travaille sur GitHub.

J'utilise le texte Sublime pour créer le site Web localement et mon problème est que, lorsque cela est transmis à GitHub, tous les liens vers javascrips, les images et les fichiers css sont invalides.

Par exemple, j'ai ceci dans ma section de tête.

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

Cela fonctionne très bien localement, mais cela ne fonctionne pas à partir de GitHub car les liens ne sont pas résolus en utilisant le nom du référentiel dans l'URL.

Il demande: 

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

quand il aurait dû demander: 

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

Je pourrais bien sûr insérer le nom du référentiel dans l'URL, mais cela empêcherait mon site de fonctionner localement pendant le développement. 

Une idée de comment gérer ça?

htmlgithub
53
seesharper

Quel navigateur utilisez-vous? Êtes-vous sûr que cela se produit? Parce que ça ne devrait pas. Si vous incluez une URL relative dans un lien, le problème sera résolu par rapport à l'URL du document contenant le lien. En d'autres termes, lorsque vous incluez 

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

dans un document HTML à http://www.foo.com/bar/doc.html, le lien vers assets/css/common.css sera résolu en l'ajoutant au préfixe de l'URL du document HTML sans la dernière partie du chemin (sans doc.html), autrement dit, le lien sera résolu en http://www.foo.com/bar/assets/css/common.css et non en http://www.foo.com/assets/css/common.css comme vous le prétendez.

Par exemple, affichez le code source de la page Web Twitter Bootstrap: http://Twitter.github.io/bootstrap/ . Notez les liens de style en haut, spécifiés par <link href="assets/css/bootstrap.css" rel="stylesheet">. Ce lien résout correctement en http://Twitter.github.io/bootstrap/assets/css/bootstrap.css, c’est-à-dire qu’il inclut le nom du référentiel.

10
Ivan Zuzak

Vous aurez besoin de utiliser Jekyll .

Copier textuellement à partir de documentation pertinente :

Parfois, il est agréable de prévisualiser votre site Jekyll avant de pousser votre gh-pages branche à GitHub. Cependant, l'URL de type sous-répertoire La structure utilisée par GitHub pour les pages de projet complique la bonne résolution des URL. Voici une approche pour utiliser le GitHub Structure de l'URL de la page de projet (username.github.io/project-name/) tandis que maintenant la possibilité de prévisualiser votre site Jekyll localement.

  1. Dans _config.yml, définissez l'option baseurl sur /project-name - notez la barre oblique supérieure et l'absence de barre oblique finale.

  2. Lorsque vous faites référence à des fichiers JS ou CSS, procédez comme suit: {{ site.baseurl}}/path/to/css.css - notez la barre oblique juste après la variable (juste avant “chemin”).

  3. Lorsque vous faites des liens permanents ou des liens internes, procédez comme suit: {{ site.baseurl }}{{ post.url }} - notez qu'il n'y a pas de barre oblique entre les deux variables.

  4. Enfin, si vous souhaitez prévisualiser votre site avant de valider/déployer à l'aide de jekyll serve, veillez à transmettre un .__ vide. chaîne à l'option --baseurl, afin que vous puissiez tout voir en localhost:4000 normalement (sans/nom-projet au début): jekyll serve --baseurl ''

De cette façon, vous pouvez prévisualiser votre site localement à partir de la racine du site sur localhost, mais lorsque GitHub génère vos pages à partir du gh-pages branchez toutes les URL commencent par /project-name et résolvent correctement.

(Apparemment, quelqu'un l'a compris il y a quelques mois seulement .)

58
Anubhav C

Cela ne devrait plus être un problème en décembre 2016, 3 ans et demi plus tard.
Voir " Liens relatifs pour les pages GitHub ", publié par Ben Balter :

Vous avez pu utiliser des liens relatifs lors de la création de Markdown sur GitHub.com pendant un certain temps . 

(c'est à partir de janvier 2013)

Maintenant, ces liens continueront à fonctionner une fois publiés via GitHub Pages .

Si vous avez un fichier Markdown dans votre référentiel à docs/page.md et que vous souhaitez lier ce fichier à docs/another-page.md, vous pouvez le faire avec le balisage suivant:

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

Lorsque vous affichez le fichier source sur GitHub.com, le lien relatif continuera de fonctionner comme auparavant, mais maintenant, lorsque vous publiez ce fichier à l'aide de GitHub Pages, le lien sera traduit silencieusement en docs/another-page.html pour correspondre à la publication de la page cible. URL.

Sous le capot, nous utilisons le plug-in open source Jekyll Relative Links , qui est activé par défaut pour toutes les versions.

Les liens relatifs sur les pages GitHub prennent également en compte les permaliens personnalisés (par exemple, permalink: /docs/page/) dans le contenu YAML d'un fichier, ainsi que l'URL de base des pages de projet, le cas échéant, afin que les liens continuent de fonctionner dans n'importe quel contexte.

Et n'oubliez pas que depuis août 2016, vous pouvez publier vos pages directement à partir de la branche master (pas toujours la branche gh-pages)

Et depuis déc. 2016 , vous n'avez même pas besoin de Jekyll ou index.md. Des fichiers de démarques simples suffisent.

5
VonC

Il semble que Github Pages n’est pas très réactif. Bien que les nouveaux fichiers soient immédiatement disponibles, les fichiers modifiés n'apparaissent pas immédiatement en raison de la mise en cache ou de quelque chose de ce genre.

Après avoir attendu 15 minutes environ, tout va bien.

2
Andrey Mikhaylov - lolmaus

Tu pourrais juste mettre

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

à l'intérieur de la balise <head>, et cela résout le problème.

Vous pouvez également améliorer cette solution en définissant:

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

puis définissez site.baseurl sur chaîne vide pour le test local.

2
Affilnost

Une autre option consiste à créer un nouveau dépôt spécifiquement pour les pages Web github.io. Si vous nommez le référentiel en tant que [user].github.io sur github, il sera publié à https://[user].github.io et vous pouvez éviter d'avoir le nom du référentiel dans le chemin de l'URL complètement . Évidemment, l’inconvénient est que vous ne pouvez avoir qu’un seul dépôt de ce type par utilisateur de github. Il est donc possible que cela ne réponde pas à vos besoins, je ne suis pas sûr.

0
mulllhausen

La meilleure option est maintenant le filtre relative_url:

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