ng static site generator

générateur de site ng-statique

ng-static-site-generator est un outil permettant de créer une application angulaire et des entrées de blog dans un site Web statique HTML et CSS. La création d'une application client pour prendre en charge les fonctionnalités dynamiques dans le navigateur est également prise en charge.

Un projet de démarrage est disponible. Voir kevinphelps/kevinphelps.me pour un autre exemple.

Caractéristiques

• Créez une application angulaire et des entrées de blog dans un site Web statique HTML et CSS.
• Créez une application client pour prendre en charge les fonctionnalités dynamiques dans le navigateur.
• Regardez le mode construction pour reconstruire automatiquement le site après les modifications.
• Générez des pages de blog à partir de fichiers sources écrits en markdown.
• AOT crée la prise en charge de l'application client afin de réduire la taille du bundle.
• Serveur pour tester le site Web lors du développement et de la rédaction d'entrées de blog. ( firebase serve est une bonne alternative.)

Installation

Clonez le projet de démarrage pour démarrer rapidement !

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

Les peerDependencies suivantes sont requises :

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

Commandes CLI

• ng-static-site-generator build : Construit le site statique.
• ng-static-site-generator build --prod : Construit le site statique pour la production (compilation AOT, minify js et html).
• ng-static-site-generator watch : Construit le site statique et le reconstruit après les modifications.

Configuration

ng-static-static-generator est configuré via un fichier nommé ng-static-static-generator.json à la racine du projet.

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

Utilisation du NgStaticSiteGeneratorModule

ng-static-static-generator expose les fonctionnalités via le 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 ) { }
} 

Fichiers sources des entrées de blog

ng-static-site-generator utilise des fichiers de style jekyll pour les entrées de blog. Les fichiers sont placés dans le dossier blogPath spécifié dans ng-static-static-generator.json . (Remarque : l'imbrication de dossiers dans le chemin du blog n'est pas encore prise en charge.)

• nom de fichier : YYYY-MM-DD-url-slug.html ou YYYY-MM-DD-url-slug.md (par exemple, 2017-06-26-this-is-a-blog-entry.html )
• contenu du fichier : les métadonnées sont données en haut du fichier délimitées par des lignes contenant --- . Tout ce qui suit la seconde --- est le contenu du corps écrit en HTML ou en markdown.

Exemple:

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