ng static site generator

ng-정적 사이트 생성기

ng-static-site-generator Angular 앱과 블로그 항목을 정적 HTML 및 CSS 웹사이트에 구축하기 위한 도구입니다. 브라우저에서 동적 기능을 지원하는 클라이언트 앱 구축도 지원됩니다.

사용 가능한 시작 프로젝트가 있습니다. 다른 예는 kevinphelps/kevinphelps.me를 참조하세요.

특징

• Angular 앱과 블로그 항목을 정적 HTML 및 CSS 웹사이트로 구축하세요.
• 브라우저에서 동적 기능을 지원하는 클라이언트 앱을 빌드합니다.
• 변경 후 사이트를 자동으로 다시 빌드하려면 빌드 모드를 시청하세요.
• 마크다운으로 작성된 소스 파일에서 블로그 페이지를 생성합니다.
• 번들 크기를 줄이기 위해 클라이언트 앱에 대한 AOT 빌드 지원.
• 블로그 항목을 개발하고 작성할 때 웹사이트를 테스트하기 위한 서버입니다. ( firebase serve 좋은 대안입니다.)

설치

빠르게 시작하려면 시작 프로젝트를 복제하세요!

yarn add [--exact] ng-static-site-generator 또는 npm install --save-dev [--save-exact] ng-static-site-generator

다음 peerDependencies 필요합니다.

{
  "dependencies" : {
    "@angular/animations" : " >4.0.0 " ,
    "@angular/common" : " >4.0.0 " ,
    "@angular/core" : " >4.0.0 " ,
    "@angular/http" : " >4.0.0 " ,
    "@angular/platform-browser" : " >4.0.0 " ,
    "@angular/platform-server" : " >4.0.0 " ,
    "@angular/router" : " >4.0.0 " ,
    "reflect-metadata" : " >0.1.0 " ,
    "rxjs" : " >5.0.0 " ,
    "typescript" : " >2.3.0 " ,
    "zone.js" : " >0.8.0 "
  }
}

CLI 명령

• ng-static-site-generator build : 정적 사이트를 구축합니다.
• ng-static-site-generator build --prod : 프로덕션용 정적 사이트를 빌드합니다(AOT 컴파일, js 및 html 축소).
• ng-static-site-generator watch : 정적 사이트를 빌드하고 변경 후 다시 빌드합니다.

구성

ng-static-static-generator 프로젝트 루트에 있는 ng-static-static-generator.json 이라는 파일을 통해 구성됩니다.

 {
  "distPath" : "./dist" , // This is where the site will be generated.
  "blogPath" : "./src/blog" , // This is the folder where your blog entries are located.
  "stylesPath" : "./src/styles.scss" , // This is the file that contains your global styles.
  "templatePath" : "./src/index.html" , // This is your template html file. This is passed to HtmlWebpackPlugin.
  "appModule" : "./src/app/app.module#AppModule" , // This is the path and class name of your AppModule.
  "appRoutes" : "./src/app/app-routing.module#routes" , // This is the path and export name or your routes.
  "appComponent" : "./src/app/app.component#AppComponent" , // This is the path and name or your root component.

  // Options for building an optional client app.
  "mainPath" : "./src/main.ts" , // This is the file that contains the browser bootstrap code.
  "polyfillsPath" : "./src/polyfills.ts" // Include this is you need a polyfills bundle.
} 

NgStaticSiteGeneratorModule 사용

ng-static-static-generator NgStaticSiteGeneratorModule 을 통해 기능을 노출합니다.

 // app.module.ts
import { ModuleOptions , NgStaticSiteGeneratorModule } from 'ng-static-site-generator' ;

const ngStaticSiteGeneratorModuleOptions : ModuleOptions = {
  openExternalLinksInNewTab : false // Automatically add target="_blank" to external links. Default false.
} ;


@ NgModule ( {
  imports : [
    ...
    NgStaticSiteGeneratorModule . forRoot ( ngStaticSiteGeneratorModuleOptions )
  ] ,
  ...
} )
export class AppModule { }

// my-component.component.ts
import { BlogService } from 'ng-static-site-generator' ;

@ Component ( {
  selector : 'app-my-component' ,
  templateUrl : './my-component.component.html' ,
  styleUrls : [ './my-component.component.scss' ]
} )
export class MyComponent {
  constructor ( private blogService : BlogService ) { }
} 

블로그 항목 소스 파일

ng-static-site-generator 블로그 항목에 지킬 스타일 파일을 사용합니다. 파일은 ng-static-static-generator.json 에 지정된 blogPath 폴더에 배치됩니다. (참고: 블로그 경로 내에 폴더를 중첩하는 것은 아직 지원되지 않습니다.)

• 파일 이름: YYYY-MM-DD-url-slug.html 또는 YYYY-MM-DD-url-slug.md (예: 2017-06-26-this-is-a-blog-entry.html )
• 파일 내용: 메타데이터는 --- 포함하는 줄로 구분되어 파일 상단에 제공됩니다. 두 번째 이후의 모든 --- 은 html 또는 마크다운으로 작성된 본문 내용입니다.

예:

 ---
title : This is the Title of the Blog Entry
description : This is a short description of the blog entry.
customProperty : This is a custom property. (Optional, of course.)
---

##This is the Title of the Blog Entry

This is the content of the blog entry.

< p >You can also write content in html if you want.</ p >