ng static site generator

ng-静的サイトジェネレーター

ng-static-site-generator Angular アプリとブログ エントリを静的な HTML および CSS Web サイトに構築するためのツールです。ブラウザーでの動的機能をサポートするクライアント アプリの構築もサポートされています。

スタータープロジェクトが利用可能です。別の例については、kevinphelps/kevinphelps.me を参照してください。

特徴

• Angular アプリとブログ エントリを静的な HTML および CSS Web サイトに構築します。
• ブラウザーの動的機能をサポートするクライアント アプリを構築します。
• 変更後にサイトを自動的に再構築するビルド モードを監視します。
• マークダウンで記述されたソースファイルからブログページを生成します。
• バンドル サイズを削減するためのクライアント アプリの AOT ビルド サポート。
• ブログエントリの開発および作成時に Web サイトをテストするためのサーバー。 ( 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ブログ エントリに jekyll スタイルのファイルを使用します。ファイルは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 )
• ファイルの内容: メタデータは、 ---含む行で区切られてファイルの先頭に表示されます。 2 番目の---以降はすべて、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 >