ng static site generator

gerador de site estático ng

ng-static-site-generator é uma ferramenta para construir um aplicativo Angular e entradas de blog em um site estático de HTML e CSS. Também há suporte para a criação de um aplicativo cliente para oferecer suporte à funcionalidade dinâmica no navegador.

Existe um projeto inicial disponível. Consulte kevinphelps/kevinphelps.me para outro exemplo.

Características

• Crie um aplicativo Angular e entradas de blog em um site estático de HTML e CSS.
• Crie um aplicativo cliente para oferecer suporte à funcionalidade dinâmica no navegador.
• Assista ao modo de construção para reconstruir automaticamente o site após as alterações.
• Gere páginas de blog a partir de arquivos de origem escritos em markdown.
• Suporte de compilação AOT para o aplicativo cliente para reduzir o tamanho do pacote.
• Servidor para testar o site ao desenvolver e escrever entradas de blog. ( firebase serve é uma boa alternativa.)

Instalação

Clone o projeto inicial para começar rapidamente!

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

As seguintes peerDependencies são obrigatórias:

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

Comandos CLI

• ng-static-site-generator build : Constrói o site estático.
• ng-static-site-generator build --prod : Constrói o site estático para produção (compilação AOT, minify js e html).
• ng-static-site-generator watch : Constrói o site estático e reconstrói após as alterações.

Configuração

ng-static-static-generator é configurado por meio de um arquivo chamado ng-static-static-generator.json na raiz do projeto.

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

Usando o NgStaticSiteGeneratorModule

ng-static-static-generator expõe a funcionalidade por meio do 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 ) { }
} 

Arquivos de origem de entrada de blog

ng-static-site-generator usa arquivos no estilo jekyll para entradas de blog. Os arquivos são colocados na pasta blogPath especificada em ng-static-static-generator.json . (Observação: ainda não há suporte para aninhar pastas no caminho do blog.)

• nome do arquivo: YYYY-MM-DD-url-slug.html ou YYYY-MM-DD-url-slug.md (por exemplo, 2017-06-26-this-is-a-blog-entry.html )
• conteúdo do arquivo: os metadados são fornecidos no topo do arquivo, delimitados por linhas contendo --- . Tudo após o segundo --- é o conteúdo do corpo escrito em html ou markdown.

Exemplo:

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