Comment construire un blog de développeur avec Gatsby et MDX

Vous pouvez facilement publier vos idées sur des sites comme Dev.to, Hashnode ou Medium, mais l'idéal est d'avoir un contrôle total sur votre propre contenu. Il existe une liste toujours croissante d'outils pour créer votre propre site Web et contrôler votre propre contenu. Dans ce vaste tutoriel, je couvrirai comment vous pouvez faire briller votre contenu à l'aide de Gatsby, avec les cloches et les sifflets ajoutés avec un tel écosystème.

J'ai utilisé à l'origine Jekyll pour publier mon blog, mais je suis ensuite passé à Gatsby, en utilisant le modèle Lumen. J'utilise Gatsby depuis la version 0, vers mai 2017.

Je vais passer d'un bonjour, monde! GATSBY PROJET À UN BLOG CODING AVEC LA SYNTAXE DE CODE et une bascule de thème pour cette bonté en mode sombre.

Il y a un riche écosystème de plugins, de débutants et de thèmes disponibles pour Gatsby pour vous opérer rapidement, mais je veux adopter une approche de divulgation progressive pour présenter Gatsby, en me concentrant sur le fonctionnement d'un projet Gatsby.

Pourquoi Gatsby?

Gatsby est un générateur de sites statique, il n'y a donc pas de génération dynamique de pages lorsque les pages sont demandées. La sortie construite pour un site GATSBY peut être hébergée sur un CDN, ce qui la rend à l'échelle mondiale et super évolutive.

GATSBY peut utiliser des fichiers Markdown pour créer des pages dans un projet de site. GATSBY lira les fichiers Markdown dans le système de fichiers GATSBY et transformera le Markdown en HTML, puis lors de la création du site, créez des pages statiques.

Le résultat final est un site super rapide avec peu de latence lors de la demande des pages.

Markdown et MDX

Je documente mon parcours de développement depuis 2016 à Markdown. Markdown offre un moyen d'activer une modification simple dans des fichiers en texte brut qui peuvent être convertis en html.

MDX (ou Markdown JSX) est un outil qui vous permet d'écrire JSX dans vos documents Markdown, un peu comme ceci:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Gatsby est de loin le meilleur cadre que j'ai utilisé pour travailler avec Markdown et MDX, car il n'y a pas de notation spéciale nécessaire ci-dessus en utilisant Frontmatter sur vos messages.

de quoi ai-je besoin?

Si vous allez suivre, il y a quelques choses dont vous aurez besoin:

• Une configuration de développement Web de base: nœud, terminal (bash, zsh ou poisson)
• un éditeur de texte
• Une compréhension de base de la réact

Si vous n'en avez pas, il y a à la fois des codes de code Stackblitz et GitHub où vous pouvez créer un référentiel GitHub vide et commencer avec un environnement de développement à partir de là.

J'utiliserai VS Code comme éditeur de texte et mon fil en tant que gestionnaire de package préféré dans les exemples ci-dessous. Si vous préférez le NPM, c'est cool. ?

Vous pouvez également trouver le code complet de ce tutoriel sur GitHub.

D'accord, il est temps de commencer!

Bonjour, monde!

Il est temps de tourner un projet Gatsby. Je vais faire la majorité de cela à partir de la ligne de commande pour commencer:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

cool. Maintenant, avant d'aller ailleurs avec cela, je vais devoir ajouter un fichier .gitignore avant d'installer des modules NPM:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Maintenant, je peux installer toute la bonté du NPM dont j'ai besoin sans que le code Git ne me crie à propos de trop de changements actifs. Installons maintenant certaines dépendances pour être opérationnelles avec Gatsby:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Ensuite, nous ajouterons le premier composant React (de plusieurs) pour le projet. J'ajouterai ce qui suit au fichier index.js que j'ai créé:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Je suis maintenant prêt à exécuter la commande gatsby développe à partir de la ligne de commande:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

Cela fera tourner le Gatsby Dev Sever et dire que mon projet est disponible pour afficher dans le navigateur sur le port 8000 (le port GATSBY par défaut). L'URL est http: // localhost: 8000 /.

L'utilisation des commandes binaires Gatsby directement à partir de l'interface de ligne de commande (CLI) est totalement faisable, mais la plupart des gens ajouteront les commandes disponibles à la section Scripts sur le fichier package.json, comme ceci:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

en bonus supplémentaire, il y a quelques extras qui peuvent être ajoutés aux scripts Gatsby ici.

Si nous ne voulons pas exécuter le projet sur le même port à chaque fois, il peut être modifié avec l'indicateur -p et un port spécifié après cela. Par exemple, Gatsby développe -p 8945.

Si nous voulons ouvrir l'onglet du navigateur une fois que le projet est prêt, nous pouvons ajouter -O au script.

Je ferai de même avec le script de service, donc je sais que lorsque j'ai construit un projet, c'est sur un port différent de celui de développement:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Et avec cela, le "bonjour, le monde!" Bienvenue est terminée et je peux continuer avec le reste de ce post! ?

Enfin, je vais commettre les modifications que j'ai apportées jusqu'à présent:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Contenu pour le blog

D'accord, il n'y a pas beaucoup de choses avec le projet en ce moment, donc d'abord j'ajouterai du contenu, à partir de la ligne de commande:

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

Je vais les utiliser tout au long des exemples que je fais.

Vous remarquerez l'extension de fichier .mdx. Ceci est un fichier mdx.

Front Matter

Avant d'ajouter du contenu pour le blog, je devrai parler de Front Matter.

Front Match est un moyen de stocker des informations sur le fichier qui peut être utilisé par Gatsby lors de leur création de pages. Pour l'instant, j'ajouterai un titre de la publication et une date. Je vais également leur ajouter du contenu. Voici notre premier article:

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

Voici notre deuxième post:

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

un troisième message:

<span><span>---
</span></span><span><span><span>title: Second Post!
</span></span></span><span><span><span>date: 2021-03-07</span>
</span></span><span><span>---</span>
</span>
This is my second post!

C'est tout pour les messages pour l'instant, car ces messages ne sont pas encore reconnus par Gatsby comme des pages. Je devrai faire savoir à Gatsby où trouver du contenu à ajouter au projet. Pour ce faire, je vais ajouter un fichier de configuration à Gatsby.

Commençons les modifications que j'ai apportées à Git:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

gatsby config

La configuration de Gatsby est ce qui est utilisé pour définir et configurer les nombreux plugins Gatsby que vous pouvez utiliser. En savoir plus sur l'éco-système du plugin Gatsby dans un peu. Pour l'instant, je vais créer le fichier, encore une fois dans le terminal:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Cela crée le gatsby-config.js à la racine du projet afin que je puisse commencer à configurer Gatsby pour lire les fichiers .mdx que j'ai créés plus tôt.

les plugins Gatsby

Maintenant, je peux installer et configurer les plugins que Gatsby a besoin pour trouver et afficher les fichiers que j'ai créés. Je vais tous les installer maintenant et détailler brièvement à quoi ils servent:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

un aperçu rapide du package.json montre maintenant que j'ai installé la version de dépendance suivante:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Une chose à noter est que, dans Gatsby, il n'est pas nécessaire d'importer React dans vos composants avec React 17. Mais pour exhaustivité, et pour éviter toute confusion, je l'inclure dans ces exemples.

Maintenant, je dois configurer Gatsby-Plugin-MDX et Gatsby-Plugin-MDX. Dans le fichier gatsby-config.js, je vais ajouter ceci:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

commettre des modifications jusqu'à présent:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

gatsby graphql

Il est maintenant temps de voir où je suis avec les fichiers de Gatsby en utilisant le client Gatsby GraphQL, Graphiql. Vous avez peut-être remarqué, si vous suivez, que la CLI indique deux emplacements URL pour afficher le projet:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Je vais utiliser l'itinéraire ___graphql (trois soulignements) maintenant pour voir les fichiers du système de fichiers.

Si cela semble un peu intimidant, je vais essayer de couvrir toutes les parties qui peuvent ne pas sembler avoir beaucoup de sens. Si vous suivez, vous devriez être bien en copie les exemples dans l'explorateur Graphiql.

Lorsque j'ouvre l'explorateur Graphiql, j'ai plusieurs panneaux d'explorateur. Ce sont toutes des données disponibles à explorer dans le projet et dépend de ce que j'ai configuré dans le fichier gatsby-config.js.

Le panneau de requête GraphiQL et les résultats sont à côté. C'est là que j'écrirai des requêtes GraphQL pour récupérer les données dont j'ai besoin. Il y a aussi une section de variables de requête au bas du panneau de requête, et j'y reviendrai plus tard.

à l'extrême droite se trouve l'explorateur de documentation GraphQL. En raison de la frappe stricte de GraphQL, cela signifie qu'il est en mesure de générer sa propre documentation sur ses données. Mais c'est en dehors de la portée de ce post.

interroger les fichiers locaux avec GraphQL

Ensuite, je vais interroger pour les fichiers que j'ai ajoutés plus tôt dans le panneau de requête GraphiQL. Dans cette requête, je demande le titre et la date définis dans la police des fichiers:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Si nous le faisons dans le panneau de requête, appuyez sur le bouton Big Play, nous récupérons certaines données dans le panneau de résultats. Nous pouvons également utiliser l'explorateur dans le panneau de gauche pour choisir les données. Voici ce que j'obtiens après avoir exécuté la requête:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Il s'agit d'un grand objet JSON avec les informations pertinentes que nous avons demandées dans la requête. Nous verrons comment l'utiliser bientôt. Pour l'instant, cela signifie que nous pouvons utiliser ces données dans le projet Gatsby pour créer des pages.

Métadonnées du site

Dans le fichier Gatsby-Config.js, il existe également une option pour spécifier les métadonnées du site. Les métadonnées du site sont destinées lorsque je souhaite réutiliser des données communes comme le titre et la description du site.

Ce sera utile plus loin sur la route lorsque je souhaite ajouter des balises Meta au site pour l'optimisation des moteurs de recherche (SEO). (Encore une fois, plus à ce sujet plus tard.) Pour l'instant, je vais définir certaines informations de base sur le site dans le Gatsby-Config.js avec l'objet Sitemetadata.

i pourrait définir le site metada directement dans le module.Exports comme SO:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

L'objet de métadonnées du site peut devenir un peu grand, et j'ai trouvé que le garder dans son propre objet peut le rendre un peu plus simple à raisonner, donc je vais le définir séparément:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Ensuite, ajoutez l'objet Sitemetadata au fichier de configuration de Gatsby:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Maintenant, je peux à nouveau passer à l'explorateur Graphiql et interroger les métadonnées de ce site avec la requête suivante:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

C'est toujours une bonne idée d'arrêter et de redémarrer le serveur de développement si vous apportez des modifications au fichier gatsby-config.js, donc je vais le faire ( ctrl c , puis le fil se développe), puis dans l'explorateur Graphiql, actualisez la page et réduisez à nouveau la requête pour récupérer les données:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

Faire un crochet de métadonnées du site

Maintenant que j'ai les métadonnées du site dans le système de fichiers GATSBY, je peux le demander partout où je veux l'utiliser avec le crochet de requête statique Gatsby UsestaticQuery. Je vais tuer le serveur de développement et redémarrer après avoir ajouté ce qui suit au fichier src / pages / index.js:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Une note rapide sur une partie de la notation là-bas: const {site: {sitemetadata},} est un moyen rapide d'accéder aux données de la requête du site, où je tire le Sitemetadata à partir de l'objet du site. Ceci est appelé destructeur.

Maintenant, après avoir recommencé le serveur de développement, je peux passer à la console du navigateur ( Control Shift J dans Windows / Linux, Commande Option J sur macOS) et voyez l'objet Sitemetadata dans la sortie de la console.

J'obtiens la sortie de la console suivante:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Ne vous inquiétez pas de l'avertissement de la console pour une page 404 manquante introuvable (net :: err_aborted 404 (non trouvé)). Je vais faire ça plus tard.

Pour éviter d'avoir à écrire cette requête à chaque fois, je veux l'utiliser dans un composant. Je vais résumer cela dans son propre crochet:

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

Maintenant, je vais ajouter un crochet au fichier SRC / Hooks / Use Use-Site-Metadata.js pour obtenir les métadonnées du site à la demande:

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

Vous avez peut-être remarqué que cette requête n'est pas la même que celle de The Graphiql Explorer:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Il s'agit de nommer la requête. Parce que j'utiliserai beaucoup de requêtes dans le projet, il est logique de leur donner des noms significatifs.

Maintenant, je vais implémenter le nouveau crochet dans le fichier src / pages / index.js:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

C'est beaucoup moins verbeux, et je suis capable de choisir les éléments que je veux sur le site_metadata_query.

Il est temps de commander les modifications apportées jusqu'à présent:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Style avec un thème ui

Pour styliser ce projet, je vais utiliser l'interface utilisateur du thème, en raison de sa vitesse avec la mise en œuvre des mises en page et des fonctionnalités comme le mode sombre. Je détaillerai ce qui est pertinent pour ce que je fais et les raisons, bien que ce ne soit pas un guide sur la façon d'utiliser l'interface utilisateur du thème.

Il y a quelques dépendances supplémentaires à ajouter pour l'interface utilisateur du thème, qui sont:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Avec ceux installés, je devrai ajouter le gatsby-plugin-thème-ui au tableau de plugin gatsby-config.js:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

Maintenant, si je m'arrête et redémarre le serveur de développement, j'ai un site légèrement différent! Tout est devenu un peu bleu - ou de perwinkle, pour être précis! Ceci est le Gatsby-Plugin-THEME-UI qui fait son truc et cette couleur est la valeur par défaut.

Le plugin GATSBY pour l'interface utilisateur de thème offre de nombreuses options de configuration, dont certaines je couvrirai plus en détail en cas de besoin. Pour l'instant, je vais créer un dossier et définir un objet de thème pour l'interface utilisateur du thème:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

Dans le fichier SRC / Gatsby-Plugin-THEME-UI / index.js, je vais ajouter quelques préréglages d'interface utilisateur, définir l'objet de thème et répartir dans le préréglage suisse au thème, aux couleurs du thème et aux styles.

Pour le mode sombre, j'utilise le préréglage de l'interface utilisateur du thème profond et je diffuse dans l'objet modes pour Dark. (Plus de choses à ce sujet bientôt.) Pour l'instant, sachez que cela va s'occuper de beaucoup de théâtre pour moi:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Maintenant, si je redémarre le serveur de développement (encore une fois, oui, vous apprendrez à y faire face), il sera un peu plus acceptable avec le thème suisse appliqué. Au moment de la rédaction du moment de la rédaction, l'interface utilisateur du thème ne rafraîchit parfois pas la page locale, il est donc nécessaire de réaliser une page de navigateur.

commettre les changements jusqu'à présent à Git:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Il est temps d'ajouter des composants de réaction!

Composant de mise en page

Gatsby n'a pas de mise en page spécifique, donnant cette responsabilité au développeur. Dans ce cas, je fais une disposition pour tout le site. Il est possible d'incorporer de nombreuses dispositions à utiliser dans un projet Gatsby, mais pour cet exemple, j'utiliserai un seul.

Maintenant, je vais refactor ce que j'ai actuellement afin que tout soit enveloppé par un composant de mise en page. Ce que j'ai actuellement dans src / pages / index.js peut être utilisé pour un composant d'en-tête, donc je vais faire quelques fichiers maintenant pour la mise en page et l'en-tête:

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

maintenant pour déplacer le titre et la description de Src / pages / index.js au composant SRC / Components / en-tête nouvellement créé.

Plutôt que de faire utiliser les usages dettemetadata dans le composant d'en-tête, je vais passer les accessoires USETITEMETADATA dont j'ai besoin à l'en-tête de la composante de mise en page, où l'en-tête va vivre. (Plus d'informations à ce sujet.

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

J'ai ajouté dans certains styles de base en utilisant les éléments de mise en page de l'interface utilisateur du thème. Cela semble un peu différent d'Avant: Box, lien, rubrique… quoi? Ce sont tous des composants d'interface utilisateur de thème qui peuvent être utilisés pour les dispositions, les éléments de forme et plus encore.

Vous pouvez remarquer l'hélice AS = {GatsByLink} Ajouté au composant de liaison. Cela utilise l'AS Prop dans l'interface utilisateur du thème et permet au composant passer dans les styles d'interface utilisateur de thème.

Il y a un excellent article de Paul Scanlon expliquant plus en détail comment cela se fait dans l'interface utilisateur du thème. Pour une explication vraiment complète de l'interface utilisateur du thème, il y a aussi «Comprendre l'interface utilisateur du thème» par le même auteur.

Il y a aussi les accessoires SX et variants de l'interface utilisateur du thème. SX permet de passer des styles supplémentaires au composant. Considérez-le comme un équivalent du style jsx = {{}} prop. L'hélice variante permet d'appliquer un groupe de styles prédéfinis du thème au composant utilisé.

maintenant pour le composant de mise en page, qui est situé dans SRC / Components / Layout.js:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Ici, je garde le crochet USETITEMETADATA et passant les accessoires dont la composante d'en-tête a besoin, encore une fois avec le SX Prop pour ajouter quelques styles de base à l'alignement à la div contenant principale. Ensuite, je crée un emballage principal pour les enfants.

L'application des enfants doit renvoyer tout ce que le composant de mise en page résume, qui comprendra tout ce à quoi je souhaite appliquer la mise en page. Par exemple:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Cela renverra tout dans le composant de mise en page et ce qu'il enveloppe. Dans l'exemple ci-dessus, ce sera actuellement l'en-tête et le H1 enveloppé par le composant de disposition.

Par exemple, je reviendrai à la page d'index (src / pages.index.js) et ajoutera ce qui suit:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Le résultat est l'en-tête, fourni dans le composant de disposition et le H1 Ceci est enveloppé.

Index Page publie la requête

Il est maintenant temps d'obtenir les articles que j'ai créés au début et de les afficher sur la page d'index comme une liste de liens cliquables.

Pour obtenir les informations de publication, je recréerai la requête que j'ai faite dans la section sur l'interrogation des fichiers locaux avec GraphQL avec quelques bits supplémentaires:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

J'ai ajouté dans l'ID du nœud et de la limace. Ceci est le chemin du fichier vers les fichiers .mdx.

L'extrait utilise une fonction Gatsby pour obtenir les 250 premiers caractères du corps du poteau, ajoutant également un peu de formatage à la date avec une autre fonction Gatsby intégrée.

Ensuite, pour commander les messages dans la date de décès de la date, j'ai ajouté un tri: allmdx (tri: {champs: [frontmatter___date], ordre: desc}) {. Ceci est le tri à la date des poteaux Front Matter.

L'ajout de l'explorateur Graphiql me donne ce résultat:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Maintenant, je peux utiliser cette requête dans le fichier src / pages / index.js pour obtenir ces données à utiliser dans la page d'index. Dans la fonction IndexPage, je vais détruire les données des accessoires donnés au composant via la requête GraphQL:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Ceci utilise les composants précédemment détaillés. Notez que l'extrait, le frontmatter et la limace sont détruits à partir des données.Allmdx.Nodes:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

cliquer sur les liens m'emmènera sur la page 404 de développement Gatsby.js. C'est parce que je n'ai pas encore fabriqué les pages pour les fichiers .mxd. C'est le suivant.

Je vais commettre ce que j'ai fait jusqu'à présent avant de continuer:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

en utilisant l'API de route Gatsby File System avec MDX

Je vais utiliser l'API de route du système de fichiers Gatsby pour obtenir les chemins de fichier des messages que j'ai créés plus tôt. L'API de route du système de fichiers est un moyen de créer des pages par programme à partir de mes données GraphQL.

Cette approche a une notation de fichiers spéciale pour la page qui sera ciblée lorsque Gatsby génère les données du système de fichiers au moment de la construction. Le fichier indique le nœud et la limace. Je vais d'abord créer le fichier, puis détaillé d'où vient les données:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

Dans le fichier, je vais définir une requête GraphQL pour les données que je souhaite inclure dans ce modèle:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

Maintenant, c'est beaucoup de code, donc je vais le décomposer. C'est principalement à voir avec la requête GraphQL:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Le début de la requête est en train de prendre un limace avec post_by_slug ($ slug: string), et le nœud principal est mdx, donc j'utilise mdx.slug comme le nom de fichier {mdx.slug} .js.

Si je prends cette requête et je le colle dans mon explorateur Graphiql et que j'appuie sur le bouton de lecture, j'obtiens ceci:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

C'est parce qu'il n'y a pas de variable définie pour $ slug dans l'explorateur Graphiql. Si vous regardez le bas du panneau de requête, vous verrez qu'il existe une section Variables de requête. Cliquez sur cela l'élargira. Voici où je dois ajouter une variable pour Slug. Je vais le définir en accolades bouclées avec le chemin de l'un des fichiers:

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

En exécutant à nouveau la requête, j'obtiendrai toutes les données de ce fichier. J'ai commenté la sortie du corps pour la lisibilité:

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

Ce que fait l'API de route du système de fichiers, c'est passer les chemins de fichier individuels dans la requête de la page dans src / pages / {mdx.slug} .js et renvoyer les données à la page de cette requête dans le ({data})) l'hélice étant transmise à la page.

Dans ce fichier, vous remarquerez peut-être que j'ai détruit le corps des données renvoyées, puis le titre de la masse de front, dans une destructure à deux niveaux:

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

Une autre façon de le faire serait:

<span><span>---
</span></span><span><span><span>title: Second Post!
</span></span></span><span><span><span>date: 2021-03-07</span>
</span></span><span><span>---</span>
</span>
This is my second post!

L'utilisation de destructuration le rend beaucoup moins verbeux.

Une dernière chose à noter est le mdxRenderer enroulant le corps du poteau. C'est tout inclus dans le fichier .mdx après le bloc avant de la matière. Le MDX compilé de la requête Graphiql, qui a été commenté, est ce qui doit être emballé dans le MDXRenderer:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Je vais commettre les modifications maintenant:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Root Root Wrapper Concept

Cliquez maintenant sur l'un des liens de la page Index m'emmènera à la page .mdx souhaitée, mais elle semble un peu différente de la page d'index, non?

C'est parce qu'il n'y a pas encore de mise en page en train de l'enrouler. C'est là que je peux utiliser l'API du navigateur GATSBY et utiliser la fonction WrappageElement pour envelopper tous les éléments de la page. Il est également recommandé d'utiliser la même fonction dans Gatsby SSR.

Pour éviter de dupliquer le même code dans deux fichiers, je vais créer un troisième fichier avec le code réel que je vais utiliser et l'importer dans les deux fichiers Gatsby- * mentionnés.

Tout d'abord, je vais créer les fichiers nécessaires:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Le fichier de wrapper root est l'endroit où j'utiliserai la fonction WrappageElement:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Ensuite, dans les fichiers gatsby-browser.js et gatsby-ssr.js, j'ajouterai ceci:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

s'il y a des modifications nécessaires à la fonction WrapPageElement, je peux le faire dans un fichier root-wrapper.js.

Il est temps d'arrêter et de redémarrer à nouveau le serveur de développement pour voir les modifications prendre effet!

Parce que le composant de mise en page est utilisé ici pour envelopper tous les éléments de la page sur le site, il n'est plus nécessaire de le garder sur la page d'index, donc je vais supprimer cela de Src / Pages / Index.js:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

Je vais commettre les modifications jusqu'à présent avant de passer à autre chose:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

404 Page

Il est temps de faire cette page 404!

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Dans le fichier src / pages / 404.js, je vais et ajouter un message:

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

Maintenant, je peux accéder directement à la page 404 pour le vérifier: http: // localhost: 8000/404.

Notez que, lors du développement à l'aide de Gatsby Develop, Gatsby continuera à utiliser la page 404 par défaut qui remplace votre page 404 personnalisée.

Engagez ceci et passez à la partie suivante:

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

togle du thème sombre

Le mode sombre est une caractéristique essentielle du codage des blogs. (Je dis que la moitié en plaisantant, au cas où vous n'étiez pas sûr!) Je vais utiliser le hook de mode UI Color UseColorMode et faire une simple bascule entre les deux modes que j'ai définis dans l'objet thème plus tôt. Voici ce qui s'ajoute à SRC / Components / Header.js:

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

Mais cela n'a pas fière allure, donc je vais envelopper le conteneur avec le composant Flex de l'interface utilisateur du thème et déplacer le bouton vers la droite:

<span><span>---
</span></span><span><span><span>title: Second Post!
</span></span></span><span><span><span>date: 2021-03-07</span>
</span></span><span><span>---</span>
</span>
This is my second post!

git s'engager avant de passer à la section suivante:

<span><span>---
</span></span><span><span><span>title: Third Post!
</span></span></span><span><span><span>date: 2021-03-08</span>
</span></span><span><span>---</span>
</span>
This is my third post!

<span>> with a block quote!
</span>
And a code block:

<span><span>```js
</span></span><span><span><span>const wheeeeee = true;</span>
</span></span><span><span>```</span>
</span>

Blocs de code

Les blocs de code semblent un peu meh en ce moment, donc je vais ajouter une syntaxe qui met en évidence avec l'un des nombreux packages d'interface utilisateur à thèmes à pâte pratique. Celui que j'utilise pour ceci est le prisme.

Je devrai installer le package et créer un composant dans le dossier Gatsby-Plugin-THEME-UI appelé Components.js:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Dans ce fichier, je devrai définir où je veux appliquer les styles de prisme, qui sont toutes les balises pré et de code:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

avec ceci défini, je devrai également définir dans l'objet thème quel thème prisme que je veux utiliser:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Un autre arrêt et démarrage du serveur de développement sont nécessaires pour voir les modifications prendre effet!

commettre les modifications et passer à la section suivante:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Ajouter des composants au mdx

Ce prochain bit est facultatif. Markdown JSX permet aux composants React (JSX) d'être inclus dans le Markdown. Pour démontrer cela, je vais ajouter un composant RainbowText qui animera certaines couleurs sur un cycle d'animation. Il y a une dépendance supplémentaire dont j'ai besoin pour l'animation: les images clés de @ emotion / react. Je vais installer cela maintenant:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

Cela va probablement saccager le serveur de développement s'il est en cours d'exécution, donc je vais l'arrêter pour le moment.

Dans le fichier SRC / Components / Rainbow-Text.js, j'ajouterai ce composant:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

Comme cela est facultatif, je n'entrerai pas dans les détails sur ce qui se passe ici. Sachez simplement que c'est un bel effet CSS à avoir sur le plan de volant.

Avec ce composant créé, je peux l'importer dans n'importe quel fichier .mdx dans lequel je souhaite l'utiliser. Dans cet exemple, je l'ajoute à Content / 2021/03 / Third-Post / index.mdx. Voici le Diff du fichier maintenant que j'ai ajouté le composant:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Après avoir recommencé le serveur de développement, je peux aller au post où ce composant a été ajouté, et lorsque je survole le texte enveloppé dans Wheeeeeeee RainbowText>, je peux voir cette animation en effet .

Vous allez probablement grimacer à cette importation: ../../../. Encore et encore! Il y a un moyen de contourner cela, cependant, en utilisant le concept de wrapper racine que j'ai détaillé plus tôt et en utilisant le MDXProvider qui - ahem! - Fournir à MDX tous les composants que vous y transmettez.

Revenant à l'emballage racine (root-wrapper.js), je peux envelopper l'élément de page avec le MDXProvider et passer le composant RainbowText au MDXProvider:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Maintenant, je peux supprimer l'importation du fichier .mdx:

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

Après avoir arrêté et redémarré le serveur de développement, je peux aller à ce post et voir toujours le texte arc-en-ciel fonctionner. L'avantage supplémentaire d'ajouter des composants directement au MDXProvider est qu'il n'est pas nécessaire d'importer un composant dans le document .mdx lorsque vous souhaitez l'utiliser. Il est disponible via le fournisseur pour tous les documents MDX.

Je vais commettre cela maintenant:

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

Images Markdown

Si je veux ajouter des images à mes articles de blog, je peux les inclure dans les fichiers MDX, quelque chose comme ceci:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Le ./mdx-logo.png est un fichier que j'ai ajouté au dossier Content / 2021/03/06 / Hello-World, et je le fais référence en tant que fichier relatif. Ce n'est pas ça pour cela, cependant. Si je vais au Hello World Post, l'image affichée est cassée. Je vais devoir ajouter des images de Gatsby-Remark en tant que plugin à Gatsby-Plugin-MDX afin qu'il sache quoi faire avec les fichiers d'image:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Je devrai alors configurer les plugins dans gatsby-config.js:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

L'objet supplémentaire de Gatsby-source-FileSystem fait savoir à Gatsby où chercher les images à traiter.

Engagez ceci maintenant:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

SEO

Le référencement est très important si je veux que mon contenu trouve sur Internet par les moteurs de recherche, donc je devrai ajouter les balises Meta pertinentes à mon blog ici. Il peut s'agir d'un processus assez impliqué définissant toutes les balises pertinentes nécessaires, donc pour gagner du temps, j'ai créé un composant SEO React à utiliser dans Gatsby pour générer toutes les balises Meta nécessaires.

Je vais au fil Ajouter le composant avec les dépendances nécessaires pour que cela fonctionne:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

Je devrai ajouter le Gatsby-Plugin-React-helmet au tableau de plugin gatsby-config.js:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

Ensuite, il s'agit d'utiliser le composant SEO sur tout le site où je dois avoir des balises méta.

Le composant prend pas mal d'accessoires, dont beaucoup sont définis une fois sur le site, donc le meilleur endroit pour les ajouter serait dans l'objet Sitemetadata. Ensuite, je peux retirer ce dont j'ai besoin avec le crochet USETITEMETADATA.

Je vais ajouter plusieurs autres propriétés à l'objet Sitemetadata:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Si vous suivez, vous pouvez les modifier au besoin. Le siteurl peut être une URL factice pour l'instant. C'est pour aider à pointer des images nécessaires à une utilisation dans le protocole de graphe ouvert, et c'est l'image que vous voyez lorsque vous partagez un message que vous avez fait sur Twitter, Facebook, LinkedIn et Reddit, par exemple.

Maintenant que ces propriétés supplémentaires sont sur l'objet Sitemetadata, je devrai pouvoir les interroger. Actuellement, le crochet USETITEMETADATA n'a que le titre et la description, donc j'ajouterai le reste maintenant:

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

Je vais ajouter le composant SEO à toutes les pages. Tout d'abord, je ferai les pages de messages dans la page SRC / Pages / {mdx.slug} .js. C'est l'un des plus impliqués, donc je vais jeter la différence ici et détailler ce qui se passe:

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

Le siteurl, la limace et l'extrait sont nécessaires pour le lien canonique (très important en référencement) et l'extrait est pour la description de la méta.

J'utilise le hook Sitemetadata pour obtenir le reste des informations dont le composant a besoin. Le titre et TitleTemplate sont utilisés pour inventer ce que vous voyez dans l'onglet du navigateur.

L'article booléen est pour le composant, donc il peut créer la liste des effectifs au format JSONLD. Le reste des accessoires est d'aider à identifier l'auteur et la date publiée. ?

c'était beaucoup. J'espère que certains avaient du sens! Pour la portée de ce post, je vais le laisser là, mais il y a beaucoup plus à creuser sur ce sujet, et je veux dire beaucoup !

Heureusement, la page SRC / Pages / index.js est un peu plus simple!

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

J'ai intentionnellement laissé de côté l'image à partir des deux exemples. Si vous souhaitez créer vos propres images graphiques ouvertes à utiliser dans ce composant, consultez le post «Ouvrez Graph Images avec Gatsby et Vercel» pour ce faire avec une fonction sans serveur. ?

Maintenant, je peux construire le site (presque prêt pour la production), et une fois construit, je peux consulter la source de page pour les tags Meta:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Une fois la construction terminée, je peux utiliser le fil pour que le site construit soit servi localement sur localhost: 9000. Dans le navigateur, je peux afficher la source de page avec le raccourci clavier ctrl u . De là, je peux vérifier la balise de méta canonique, qui sera l'URL factice utilisée dans les métadonnées.

bien! Engagez cela à Git et passez à autre chose:

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Poussez-le vers GitHub

Vous vous demandez peut-être pourquoi j'ai fait des engagements Git à la fin de chaque section. C'est parce que je vais repousser le projet vers Github maintenant.

Je vais me connecter à mon compte GitHub et sélectionner l'icône Plus à côté de mon image Avatar dans le coin supérieur droit et sélectionnez le nouveau référentiel.

Dans le nom du référentiel, j'ajouterai le nom du projet My-Gatsby-blog mais laissez le reste des valeurs par défaut et cliquez sur Créer le référentiel.

L'écran suivant me donne les commandes de terminal dont j'ai besoin pour pousser mon projet local sur github:

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Une fois que vous avez mis tous ceux dans le terminal et appuyez sur Entrez , actualisez la page GitHub pour voir le nouveau projet!

Déployer

Il est temps de mettre ce bébé sur le Web! Il existe de nombreuses façons de le faire. Étant donné que Gatsby passe à une structure de fichiers plats, vous pouvez héberger un site Gatsby sur n'importe quel serveur de fichiers ayant accès à Internet.

Il existe de nombreux services qui offrent l'hébergement sur un CDN, beaucoup gratuitement! Des services comme Netlify, Vercel et Render vous permettra de pousser votre site construit à leurs CDN via une CLI, une intégration GitHub ou, dans le cas de Netlify, un glisser-déposer directement!

vercel

Pour déployer avec Vercel, vous aurez besoin d'un compte GitHub, GitLab ou Bitbucket pour vous authentifier. Ensuite, vous serez invité à installer le Vercel CLI:

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

Je l'ai déjà installé, alors maintenant c'est un cas d'exécution de la commande CLI:

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

Je suis ensuite invité à configurer et à déployer le nouveau projet. Je vais répondre au défaut de toutes les questions avec Entrez :

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

c'est tout. On me donne alors une URL de déploiement où je peux regarder la construction du site sur Vercel.

Dans le tableau de bord Vercel, je peux configurer le domaine et en acheter un chez Vercel si je veux. J'utilise personnellement namecheap.com, mais c'est une option.

netlify

Le déploiement avec Netlify via la CLI est à peu près le même qu'avec Vercel, mais je vais faire la création de glisser-déposer.

Pour l'authentification, j'aurai besoin d'un compte GitHub, Gitlab, Bitbucket ou de messagerie. Une fois que j'ai authentifié et connecté, je peux sélectionner des sites dans la barre de menu, alors une zone de dépôt souhaite déployer un nouveau site sans se connecter à Git? Faites glisser et déposez le dossier de sortie de votre site ici. Je vais naviguer dans mon explorateur de fichiers à la racine de mon projet et faire glisser et déposer le dossier public vers la zone de dépôt.

Netlify créera les fichiers et les déploiera dans une URL générée pour l'inspection. Très comme avec Vercel, Netlify vous permettra d'acheter un domaine là-bas et de le déployer.

rendu

Render n'a pas d'option CLI ou DROP et utilise à la place une intégration GitHub. Pour authentifier, j'aurai besoin d'un compte GitHub, Gitlab ou Google. Une fois que je me suis authentifié et connecté, je suis sur la section des services. À partir d'ici, je peux sélectionner un nouveau site statique puis entrez mon URL GitHub pour le projet que j'ai poussé vers GitHub plus tôt.

Sur la page suivante, je vais lui donner les paramètres suivants:

• Nom: My-Gatsby-blog
• branche: la valeur par défaut
• Build Command: Yarn Build
• Publier le répertoire: ./public

puis cliquez sur Créer un site statique.

attendez que le rendu fasse son truc, puis cliquez sur le lien sous le nom du projet pour voir le site en direct.

Render a également la possibilité de définir votre propre domaine personnalisé pour le site!

Plugins Gatsby en option

Il y a beaucoup plus de plugins Gatsby à choisir pour ajouter des fonctionnalités supplémentaires. Je vous laisse cela si vous voulez en ajouter plus. Par exemple:

• Voulez-vous intégrer des vidéos, des tweets, des runs de Strava, des coodepens et des codes et boîte? Découvrez Gatsby-Plugin-MDX-Embed.
• utilisez-vous une console de recherche Google / Bing? Ensuite, vous devrez générer un plan du site avec Gatsby-Plugin-Sitemap.
• Voulez-vous que votre site soit disponible hors ligne en tant que PWA? Ajouter Gatsby-Plugin-Offline.
• Voulez-vous avoir un favicon dans l'onglet Browser pour votre site? Découvrez Gatsby-Plugin-Manifest.

Analytics

Si vous souhaitez savoir à quel point votre site est populaire, il existe des options d'analyse. J'ai cessé d'utiliser Google Analytics il y a quelque temps sur mes propres projets, et je préfère maintenant plus d'alternatives axées sur la confidentialité. Celui que je recommande est Fathom Analytics. (J'ai un lien d'affiliation si vous souhaitez obtenir 10 $ de réduction sur l'abonnement de votre premier mois.)

Une autre alternative est plausible, dont j'ai aussi entendu de bonnes choses.

Pour implémenter Fathom Analytics sur un site Gatsby, je devrai ajouter une balise de script supplémentaire à la tête de mon site. Qu'est-ce que cela signifie? Eh bien, je devrai d'abord créer le site sur mon tableau de bord Fathom, puis aller sur https://app.usefathom.com/#/settings/sites, faire défiler vers le bas de la liste, ajouter mon nouveau site ( My-Gatsby-blog), puis cliquez sur obtenir le code du site. J'obtiens ensuite un modal contextuel avec le code du site. J'en aurai besoin pour le script que je vais ajouter à la tête de mon projet Gatsby. Voici à quoi ressemble le script:

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

Voici le diff de root-wrapper.js:

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

enveloppe!

c'est tout de moi. Merci beaucoup d'avoir atteint la fin. ?

J'espère que vous avez obtenu ce dont vous aviez besoin de ce guide assez étendu sur la mise en place d'un projet Gatsby à partir de zéro!

Si vous voulez tendre la main et dire bonjour, le meilleur endroit pour me procurer est sur Twitter.

Questions fréquemment posées (FAQ) sur le blog Gatsby MDX

Comment puis-je ajouter des images à mes articles de blog Gatsby MDX?

L'ajout d'images à vos articles de blog Gatsby MDX peut améliorer l'attrait visuel et rendre votre contenu plus attrayant. Pour ce faire, vous devez importer le fichier image dans votre fichier MDX. Tout d'abord, placez votre fichier image dans le répertoire «SRC» de votre projet GATSBY. Ensuite, dans votre fichier MDX, importez l'image à l'aide de la syntaxe: import ImageName à partir de '../path/to/image.jpg'. Après l'importation, vous pouvez utiliser l'image dans votre contenu MDX en utilisant le «ImageName» comme composant: .

Comment puis-je personnaliser la disposition de mon blog Gatsby MDX?

Gatsby MDX vous permet de personnaliser la disposition de vos articles de blog. Vous pouvez créer un composant de mise en page dans votre répertoire «SRC». Ce composant peut inclure des éléments comme un en-tête, un pied de page ou une barre latérale. Une fois que vous avez créé votre composant de mise en page, vous pouvez envelopper votre contenu MDX avec. Pour ce faire, importez le composant de mise en page dans votre fichier MDX, puis enveloppez votre contenu avec celui-ci: votre contenu MDX ici .

Comment puis-je ajouter des extraits de code à mon Gatsby MDX Articles de blog?

Gatsby MDX prend en charge l'inclusion des extraits de code dans vos articles de blog. Pour ajouter un extrait de code, vous pouvez utiliser les balises «pré» et «code». Enveloppez votre extrait de code avec ces balises comme celle-ci:

 <code> votre code ici </code> 

. Vous pouvez également spécifier le langage de l'extrait de code pour la mise en évidence de la syntaxe en l'ajoutant après le premier ensemble de backticks comme celui-ci: «` javascript.

Comment puis-je ajouter une table de contenu à mes articles de blog Gatsby MDX?

Une table des matières peut rendre vos articles de blog plus navigables. Gatsby MDX prend en charge la création d'une table des matières. Vous pouvez utiliser le champ «TableOfContents» dans votre requête GraphQL pour générer une table des matières. Ce champ renvoie un éventail de titres et leurs profondeurs respectives que vous pouvez utiliser pour créer une liste imbriquée pour votre table des matières.

Comment puis-je ajouter du référencement à mon blog Gatsby MDX?

Le SEO est crucial pour augmenter la visibilité de votre blog. Gatsby MDX vous permet d'ajouter du référencement à vos articles de blog. Vous pouvez utiliser le «Gatsby-Plugin-React-Helmet» pour gérer le responsable du document de vos articles de blog. Ce plugin vous permet d'ajouter des éléments comme le titre, la description et les balises de méta qui sont importantes pour le référence de votre blog en facilitant la navigation dans vos messages. Gatsby MDX prend en charge la pagination. Vous pouvez utiliser le plugin «Gatsby-Awesome-Pagination» pour créer des pages paginées. Ce plugin crée un index paginé et également un contexte paginé pour vos pages.

Comment puis-je ajouter des commentaires à mes articles de blog Gatsby MDX?

L'ajout d'une section de commentaires peut augmenter l'engagement sur votre blog. Gatsby MDX vous permet d'ajouter des commentaires à vos articles de blog. Vous pouvez utiliser des services tiers comme Disqus ou Commento. Ces services fournissent un script que vous pouvez inclure dans votre composant de mise en page pour activer les commentaires.

Comment puis-je ajouter des boutons de partage social à mes articles de blog Gatsby MDX?

Les boutons de partage social peuvent augmenter la portée de vos articles de blog. Gatsby MDX vous permet d'ajouter des boutons de partage social. Vous pouvez utiliser des plugins comme «Gatsby-Plugin-React-share» pour ajouter des boutons de partage social. Ce plugin prend en charge diverses plateformes de médias sociaux comme Facebook, Twitter et LinkedIn.

Comment puis-je ajouter une fonctionnalité de recherche à mon blog Gatsby MDX?

Une fonctionnalité de recherche peut améliorer l'expérience utilisateur de votre Blog en facilitant la recherche de messages spécifiques. Gatsby MDX prend en charge l'ajout d'une fonctionnalité de recherche. Vous pouvez utiliser des plugins comme «Gatsby-Plugin-ElasticLunr-Search» pour ajouter une fonctionnalité de recherche. Ce plugin crée un index de vos messages qui peuvent être recherchés à l'aide de mots clés.

Comment puis-je ajouter un formulaire d'abonnement à newsletter à mon blog Gatsby MDX?

Un formulaire d'abonnement à newsletter peut vous aider à créer un Liste des e-mails et gardez vos lecteurs à jour. Gatsby MDX vous permet d'ajouter un formulaire d'abonnement à la newsletter. Vous pouvez utiliser des services comme MailChimp ou SendinBlue. Ces services fournissent un formulaire que vous pouvez intégrer dans votre composant de mise en page pour activer les abonnements à la newsletter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!