ng static site generator

ng-static-site-generator

ng-static-site-generator ist ein Tool zum Erstellen einer Angular-App und von Blogeinträgen in eine statische HTML- und CSS-Website. Das Erstellen einer Client-App zur Unterstützung dynamischer Funktionen im Browser wird ebenfalls unterstützt.

Es ist ein Starterprojekt verfügbar. Ein weiteres Beispiel finden Sie unter kevinphelps/kevinphelps.me.

Merkmale

• Erstellen Sie eine Angular-App und Blogeinträge in eine statische HTML- und CSS-Website.
• Erstellen Sie eine Client-App, um dynamische Funktionen im Browser zu unterstützen.
• Beobachten Sie den Build-Modus, um die Site nach Änderungen automatisch neu zu erstellen.
• Generieren Sie Blogseiten aus in Markdown geschriebenen Quelldateien.
• AOT-Build-Unterstützung für die Client-App zur Reduzierung der Bundle-Größe.
• Server zum Testen der Website beim Entwickeln und Schreiben von Blogeinträgen. ( firebase serve ist eine gute Alternative.)

Installation

Klonen Sie das Starterprojekt, um schnell loszulegen!

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

Die folgenden peerDependencies sind erforderlich:

{
  "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-Befehle

• ng-static-site-generator build : Erstellt die statische Site.
• ng-static-site-generator build --prod : Erstellt die statische Site für die Produktion (AOT-Kompilierung, Minimierung von JS und HTML).
• ng-static-site-generator watch : Erstellt die statische Site und erstellt sie nach Änderungen neu.

Konfiguration

ng-static-static-generator wird über eine Datei namens ng-static-static-generator.json im Stammverzeichnis des Projekts konfiguriert.

 {
  "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.
} 

Verwendung des NgStaticSiteGeneratorModule

ng-static-static-generator stellt Funktionalität über das NgStaticSiteGeneratorModule bereit.

 // 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 ) { }
} 

Quelldateien für Blogeinträge

ng-static-site-generator verwendet Dateien im Jekyll-Stil für Blogeinträge. Dateien werden im blogPath Ordner abgelegt, der in ng-static-static-generator.json angegeben ist. (Hinweis: Das Verschachteln von Ordnern innerhalb des Blogpfads wird noch nicht unterstützt.)

• Dateiname: YYYY-MM-DD-url-slug.html oder YYYY-MM-DD-url-slug.md (z. B. 2017-06-26-this-is-a-blog-entry.html )
• Dateiinhalt: Metadaten werden am Anfang der Datei angegeben und durch Zeilen mit --- getrennt. Alles nach dem zweiten --- ist in HTML oder Markdown geschriebener Hauptinhalt.

Beispiel:

 ---
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 >