Comment créer et héberger un blog Gatsby

Gatsby : Guide du débutant pour créer et héberger un blog avec Orbiter

Gatsby, l'un des principaux générateurs de sites statiques construit sur React, simplifie le processus de création de sites Web dynamiques. Lancé en 2015 en tant que projet open source, c'est désormais un choix populaire pour les développeurs, après avoir été acquis par Netlify en 2023. Alors que Netlify propose un hébergement robuste, Orbiter propose une alternative plus simple et plus conviviale spécialement conçue pour les sites Gatsby. Ce didacticiel vous guide dans la création et le déploiement d'un blog Gatsby de base sur Orbiter.

Démarrage : prérequis et configuration du projet

Avant de commencer, assurez-vous d'avoir les éléments suivants :

1. Un compte Orbiter gratuit (l'inscription est simple).
2. Node.js v18 ou version ultérieure (facilement téléchargeable s'il n'est pas déjà installé).
3. Un éditeur de code (VSCode, Zed ou votre choix préféré).

Ouvrez votre terminal et accédez au répertoire de votre projet :

<code class="language-bash">cd my-projects-folder</code>

Nous utiliserons un modèle de blog Gatsby prédéfini pour plus de facilité d'utilisation. Exécutez cette commande dans votre terminal :

<code class="language-bash">npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog</code>

Cela initialise le projet et installe les dépendances nécessaires. Le terminal affichera alors des instructions supplémentaires, similaires à celles-ci :

<code>  cd gatsby-starter-blog
  gatsby develop</code>

Suivez ces instructions. Tout d'abord, changez de répertoire :

<code class="language-bash">cd gatsby-starter-blog</code>

Ensuite, démarrez le serveur de développement local :

<code class="language-bash">gatsby develop</code>

Accédez à votre blog sur http://localhost:8000. Vous verrez un exemple de blog avec des articles réservés.

Personnaliser votre blog

Ouvrez le projet dans votre éditeur de code et localisez gatsby-config.js. Ce fichier contient des métadonnées du site. Modifiez la section siteMetadata pour refléter les détails de votre blog. Par exemple :

<code class="language-javascript">siteMetadata: {
  title: `My Gatsby Blog`,
  author: {
    name: `Your Name`,
    summary: `Your brief bio`,
  },
  description: `A description of your blog`,
  siteUrl: ``, // Leave blank initially, or use your future Orbiter URL
  social: {
    twitter: `yourTwitterHandle`,
  },
},</code>

Enregistrez vos modifications ; le navigateur se mettra à jour automatiquement. Remplacez l'image de l'auteur par défaut (src/images/profile-pic.png) par la vôtre.

Ensuite, accédez au dossier content/blog. Supprimez les messages d'espace réservé inutiles et n'en laissez qu'un. N'oubliez pas que Gatsby utilise une structure de dossiers dans laquelle chaque publication est un dossier (par exemple, my-first-post) contenant un fichier index.md et tous les éléments associés.

Modifiez le fichier index.md restant pour ajouter votre contenu. Utilisez la syntaxe Markdown (ou un éditeur WYSIWYG). Mettez à jour le texte de présentation (la section YAML en haut) pour ajuster le titre et la description du message.

Après avoir enregistré, vos modifications seront reflétées sur http://localhost:8000.

Déployer votre blog sur Orbiter

Une fois que vous êtes satisfait, créez votre site :

<code class="language-bash">npm run build</code>

Cela génère les fichiers nécessaires dans le dossier public.

Connectez-vous à votre compte Orbiter et cliquez sur « Télécharger le site ». Sélectionnez le dossier public. Choisissez un sous-domaine pour votre site et cliquez sur "Créer". Votre blog sera en ligne dans quelques instants !

Pour mettre à jour votre site, reconstruisez (npm run build), puis dans Orbiter, cliquez sur l'icône en forme d'engrenage, sélectionnez « Mettre à jour le site » et téléchargez le dossier public mis à jour.

Conclusion

Gatsby simplifie la création de sites statiques, notamment pour les blogs. Orbiter rend le déploiement incroyablement facile. Commencez à créer votre blog Gatsby dès aujourd’hui ! Mon exemple de site est disponible sur : [Votre URL Orbiter]. N'oubliez pas de remplacer cet espace réservé par l'URL réelle de votre site.

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!