nuxt netlify cms starter template 다운로드 - nuxt netlify cms starter template 소스 코드 다운로드

nuxt netlify cms starter template

기타 카테고리

v2.0.0

다운로드

Nuxt.js + Netlify CMS 시작 템플릿

Vue.js 및 Netlify CMS를 사용하여 서버리스 정적 웹사이트를 구축하세요.

이는 Nuxt v1.x를 기반으로 Vue.js 및 Netlify CMS를 사용하여 정적 웹사이트를 구축하기 위한 시작 템플릿입니다. 다루는 내용:

Vue CLI를 통해 설정 하시겠습니까 ?
거의 비어 있는 Nuxt.js 프로젝트를 쉽게 설정할 수 있습니다.
현재 Vue CLI v3.0에 최적화되어 있지 않습니다 .
Netlify CMS를 통한 콘텐츠 편집 ✏️
Netlify CMS는 마크다운 파일을 편집하기 위해 Git 저장소에 직접 연결하는 클라이언트 측 CMS입니다.
다른 파일 형식도 지원하지만 이 템플릿은 기본인 앞부분 마크다운 형식에서만 작동합니다.
Nuxtent/Nuxtdown 모듈을 통해 Vue.js에 콘텐츠 표시 ?️
Nuxtdown 모듈(Nuxtent의 고정 포크)을 사용하면 콘텐츠를 쿼리하고 UI에 표시할 수 있습니다.
Nuxt.js를 통한 정적 사이트 생성 ✅
범용 Vue.js 애플리케이션을 구축하는 유명한 프레임워크인 Nuxt.js는 정적 사이트를 생성합니다.

Nuxt.js + Netlify CMS 시작 템플릿

구성
개발
생산
FTP를 통한 수동 배포
Netlify에 배포
다른 CI 솔루션과 함께 배포
전제 조건
설정
용법
알려진 문제
기부금

전제 조건

node 8.0+ 및 npm 5.0+ 설치되어 있는지 확인하세요.
Netlify CMS와 Nuxt.js가 무엇인지 알고 있습니다.

설정

vue-cli를 통해 설치 : 최신 버전의 Vue CLI를 사용하는 경우 vue init 작동하려면 추가 패키지를 설치해야 할 수 있습니다. 이 템플릿은 아직 최신 Vue CLI에 최적화되어 있지 않기 때문입니다.

 $ vue init renestalder/nuxt-netlify-cms-starter-template my-project
  $ cd 내 프로젝트
                  # 종속성 설치$ npm install # 또는 Yarn 설치

프로젝트를 git 저장소에 푸시 : 콘텐츠를 편집하려면 프로젝트를 git 저장소에 푸시해야 합니다. CMS는 항상 git 저장소에 직접 연결하고 static/admin/config.yml 에 설정된 브랜치의 콘텐츠를 편집합니다.

좋습니다. 시작하기 위한 중요한 단계를 완료하셨습니다. 이제 인프라에 맞게 모든 구성 요소를 올바르게 구성하십시오.

용법

구성

CMS 인증 및 모델 저장소가 호스팅되는 위치와 CMS 사용자가 콘텐츠를 편집하기 위해 로그인하는 방법을 구성합니다. 또한 콘텐츠에 대한 파일과 필드를 정의하세요.
파일 : static/admin/config.yml
문서 : 공식 Netlify CMS 문서 -> 구성
라우팅 및 쿼리
기본적으로 UI에는 콘텐츠가 어디에 저장되어 있는지, 어떤 동적 경로가 어떤 콘텐츠에 속하는지 알 수 없습니다. Nuxt.js는 기본적으로 정적 페이지만 매핑할 수 있습니다. 파일 이름이 다른 블로그 게시물과 같은 동적 경로는 감지되지 않습니다. 이에 대한 구성은 Nuxtdown에 의해 수행됩니다.
파일 : nuxtdown.config.js
문서 : Nuxtdown Readme
일반 웹사이트 정보
HTML <head> 태그 및 페이지 제목과 같은 일반 정보는 Nuxt.js를 통해 설정됩니다. Nuxt.js의 라우팅 구성에 신경쓰지 마세요. 이 문제는 Nuxtdown으로 해결됩니다.
파일 : nuxt.config.js
문서 : 공식 Nuxt.js 문서 -> 구성

개발

개발 중에 애플리케이션의 클라이언트 측 SPA 버전을 실행하십시오. 자신에게 더 잘 맞는 dev 또는 serve 작업을 사용하세요. 그들도 마찬가지입니다.

 # localhost:3000$ npm run dev에서 핫 리로딩을 제공합니다.

http://localhost:3000으로 이동하세요.

생산

프로덕션의 경우 정적 사이트를 생성합니다.

 # 정적 프로젝트 생성$ npm run generate

FTP를 통한 수동 배포

프로덕션 서버에서 작동하게 하려면 빌드에서 사이트가 실행될 최종 URL/도메인을 알아야 합니다. 이를 위해 package.json 에서 npm generate:manual 작업을 편집하고 프로덕션 URL을 설정할 수 있습니다. 이는 웹사이트를 수동으로 배포할 때 유용합니다.

 # package.json에 지정된 URL에서 호스팅될 정적 프로젝트를 생성합니다.$ npm run generate:manual

Netlify에 배포

생성된 프로젝트의 폴더에는 Netlify 배포를 시작하기 위해 netlify.toml 로 이름을 바꿀 수 있는 netlify-example.toml 파일이 포함됩니다. Netlify 구성 및 배포 유형(프로덕션 배포, 지점 배포, 미리 보기 배포)에 따라 BASE_URL 자동으로 설정합니다. 따라서 package.json 에 프로덕션 URL을 설정할 필요가 없습니다 .