Astro + Vercel を使用して個人用の最新の静的ブログをゼロから構築する

1. ローカル環境 Node.js と Git をインストールする

• Node.js (npm に付属): https://nodejs.org/ に移動してダウンロードし、Node.js インストール パッケージをダウンロード してダブルクリックしてインストールし、次の手順を完了します。
• インストール後にコマンドラインを再起動します node -v および npm -v を実行してバージョン番号を確認します。それは正しいはずです。
• Git: https://git-scm.com/download/win に移動して、インストール パッケージをダウンロードします。
• Git インストール パッケージのダウンロード インストール時に「コマンド ラインから Git」を選択し、その他のデフォルトが使用されます。
• インストール後に「git —version」で確認します。
• もちろん、AI を使用する場合は、AI に直接環境をインストールしてもらうこともできます。ここでは必要な環境の内容についてのみ説明します。

2. Astro プロジェクトを作成する

コードを配置するディレクトリを見つけてコマンド ラインを開き、「astro」と入力してスキャフォールドを作成します:
Microsoft VS Code IDE ツールを例に挙げます
プロジェクトフォルダーを開いた後 新しいターミナル npm コマンドを入力して astro プロジェクトを作成します

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

キーボードの上または下を押すと、テンプレートのタイプを選択できます\

• 私が選んだブログはこちら
• 次のステップでは、依存関係を自動的にインストールする必要があるかどうか、およびこのプロジェクトの Git リポジトリを初期化するかどうかを確認するプロンプトが表示されます。
• ここで「はい」と答えたのは、後で vercel デプロイメントを実行するときに、自動更新を実現するために git ウェアハウスを使用する必要があるからです。

3. テストを実行する

• インストール後、以下の内容が表示されます 現在のフォルダーにプロジェクトを直接作成した場合
  その後、npm run dev を使用して直接実行できます。そうでない場合は、まず cd で作成したプロジェクト ディレクトリを開き、次に Enter を押して実行する必要があります。
• 実行後、ローカルアクセスアドレス http://localhost:4321/
  プレビュー テンプレート プロジェクトのコンテンツにアクセスする

4. 記事を書く

-ここでは公式のサンプルを使用して操作します
プロジェクトの src フォルダーには、プロジェクトの完全なディレクトリ構造が含まれています

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/文章名称

• これはディレクトリ構造と機能です src\content\blog に直接移動して、新しい md ファイルを作成し、新しい記事として公開できます。
• 記事コンテンツヘッダー構造パラメータの内容は、テンプレート表示の抽出に使用されます
• //記事内容の例

---
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 は、ブログ記事に表示されるテンプレート ページです。
• 最終的な表示では 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>

• パラメータを取得した後、プレースホルダをTDKに入力するか、内容を表示します
• 自分で記事MDを修正/作成できます

5. 提交github

• 去GitHub登录后创建新仓库https://github.com/new
• 可以参考如下设置
• 咱自己博客就私有就行，其余不用勾选
• 创建好了后会跳转到参考初始页面
• 会有一堆git初始指令，这边因为我们创建astro的时候已经初始仓库了，所以只需要commit后push到main分支就行
• 当然你也可以用ide工具的可视化git进行操作，这边我以指令举例

#先把当前项目文件添加至提交列表
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

• 送信後、検証バインディングがポップアップ表示されます。ブラウザでログインして、
• VScode は直接プロンプトを表示してからバインドにジャンプすることもあります
• ブラウザで GitHub にログインし、最初のボタンをクリックします (ブラウザでサインイン)
• ここでは 2 番目の例を示します (コードでサインイン)
  
• コード検証をクリックした後\
• 8 桁のキーをコピーし、下のリンクをクリックします
  
• クリックして続行します
  !【GitHubデバイス認可確認インターフェース】(/blog/imgs/image-17.png)
• キーを入力するとバインドが成功します
  
• 最後に、コンソールに成功のメッセージが表示されます
  
• この時点で、当社の倉庫はプロジェクト コードを取得しました
  

6. vercel をデプロイする

• https://vercel.com/ にアクセスして登録し、ログインしてプロジェクト リストに入ります

• プロジェクト project を追加
  

• GitHub アカウントをバインドする

• 変更した倉庫を確認して作成し、保存します。正常に保存したら、ウェアハウス名を検索して「インポート」をクリックします
  ・テンプレートブログは機能が少ないので、環境変数などの設定は必要なく、そのままデプロイできます。

• 後でブログにアクセス キーが必要な場合は、ここで環境変数にアクセス キーを入力できます。

• 正常にデプロイされたら、彼が提供したサブドメイン名を使用してプレビューできます (https://myblog-ten-opal.vercel.app)

• ただし、ドメイン名 vercel.app は中国でブロックされているため、独自のドメイン名をバインドすることをお勧めします。 -ここでカスタム ドメイン名を追加できます

• 追加後、cname を解析して、指定したドメイン名に変換します。

• cname 解決を追加します。以下はクラウドフレアの例です。プロキシを有効にする必要はありません。

• このようにして、ドメイン名のバインドが完了し、SSL 証明書が自動的に生成されます。これは、カスタム ドメイン名にアクセスして表示できます。

• 国内の速度が十分ではないと思われる場合は、彼に譲ってください
  この点を解決するために、cname アドレス 6a939bd4d19096e2.vercel-dns-017.com が cname-china.vercel-dns.com に変更されます。リストには次の内容が表示されますが、影響はありません。

7. フォローアップ/まとめ

後で内容を変更したい場合は、md ファイルを作成し、git Push して GitHub リポジトリに送信します。 Vercel は最新のコードを自動的に取得して再デプロイします。手動で行う必要はありません。 私が書いたとき、私は自分自身をまったくの初心者として扱いました。すべての手順が完了した後にのみスクリーンショットを撮りました。 Astro を作成するときにどのテンプレートを選択するか、最初の Git プッシュを認証する方法、Vercel にドメイン名をバインドする方法など、つまづきそうなところをわかりやすく書くようにしました。なぜなら、私も苦労していたときに落とし穴を踏んだことがあり、行き詰まった気持ちがよくわかるのに、誰もそれを話さないからです。

したがって、このドキュメントは、事後のチュートリアルというよりは、私がふりをしているときに取ったメモに近いものです。後ろに一発で乗り越えられる人がいれば全て無駄になる。