안녕하세요, 메메조입니다.

이 기사는 Nuxt.js × Netlify × MicroCMS로 Jamstafk 블로그를 공개하자 【완전도해】 의 GitHub에서 함께 작동하는 Nuxt.js를 시작하는 방법에 대해 설명한 기사입니다.

사전 준비

GitHub와 PC의 연계

npm 등 환경 구축

Nuxt 프로젝트 만들기

다음 명령을 입력합니다.

npx create-nuxt-app [プロジェクト名]

그러면 몇 가지 질문됩니다.

?Project name:
→EnterでOK

?Programming language:
→JavaScriptかTypeScriptを選択してEnter

? Package manager: 
→今回は Npmを選択しました。

? UI framework: 
→見た目を整えるフレームワークのことです。Noneで進めます。

? Nuxt.js modules: 
→後で入れるので一旦はなしで大丈夫です。

? Linting tools:
→お好みでどーぞ

? Testing framework:
→テストフレームワークです。お好きにどーぞ！

? Rendering mode: 
→今回はSPA（シングルページアプリケーション）でいきましょう！

? Deployment target: 
→Netlifyと連携するので、Static (Static/JAMStack hosting) を選択してください。

? Development tools: 
→利用する開発ツールです。状況によって異なりますが、今回はjsconfig.jsonを選択しました。

? What is your GitHub username? 
→GitHubのユーザー名を聞かれています。

? Version control system: 
→Gitでいきましょう！

그러자 다음과 같이 만들어졌습니다!

🎉  Successfully created project nuxt_netlify_microcms_sample

  To get started:

    cd nuxt_netlify_microcms_sample
    npm run dev

  To build & start for production:

    cd nuxt_netlify_microcms_sample
    npm run build
    npm run start

터미널에서는 작성한 Nuxt의 프로젝트내로 이동해 둡니다.

cd [プロジェクト名]

리포지토리 만들기

화면 오른쪽 상단의 "+"에서 New repository를 클릭합니다.


프로젝트 이름과 설명을 입력합시다. 아래 이미지의 파란색 사각형을 비워 둡니다.


리포지토리가 완성되므로, PC에 제휴합시다.
코드 → HTTPS → 복사 마크

리포지토리에 Nuxt 프로젝트 반영

방금 전 터미널을 엽니다.

// gitの初期化をします。
git init

// 以下のようにアップロードします。
git add .
git commit -m "first commit"
git remote add origin [https or ssh でのリンク]
git push -u origin master（もしくはmain）

https 또는 ssh로 연결합니다. 아래 이미지의 링크를 복사한 내용을 위의 [https or ssh의 링크]에 붙여넣으십시오.


그리고 다시로드하면 다음과 같이 반영됩니다!


수고하셨습니다.
이 기사 로 돌아갑시다!