portfolio starter
1.0.0
Il s'agit d'un portefeuille léger Starterkit construit avec Eleventy. Il est destiné aux concepteurs, aux illustrateurs, aux architectes et à toute autre personne intéressée à partager leur travail et leur activité.
L'utilisateur prévu peut ne pas savoir coder mais s'intéresse à la technologie derrière son site Web, est prêt à écrire dans Markdown et est heureux de suivre cette documentation.
Visitez Portfolio-Starter.sb-ph.com pour le vérifier. Le contenu et le code de ce référentiel entraînent le site de démonstration.
«No-Code» est un peu un terme impropre. Vos fichiers de contenu sont techniquement écrits en code, mais c'est une syntaxe très lisible appelée Markdown (plus à ce sujet plus tard). Ce que nous entendons par «sans code», c'est que vous n'aurez pas à toucher la ligne de commande, Git ou ouvrir un éditeur de code sur votre ordinateur.
GitHub est une plate-forme qui stocke le code. Votre code de site Web et votre contenu vont vivre sur GitHub. Si vous avez déjà un compte, allez-y et connectez-vous. Sinon, inscrivez-vous à un compte. Le compte individuel gratuit est suffisant.
Netlify et Zeit hébergent des fournisseurs qui offrent des niveaux gratuits généreux pour les personnes avec des sites Web statiques comme celui-ci. Netlify est peut-être un peu plus simple pour les étapes suivantes et semble être utilisée par plus d'utilisateurs d'Eleventy, mais ce sont tous deux des plates-formes solides. Si vous avez déjà un compte avec l'une de ces plates-formes, connectez-vous. Si vous ne le faites pas, inscrivez-vous pour un.
En cliquant sur l'un des boutons ci-dessous, vous allez cloner ce référentiel (c'est-à-dire créer une version en double qui vit dans votre propre compte GitHub), puis déployer ce nouveau site Web à votre hébergement statique.
Avant de continuer, décidez d'un nom pour votre référentiel. Cela devrait être quelque chose de similaire au nom de votre site, mais il ne devrait inclure que des lettres, des chiffres et des tirets minuscules. Par exemple, le nom de ce référentiel est portfolio-starter .
Si vous avez un compte Netlify , cliquez sur ce bouton et suivez les instructions simples de Netlify pour connecter Netlify et GitHub:
Si vous avez un compte Zeit , cliquez sur le bouton ci-dessous, puis suivez les instructions de Zeit:
Les instructions de Zeit vous guideront sur la façon d'installer Zeit maintenant pour GitHub afin qu'il puisse créer un référentiel pour vous et peut déployer vos modifications. Donnez la permission à tous les référentiels lors de l'installation de Zeit maintenant. Zeit devrait détecter automatiquement que vous utilisez Eleventy avec les paramètres comme suit (vous n'avez pas à vous soucier de la commande de développement):
Commande de build: npx @11ty/eleventy de sortie répertoire: _site
Lorsque vous avez fini de suivre les instructions ci-dessus pour Netlify ou Zeit , vous serez redirigé vers le tableau de bord de votre site Web. Cela affiche votre sous-domaine par défaut et d'autres informations importantes sur votre site. Vous recevrez également des e-mails vous indiquant que les services sont connectés.
Zeit vous permet de sélectionner la visibilité de votre référentiel lorsque vous le configurez. Netlify, en revanche, crée automatiquement un référentiel public. Voir la documentation GitHub si vous souhaitez ajuster la visibilité de votre référentiel.
Pour modifier ou ajouter du contenu sans la ligne de commande, vous devez utiliser l'interface de GitHub pour naviguer dans vos fichiers dans le dossier /content de votre référentiel. Voir la référence du contenu pour en savoir plus sur la structure du dossier /content et chacun des fichiers à l'intérieur, en particulier le fichier de données global qui comprend le titre et l'URL de votre site Web.
Pour modifier ou supprimer un fichier existant, vous devez ouvrir le fichier pertinent dans GitHub, puis cliquez sur le bouton Modifier (le bouton avec l'icône du crayon) ou le bouton Supprimer (le bouton avec le bac) dans le coin supérieur droit au-dessus du contenu de la page.
Si vous souhaitez ajouter une nouvelle page, vous devez accéder au dossier des posts , projects ou pages en fonction de ce que vous souhaitez ajouter, puis cliquez sur le bouton "Créer un nouveau fichier" près de la page en haut. Cela ouvrira une nouvelle page d'éditeur où vous pouvez ajouter votre contenu de nom de fichier et de fichier. Étant donné que tout le contenu du texte est écrit dans Markdown, le nom de fichier doit se terminer par md (c'est-à-dire my-post-name.md ).
Si vous souhaitez ajouter des supports, vous devez accéder au dossier media , puis cliquez sur le bouton "Télécharger les fichiers" en haut de la page. Cela vous donnera une zone pour télécharger un ou plusieurs fichiers. Voir les conseils multimédias pour les conseils sur les types de fichiers et les tailles.
Pour enregistrer les modifications ou les ajouts effectués dans GitHub, vous devez engager vos modifications en utilisant l'interface de GitHub à la base de la page. Si vous avez connecté Netlify ou Zeit à l'étape précédente, un commit indiquera également à GitHub de déployer automatiquement vos modifications. Pour en savoir plus sur ce qu'est un engagement, voir le glossaire Github. Lorsque vous commettez une modification ou un ajout directement dans GitHub, vous pouvez utiliser le message de validation par défaut qui est pré-rempli et qui doit s'engager directement à la branche master (paramètre par défaut).
Les instructions de configuration de la ligne de commande supposent que vous avez familiarité avec la ligne de commande, que vous avez la version 8 ou supérieure à Node.js installé sur votre ordinateur et que vous avez un compte GitHub.
Clone Repository localement dans un dossier de projet nommé en exécutant git clone https://github.com/sb-ph/portfolio-starter.git my-website , puis passez au nouveau dossier du projet en exécutant cd my-website . Exécutez npm install pour installer les dépendances, y compris Eleventy.
Exécutez rm -rf .git pour supprimer l'historique GIT pour un nouveau départ, puis exécutez git init pour initialiser un nouveau repo Git. Engagez tous vos fichiers pour créer une nouvelle branche master , puis ajoutez votre projet à GitHub à l'aide de la ligne de commande.
Pour créer le site Web dans le répertoire Gitignored /_site , exécutez npx @11ty/eleventy . Pour faire tourner un serveur pour le développement local ou l'édition de contenu, exécutez npx @11ty/eleventy --serve . Cela rendra votre site disponible sur http: // localhost: 8080, et le site rechargera automatiquement lorsque vous apportez des modifications.
Si vous souhaitez utiliser Netlify ou Zeit, suivez leur documentation pour que votre référentiel soit connecté à votre compte d'hébergement pour le déploiement continu. Si vous souhaitez utiliser un autre fournisseur d'hébergement, vous pouvez trouver vos fichiers statiques dans le répertoire /_site après avoir généré une version.
Pour modifier le contenu localement, tournez un serveur en exécutant npx @11ty/eleventy --serve , puis ajustez les fichiers Markdown et JSON dans le répertoire /content . Si votre site est connecté au déploiement continu, assurez-vous de commettre vos modifications à la bonne branche (probablement master ), sinon il ne sera pas déployé.
Netlify et Zeit vous donnent automatiquement un sous-domaine par défaut lorsque vous déployez votre site Web, il s'agit donc d'une étape facultative. Si vous souhaitez utiliser votre propre domaine, vous devez suivre leurs instructions pour configurer cela. En savoir plus sur les domaines personnalisés sur Zeit, ou en savoir plus sur les domaines personnalisés sur Netlify.
Ces deux guides vous guideront sur la façon de configurer le système de noms de domaine de votre domaine (DNS). Notez que DNS peut être délicat. Les enregistrements DNS pour votre domaine indiquent aux navigateurs où trouver votre site Web et dire aux serveurs d'e-mail comment vous réaliser des e-mails. Assurez-vous de noter tous les enregistrements DNS existants avant de changer quoi que ce soit.
Si vous déposez les serveurs de noms dans le cadre du processus de configuration du domaine personnalisé et utilisez déjà votre domaine pour l'e-mail, vous devez ajouter vos enregistrements MX et tous les autres enregistrements liés à l'e-mail à votre nouveau fournisseur d'hébergement avant de dépasser les serveurs de noms. Si vous ne le faites pas, votre e-mail peut baisser.
Si vous êtes sur une ancienne version de Portfolio Starter et que vous souhaitez le mettre à jour vers une version plus récente, nous vous recommandons de le faire manuellement en remplaçant tous les dossiers et fichiers à l'exception du dossier /content . Vous devez sauvegarder votre site Web avant d'apporter des mises à jour ou des modifications majeures. Visitez votre page d'accueil du référentiel et cliquez sur le bouton vert «Clone ou téléchargez» pour télécharger un fichier zippé de l'intégralité du référentiel, puis rangez-le dans un endroit sûr.
Tout le contenu vit dans le dossier /content . Par défaut, Portfolio Starter est rempli du contenu utilisé sur le site de démonstration.
Le contenu inclut les données globales, les fichiers de marquage pour chaque page et les médias. Il est important de formater et d'organiser chacun de ces fichiers d'une manière particulière afin que votre site se déploie sans erreurs et regarde comme prévu.
Certaines métadonnées telles que le titre du site et l'URL sont utilisées sur tout le site Web. Toutes ces données globales sont contenues dans le fichier /content/_data/global.json .
Les détails de ce fichier doivent être définis lors de la configuration du site Web et ne seront probablement pas touchés à moins que le site Web soit déplacé ou que le domaine change. Ceci est un exemple du fichier global.json :
{
"title" : " Tortor Parturient Ridiculus " ,
"lang" : " en " ,
"footer" : " (c) Jane Doe, 2020 " ,
"url" : " https://tpr.com " ,
"author" : {
"name" : " Jane Doe " ,
"email" : " [email protected] "
}
} Il s'agit du seul élément de contenu qui doit être écrit dans JSON, un format de texte qui est utilisé pour structurer les données. La syntaxe JSON est très stricte. Toutes les clés (ie title ) et toutes les chaînes (c'est-à-dire My website ) sont enfermées en doubles citations, et toutes les propriétés (c'est-à-dire "title": "My website" ) sont séparées par des virgules à l'exception de la dernière propriété. Tous les objets JSON sont enfermés en crochets bouclés {} . Une syntaxe incorrecte dans ce fichier entraînera une erreur, ce qui signifie que vos modifications ne seront pas déployées.
Ce sont les propriétés plus en détail.
| Clé | Format | Défaut | Description |
|---|---|---|---|
author | Objet JSON | - | Un objet JSON qui comprend le nom et l'adresse e-mail de l'auteur du site Web |
footer | Réduction | un crédit court | Le texte de pied de page écrit en marquage |
lang * | texte | en | La balise de langue IANA qui déclare la langue de votre site Web |
title * | texte | - | Le titre de votre site Web |
url * | URL | - | URL de votre site Web |
Le pied de page comprend un crédit court par défaut. N'hésitez pas à le remplacer par tout le texte qui vous convient le mieux. Cela peut inclure un avis de droit d'auteur, un colophon, des coordonnées ou d'autres informations saillantes. Le pied de page ne prend pas en charge les pauses de ligne.
Toutes les principales pages de contenu, y compris les publications, les projets, les pages, la page d'accueil, la page d'erreur 404, le blog et le flux RSS, sont écrits dans Markdown. Markdown vous permet d'écrire à l'aide d'un format de texte brut facile à lire et facile à écrire qui peut être converti en HTML valide. Visitez le site Web de Markdown-It pour une liste complète des options de formatage, y compris les listes, les liens, les titres, etc. Vous pouvez également jeter un œil à la source de ce fichier ReadMe; Il est également écrit dans Markdown!
Tous les fichiers Markdown se terminent dans l'extension .md , et ce starterkit utilise le reste du nom de fichier pour générer la slip de page (la partie finale de l'URL d'une page).
Tous les dossiers ou fichiers précédés d'un soulignement _ ne seront pas publiés. À cause de cela, vous pouvez utiliser un soulignement pour créer des brouillons tels que /content/posts/_testing-a-draft.md . Cependant , il est essentiel de se rappeler que votre brouillon sera visible pour les autres dans GitHub si votre référentiel est public.
Chaque fichier Markdown commence par le front de Frontmatter YAML. YAML est une syntaxe de texte brut qui permet de formater le texte lisible par l'homme en tant que données structurées. Frontmatter est le texte en haut du fichier qui est clôturé par trois tirets de chaque côté, comme ainsi:
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
Le Frontmatter YAML comprend une série de propriétés - les clés et les valeurs séparées par un côlon - qui définissent les métadonnées spécifiques à la page. Les clés doivent toujours être écrites exactement comme indiqué dans cette documentation. Layout écriture au lieu de layout par exemple, entraînera une erreur.
Ce sont les propriétés YAML de base qui doivent être utilisées dans la masse de front sur chaque page.
| Clé | Format | Défaut | Description |
|---|---|---|---|
description | texte | - | Brève description du contenu de la page |
eleventyNavigation | Yaml | - | Un objet YAML, décrit ci-dessous |
image | texte | - | Le nom de fichier de l'image qui devrait être utilisé pour les cartes de médias sociaux |
layout * | texte | - | La mise en page de la page |
permalink | texte | divers | La page Permalien |
title * | texte | - | Le titre de la page |
Le titre de la page et la mise en page sont requis sur chaque fichier Markdown. La disposition de la page détermine comment le contenu est affiché. Lors de la création de nouvelles pages, vous devez utiliser les dispositions project , post ou page .
La propriété description est fortement recommandée pour toutes les pages car elle est utilisée pour les cartes de médias sociaux et affichée dans les résultats des moteurs de recherche. Il devrait être compris entre 50 et 160 caractères, et il ne devrait jamais être dupliqué sur différentes pages.
Si vous utilisez une image pour les médias sociaux, reportez-vous à la documentation fournie par les plateformes de médias sociaux pour obtenir des conseils sur une taille d'image appropriée. En règle générale, un JPG de Landscape-Format 1200px de large devrait être approprié sur la plupart des plateformes.
La propriété permalink vous permet de définir l'URL pour une page ou de l'éteindre complètement. Les permaliens sont toujours générés automatiquement, vous devez donc rarement utiliser cette propriété.
La propriété eleventyNavigation est légèrement plus complexe. Il indique au plugin de navigation Eleventy quoi mettre dans le menu. Ceci est un exemple de la propriété utilisée sur la page à propos /content/pages/about.md :
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
La sous-propriété key indique qu'Eleventy d'ajouter cette page à la navigation avec le texte «à propos». La sous-propriété order indique à Eleventy qu'elle devrait venir en premier dans la navigation.
Vous pouvez également ajouter des liens externes à la navigation, par exemple un lien vers votre github. Voir la page /content/pages/github.md pour un exemple avec la première masse suivante:
Si vous souhaitez ajouter un lien externe à la navigation, vous pouvez créer un nouveau fichier Markdown (par exemple, /content/external.md ) avec le Frontmatter ci-dessous:
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
La sous-propriété key indique qu'Eleventy d'ajouter cette page à la navigation avec le texte «github» ( ↗ est le code HTML pour une flèche nord-est). La sous-propriété order est définie sur 3 afin qu'elle soit la dernière dans le menu, et la sous-propriété url est définie sur l'URL souhaitée. La propriété permalink est définie sur False afin que cela ne publie pas de page correspondante sur notre site Web.
Les pages se trouvent dans le dossier /content/pages .
layout d'une page doit être définie sur page dans le frontmatter. Les pages ne prennent en charge que les propriétés de base énumérées ci-dessus.
Les articles sont trouvés dans le dossier /content/posts .
layout d'un poste doit être réglée sur post dans la masse. Les publications prennent en charge les propriétés de base ainsi que la propriété date . Ceci est un exemple de la front de la poste:
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
La propriété date détermine la date de publication de la publication et donc la commande du blog et du RSS.
Vous pouvez utiliser le commentaire HTML <!--more--> dans votre contenu Markdown pour générer un extrait pour vos messages comme SO:
Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<!-- more -->
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Si vous utilisez le more commentaires, seul le texte précédant le commentaire sera affiché sur le blog et un lien «Lire la suite» sera affiché après cet extrait.
Les projets se trouvent dans le dossier /content/projects .
layout d'un projet doit être réglée sur project dans la masse. Les projets prennent en charge les propriétés de base ainsi que les propriétés dateStart , dateEnd et media . Ceci est un exemple de la première page pour une page de projet.
---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
- type : image
filename : cloud-01.jpeg
size : md
alt : A cloud
caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
- type : video
filename : ria-pacquee.mp4
controls : false
caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---
Et ce sont les propriétés spécifiques au projet plus en détail:
| Clé | Format | Défaut | Description |
|---|---|---|---|
dateEnd * | YYYY-MM-DD | - | La date de fin de votre projet, utilisée à des fins de tri |
dateStart | YYYY-MM-DD | - | La date de début de votre projet |
media | Yaml | - | Une liste YAML des blocs multimédias, décrite ci-dessous |
La propriété multimédia est une liste YAML strictement formatée qui peut contenir des blocs d'image et de vidéo. Les propriétés qui s'appliquent aux images et aux vidéos sont décrites ci-dessous.
| Clé | Format | Défaut | Description |
|---|---|---|---|
caption | réduction | - | Une légende décrivant vos médias |
filename * | texte | - | Le nom de fichier de vos médias |
height | entier | - | La hauteur de vos médias en pixels |
width | entier | - | La largeur de vos médias en pixels |
size | texte | lg | La taille que le support doit être affiché; sm , md ou lg |
type * | texte | - | image ou video |
Les blocs d'image prennent en charge les propriétés supplémentaires suivantes:
| Clé | Format | Défaut | Description |
|---|---|---|---|
alt * | texte | - | Le texte alt pour votre image |
featured | booléen | FAUX | Que l'image soit utilisée ou non pour représenter ce projet |
La propriété featured est utilisée pour déterminer quelle image doit être utilisée pour représenter ce projet sur la page d'accueil. Si plusieurs images sont marquées comme présentées, la première sera utilisée.
Les blocs vidéo permettent les propriétés supplémentaires suivantes. Notez que Video AutoPlay n'est pris en charge que dans certains navigateurs et appareils.
| Clé | Format | Défaut | Description |
|---|---|---|---|
controls | booléen | FAUX | Si les commandes vidéo doivent être affichées ou non |
loop | booléen | FAUX | Si la vidéo doit ou non faire boucle |
autoplay | booléen | FAUX | Si la vidéo devrait ou non jouer automatiquement |
muted | booléen | FAUX | Si la vidéo doit être muette ou non |
La page d'accueil est le fichier /content/index.md .
La layout de la page d'accueil doit être réglée à home dans la masse. La page d'accueil prend en charge les propriétés les plus élémentaires, mais la propriété permalink ne doit pas être utilisée.
La propriété entries supplémentaires vous permet de spécifier exactement les projets que vous souhaitez apparaître sur la page d'accueil. Si la propriété entries n'est pas remplie, la page d'accueil affichera automatiquement tous les projets en ordre avec le plus récent.
Ceci est un exemple de la propriété entries utilisées:
---
layout : home
entries :
- portfolio-starter
- sample-project-muybridge
- sample-project-optics
- sample-project-eames
- sample-project-letters
- sample-project-traffic-signs
---
La première image featured pour chaque projet est montrée. Si aucune image n'est featured , la première image sera affichée.
La page de blog est le fichier /content/posts.md .
La layout de la page de blog doit être définie sur posts dans la masse. La page de blog prend en charge les propriétés de base. Markdown écrit sous la masse de front n'est pas affiché.
La page d'erreur 404 est le fichier /content/404.md .
La layout de la page d'erreur 404 doit être définie sur error dans le frontmatter. La page d'erreur prend en charge uniquement les propriétés de base layout et title . La propriété permalink ne doit pas être utilisée.
La page RSS est le fichier /content/rss.md .
La layout de la page RSS doit être définie pour feed dans la masse. La page RSS prend en charge uniquement les propriétés de base layout et title . La propriété permalink ne doit pas être utilisée.
Le flux RSS est automatiquement publié sur /feed.xml , donc par exemple https://yoursite.com/feed.xml . Si vous souhaitez ajouter un lien RSS dans votre navigation, consultez les conseils de base des propriétés pour ajouter un lien externe.
Tous les supports sont stockés dans le dossier /content/media .
Les fichiers multimédias doivent être aussi petits que possible pour économiser de l'espace dans votre référentiel GitHub et votre hébergement. En savoir plus sur les limites du référentiel de GitHub. Les fichiers multimédias plus petits se chargeront également plus rapidement pour vos lecteurs.
Les petites images doivent être d'environ 800 pixes de large, les images moyennes doivent être d'environ 1400 pix de largeur et les grandes images doivent avoir environ 3000 pix de largeur. Des images avec de grandes zones de couleur plate peuvent fonctionner mieux comme PNG. Les images avec plus de détails telles que la photographie doivent être enregistrées en JPG.
Plus vous ajoutez d'images à une page, plus il faudra pour que cette page se charge. Soyez judicieux sur le nombre d'images que vous ajoutez à une page.
Comme mentionné ci-dessus, il s'agit d'une base de code délibérément basique qui accueille le bricolage.
Des personnalisations plus petites telles que la modification du CSS peuvent être effectuées sans la ligne de commande en modifiant le fichier CSS directement dans GitHub. Il est préférable de les personnaliser plus étendues en se développant localement avec la ligne de commande. Reportez-vous à la documentation Eleventy si vous souhaitez modifier les dispositions ou les extraits de Nunjucks dans /_includes .
Ce sont quelques suggestions pour modifier et étendre ce site:
/_includes/layouts/base.njk pour créer un pied de page plus complexeclient ou categoryimgix afin que vos médias ne vivent pas sur githubSi vous êtes intéressé par notre aide à apporter des modifications, nous contacter et nous en discuterons!
