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 from the command line”을 선택하면 다른 기본값이 사용됩니다.
• 설치 후 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 Warehouse를 사용해야 하기 때문에 여기에서는 그렇다고 대답합니다.

3. 테스트 실행

• 설치 후 다음 내용이 표시됩니다. 현재 폴더에 직접 프로젝트를 생성한 경우
  그런 다음 “npm run dev```를 사용하여 직접 실행할 수 있습니다. 그렇지 않으면 먼저 cd를 사용하여 생성한 프로젝트 디렉터리를 연 다음 입력하여 실행해야 합니다.
• 실행 후 로컬 접속 주소 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를 생성할 때 이미 웨어하우스를 초기화했기 때문에 메인 브랜치에 커밋하고 푸시만 하면 됩니다.
• 물론 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에 로그인하고 첫 번째 항목을 클릭할 수 있습니다(브라우저로 로그인).
• 여기서는 두 번째 예를 제시합니다(코드로 로그인)
  
• 코드 확인\을 클릭한 후
• 8자리 키를 복사한 후 아래 링크를 클릭하세요
  
• 계속하려면 클릭하세요
  
• 키를 입력하면 바인딩이 성공합니다
  
• 마지막으로 콘솔에 성공 메시지가 표시됩니다
  
• 이 시점에서 우리 창고는 프로젝트 코드를 얻었습니다
  

6. vercel 배포

• https://vercel.com/에 접속하여 회원가입 후 로그인을 하시면 프로젝트 목록에 입장하실 수 있습니다.

• 프로젝트 추가 프로젝트
  

• GitHub 계정 바인딩

• 변경한 창고를 확인하여 생성하고 저장하세요. 성공적으로 저장한 후 창고 이름을 검색하고 가져오기\를 클릭합니다.

• 템플릿 블로그에는 기능이 많지 않기 때문에 환경 변수 등을 설정할 필요 없이 바로 배포하면 됩니다.

• 나중에 블로그에 액세스 키가 필요한 경우 여기에서 환경 변수에 액세스 키를 넣을 수 있습니다.

• 성공적으로 배포되면 그가 제공한 하위 도메인 이름을 사용하여 미리 볼 수 있습니다(https://myblog-ten-opal.vercel.app)

• 단, vercel.app 도메인은 중국에서는 차단되어 있으므로 본인의 도메인 이름을 바인딩하는 것이 가장 좋습니다. -여기서 사용자 정의 도메인 이름을 추가할 수 있습니다.

• 추가한 후 cname을 그가 지정한 도메인 이름으로 구문 분석합니다.

• cname 확인을 추가합니다. 다음은 Cloudflare의 예입니다. 프록시를 켤 필요가 없습니다.

• 이렇게 하면 도메인 이름 바인딩이 완료되고 SSL 인증서가 자동으로 생성되며, 이는 사용자 지정 도메인 이름을 방문하여 확인할 수 있습니다.

• 국내 속도가 부족하다고 생각되면 주면 됩니다
  문제를 해결하기 위해 cname 주소 6a939bd4d19096e2.vercel-dns-017.com을 cname-china.vercel-dns.com으로 변경했습니다. 목록에 다음 내용이 표시되지만 영향을 미치지 않습니다.

7. 후속 조치/요약

나중에 내용을 변경하려면 md 파일, git push를 작성하고 GitHub 저장소에 제출하면 됩니다. Vercel은 자동으로 최신 코드를 가져와서 재배포하므로 수동으로 수행할 필요가 없습니다. 글을 쓸 때 나는 나 자신을 완전한 초보자로 대했습니다. 모든 단계가 완료된 후에만 스크린샷을 찍었습니다. Astro를 만들 때 어떤 템플릿을 선택해야 하는지, 첫 번째 Git 푸시를 인증하는 방법, Vercel에 도메인 이름을 바인딩하는 방법 등 막힐 수 있는 부분을 명확하게 작성하려고 노력했습니다. 나 역시 힘들 때 함정을 밟은 적이 있고, 막힌 심정을 알기에 누구도 그것에 대해 이야기하지 않기 때문이다.

그래서 이 문서는 사후 튜토리얼이라기보다는 제가 가장하면서 기록한 메모에 가깝습니다. 내 뒤에 단숨에 이겨내는 사람이 있다면 다 헛수고다.