Utilisez Astro + Vercel pour créer un blog statique personnel moderne à partir de zéro

1. Installez l’environnement local Node.js et Git

• Node.js (livré avec npm) : Accédez à https://nodejs.org/ pour télécharger, téléchargez le package d’installation de Node.js, double-cliquez pour installer et terminez l’étape suivante.
• Redémarrez la ligne de commande après l’installation, Exécutez node -v et npm -v pour voir le numéro de version, il devrait être correct.
• Git : Accédez à https://git-scm.com/download/win pour télécharger le package d’installation,
• Télécharger le package d’installation de Git Sélectionnez « Git à partir de la ligne de commande » lors de l’installation et d’autres valeurs par défaut sont utilisées.
• Vérifiez avec git --version après l’installation.
• Bien entendu, si vous utilisez l’IA, vous pouvez directement lui demander d’installer l’environnement pour vous. Voici juste une explication du contenu de l’environnement requis.

2. Créer un projet Astro

Recherchez un répertoire dans lequel vous placez votre code, ouvrez la ligne de commande et entrez astro pour créer l’échafaudage :
Prenons l’exemple de l’outil Microsoft VS Code IDE
Après avoir ouvert le dossier du projet Nouveau terminal Entrez la commande npm pour créer un projet astro

npm create astro@latest
#如果提示（How would you like to start your new project?）
#就是让你输入要创建到哪个文件夹内，
#直接输入.然后回车就是当前文件夹,但是文件夹内必须为空，否则不让你创
#这里我因为文件夹内有文件所以我创到了当前文件夹内的blog文件夹

Vous pouvez sélectionner le type de modèle en appuyant vers le haut ou vers le bas sur le clavier\

• Voici le blog que j’ai sélectionné
• L’étape suivante consiste à vous demander si vous devez installer automatiquement les dépendances et si vous devez initialiser un référentiel Git pour ce projet.
• Je dis oui ici, car nous devons utiliser l’entrepôt git pour obtenir des mises à jour automatiques lors du déploiement ultérieur de Vercel.

3. Exécutez le test

• Après l’installation, il affichera le contenu suivant Si vous avez créé le projet directement dans le dossier courant
  Ensuite, vous pouvez l’exécuter directement avec npm run dev, sinon vous devez d’abord cliquer sur cd pour ouvrir le répertoire du projet que vous avez créé, puis entrer pour l’exécuter
• Après exécution, une adresse d’accès locale http://localhost:4321/
  Accéder au contenu du projet de modèle d’aperçu

4. Écrivez un article

-Ici, nous utilisons des exemples officiels pour opérer
Le dossier src du projet contient la structure complète des répertoires du projet

src/
│
├── assets/ ──────────── 图片、字体等资源
│
├── components/ ──────── 可重复使用的小组件
│       │
│       ├── Header ───── 网站顶部
│       ├── Footer ───── 网站底部
│       └── BaseHead ─── HTML 基础信息
│
├── content/
│   └── blog/ ────────── 真正的 Blog 文章内容
│       │
│       ├── first-post.md
│       ├── second-post.md
│       └── third-post.md
│
├── layouts/
│   └── BlogPost.astro ─ 文章的“外壳/布局”
│
└── pages/ ───────────── 决定网站 URL 和页面
        │
        ├── index.astro
        │       └── /
        │
        ├── about.astro
        │       └── /about
        │
        └── blog/
                │
                ├── index.astro
                │       └── /blog
                │
                └── [slug].astro
                        └── /blog/文章名称

• Voici la structure et la fonction du répertoire Vous pouvez accéder directement à src\content\blog pour créer un nouveau fichier md et le publier en tant que nouvel article.
• Le contenu du paramètre de structure d’en-tête de contenu de l’article est utilisé pour l’extraction d’affichage du modèle
• //Exemple de contenu d’article

---
title: 'First post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 08 2022'
heroImage: '../../assets/blog-placeholder-3.jpg'
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

• src\pages\blog[…slug].astro est une page modèle affichée pour les articles de blog
• L’affichage final utilise le composant BlogPost

---
import { type CollectionEntry, getCollection, render } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
	const posts = await getCollection('blog');
	return posts.map((post) => ({
		params: { slug: post.id },
		props: post,
	}));
}
type Props = CollectionEntry<'blog'>;

const post = Astro.props;
const { Content } = await render(post);
---

<BlogPost {...post.data}>
	<Content/>
</BlogPost>

• Après avoir obtenu les paramètres, entrez l’espace réservé dans TDK ou affichez le contenu
• Vous pouvez modifier/créer l’article md par vous-même

5. Soumettre à github

• Connectez-vous à GitHub et créez un nouvel entrepôt https://github.com/new
• Vous pouvez vous référer aux paramètres suivants
• Tant que notre blog est privé, il n’est pas nécessaire de vérifier le reste.
• Après la création, il passera à la page initiale de référence.
• Il y aura un tas d’instructions initiales pour Git. Puisque nous avons déjà initialisé l’entrepôt lorsque nous avons créé astro, il nous suffit de nous engager et de pousser vers la branche principale.
• Bien sûr, vous pouvez également utiliser le git visuel de l’outil IDE pour fonctionner. Ici, je vais utiliser la commande comme exemple.

#先把当前项目文件添加至提交列表
git add .

#将add的文件commit到仓库
git commit -m "初始化"

#现在只是提交到了我们本地仓库列表内，接下来要同步到GitHub
#如果你电脑未连接过GitHub则需要先绑定GitHub账号
git config --global user.email "你的邮箱"
git config --global user.name "你的用户名"

#切换到main分支
git branch -M main
#换成你的仓库地址**https://github.com/Licy711/myblog.git**只是举例
git remote add origin "https://github.com/Licy711/myblog.git"
#提交
git push -u origin main

• Après la soumission, une liaison de vérification apparaîtra. Vous pouvez vous connecter avec un navigateur et cliquer
• VScode peut également demander directement puis passer à la liaison
• Vous pouvez vous connecter à GitHub avec votre navigateur et cliquer sur le premier (connectez-vous avec votre navigateur)
• Ici je donne le deuxième exemple (connectez-vous avec un code)
  
• Après avoir cliqué sur vérification du code\
• Copiez la clé à huit chiffres et cliquez sur le lien ci-dessous
  
• Cliquez pour continuer
  
• La liaison est réussie après avoir entré la clé
  
• Enfin, la console indique le succès
  
• À ce stade, notre entrepôt a obtenu le code du projet
  

6. Déployer Vercel

• Allez sur https://vercel.com/ pour vous inscrire et vous connecter pour accéder à la liste des projets

• Ajouter un projet de projet
  

• Liez votre compte GitHub

• Vérifiez l’entrepôt que vous avez modifié pour le créer et enregistrez-le. Après avoir enregistré avec succès, recherchez le nom de l’entrepôt et cliquez sur Importer
  

• Comme il n’y a pas beaucoup de fonctions dans le modèle de blog, il n’est pas nécessaire de configurer des variables d’environnement ou quoi que ce soit du genre, nous pouvons simplement le déployer directement.

• Si votre blog a besoin de clés d’accès ultérieurement, vous pouvez les mettre ici dans les variables d’environnement.

• Déployé avec succès, vous pouvez utiliser le nom de sous-domaine qu’il a fourni pour prévisualiser (https://myblog-ten-opal.vercel.app)

• Cependant, le nom de domaine vercel.app est bloqué en Chine, il est donc préférable de lier votre propre nom de domaine -Ici, nous pouvons ajouter un nom de domaine personnalisé

• Après l’avoir ajouté, nous analyserons cname en nom de domaine qu’il a spécifié.

• Ajouter une résolution cname. Voici un exemple de cloudflare. Pas besoin d’activer le proxy.

• De cette façon, la liaison du nom de domaine est terminée et le certificat SSL sera automatiquement généré, qui pourra être consulté en visitant votre nom de domaine personnalisé.

• Si vous pensez que la vitesse domestique n’est pas assez bonne, vous pouvez la lui donner
  L’adresse cname 6a939bd4d19096e2.vercel-dns-017.com est remplacée par cname-china.vercel-dns.com pour résoudre le problème. Bien que le contenu suivant soit demandé dans la liste, cela n’affecte pas

7. Suivi/Résumé

Si vous souhaitez modifier le contenu plus tard, écrivez simplement un fichier md, git push et soumettez-le à l’entrepôt GitHub. Vercel extraira automatiquement le dernier code et le redéployera, pas besoin de le faire manuellement. Quand j’ai écrit, je me considérais comme un novice complet. Je n’ai pris des captures d’écran qu’une fois chaque étape terminée. J’ai essayé d’écrire clairement où je pourrais rester bloqué, comme quel modèle choisir lors de la création d’Astro, comment authentifier le premier push Git et comment lier un nom de domaine à Vercel. Parce que j’ai aussi marché sur des pièges lorsque j’étais en difficulté, et je connais le sentiment d’être coincé et personne n’en parle.

Ce document ressemble donc plus aux notes que j’ai prises en faisant semblant, plutôt qu’à un tutoriel après coup. S’il y a quelqu’un derrière moi qui peut s’en sortir d’un seul coup, ce sera en vain.