GitHub 템플릿 저장소를 사용하여 정적 사이트 프로젝트를 시작합니다

GitHub 템플릿 리포지토리를 활용하여 정적 사이트 생성기 프로젝트를 간소화하고 설정 시간을 크게 줄입니다. 대부분의 정적 사이트 생성기는 쉽게 설치할 수 있지만 프로젝트 구성은 반복되는 작업으로 남아 있습니다. 이 접근법은 유사한 프로젝트를 자주 생성하고 폴더 구조를 반복적으로 재현, 구성 파일 복사 및 보일러 플레이트 코드를 자주 생성하는 경우 특히 유리합니다.

다른 개발자의 코드를 사용하는 Forking과 달리 템플릿 리포지토리를 사용하면 고유 한 코드를 재사용 할 수 있으므로 각 새로운 프로젝트가 자체 독립적 인 GIT 이력을 유지할 수 있습니다.

이 안내서는 Eleventy Project를 예제로 사용하여 간소화 된 워크 플로를 설정하는 것을 보여줍니다 (Hugo, Jekyll, Nuxt 또는 기타). 완성 된 예제 저장소는 참조 할 수 있습니다.

템플릿 생성

명령 줄을 사용하여 프로젝트 디렉토리를 만들어 시작하십시오.

 CD ~
MKDIR 정적 사이트-템플릿
CD 정적 사이트 테마 플레이트

이것은 당신의 홈 디렉토리로 탐색하고 새 디렉토리를 만들어 입력합니다.

노드 프로젝트 초기화

Eleventy에는 Node.js가 필요하므로 웹 브라우저 외부에서 JavaScript 실행 및 패키지 설치를 위해 NPM (Node Package Manager)이 필요합니다. node.js가 설치되었다고 가정하고 실행하십시오.

 npm init

이것은 package.json 생성하여 프로젝트 메타 데이터를 제공하도록 촉구합니다.

Eleventy 설치

package.json 사용하여 개발 종속성으로 Eleventy를 설치하십시오.

 npm install -d @11ty/elventy

이렇게하면 package.json 에 elventy를 추가하고 node_modules 폴더에 설치합니다. package.json 다양한 기계에서 일관된 프로젝트 설정을 보장합니다.

고도 구성

이 자습서는 프로젝트 파일에서 웹 사이트 소스 코드를 분리하고 HTML 문서, CSS 및 JavaScript를 포함하는 구성을 사용합니다. 필요한 디렉토리 구조 만들기 :

 MKDIR SRC SRC/CSS SRC/JS
touch index.html css/style.css js/main.js

src 디렉토리를 사용하도록 Eleventy를 구성하고 css 및 js 파일을 복사하려면 .eleventy.js 작성하십시오.

 module.exports = function (eleventyconfig) {
  eleventyconfig.addpassthroughcopy ( "src/css");
  eleventyconfig.addpassthroughcopy ( "src/js");
  반품 {
    dir : {
      입력 : "SRC"
    }
  };
};

실행하여 구성을 테스트하십시오.

 NPX @11ty/elventy

_site 디렉토리에서 웹 사이트를 생성합니다.

보일러 플레이트 웹 사이트 구축

기본 웹 사이트 콘텐츠 작성 : src/index.html 에 다음을 추가하십시오.

 


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>정적 사이트 템플릿</title>
  <meta name="description" content="정적 웹 사이트">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">


  <h1 id="웹-사이트-템플릿을-만드는-것이-좋습니다">웹 사이트 템플릿을 만드는 것이 좋습니다!</h1>
  <script src="js/main.js"></script>

src/css/style.css 에 기본 스타일을 추가하십시오.

 몸 {
  Font-Family : Sans-Serif;
}

src/js/main.js 에 대한 간단한 JavaScript 기능 :

 (기능() {
  Console.log ( '정적 사이트 템플릿을 호출하십시오 JavaScript!');
}) ();

npx @11ty/eleventy --serve 실행하여 웹 사이트를 로컬로 볼 수 있습니다.

Github 리포지토리 설정

git 저장소 초기화 :

 git init

_site 및 node_modules 제외 할 .gitignore 파일을 작성하십시오.

 <code>_site/ node_modules/</code>

GitHub 리포지토리 (예 : static-site-template )를 만듭니다. 그런 다음 로컬 저장소를 밀어 넣으십시오.

 git 추가.
git commit -m "First Commit"
git 원격 추가 원점<your_github_repo_url>
git push -u 원산지 마스터</your_github_repo_url>

템플릿 저장소 활성화

GitHub 저장소 설정에서 "템플릿 저장소"옵션을 활성화하십시오. "이 템플릿 사용"버튼이 나타나서 템플릿을 기반으로 새 프로젝트를 만들 수 있습니다.

템플릿을 확장합니다

템플릿을 사용하여 새로운 프로젝트를 개발할 때 재사용 가능한 구성 요소와 개선 사항을 템플릿 저장소에 추가하여 향후 사용하십시오.

제한

유사한 프로젝트에 유리하지만 템플릿 리포지토리는 외부 의존성 또는 크게 다른 요구 사항을 가진 복잡한 프로젝트에 적합하지 않을 수 있습니다. 템플릿 변경은 기존 프로젝트가 아닌 미래의 프로젝트에만 영향을 미칩니다.

이 Enhanced Guide는 정적 사이트 프로젝트를위한 Github 템플릿 저장소를 작성하고 활용하는보다 포괄적이고 구조화 된 접근 방식을 제공합니다.

위 내용은 GitHub 템플릿 저장소를 사용하여 정적 사이트 프로젝트를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!