ng-static-site-generator

ng-static-site-generator is a tool for building an Angular app and blog entries into a static html and css website. Building a client app to support dynamic functionality in the browser is also supported.

There is a starter project available. See kevinphelps/kevinphelps.me for another example.

Features

Build an Angular app and blog entries into a static html and css website.
Build a client app to support dynamic functionality in the browser.
Watch build mode to automatically rebuild the site after changes.
Generate blog pages from source files written in markdown.
AOT build support for the client app to reduce bundle size.
Server for testing the website when developing and writing blog entries. (firebase serve is a good alternative.)

Installation

Clone the starter project to get started fast!

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

The following peerDependencies are required:

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

ng-static-site-generator build: Builds the static site.
ng-static-site-generator build --prod: Builds the static site for production (AOT compilation, minify js and html).
ng-static-site-generator watch: Builds the static site and rebuilds after changes.

Configuration

ng-static-static-generator is configured via a file named ng-static-static-generator.json at the root of the project.

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

Using the NgStaticSiteGeneratorModule

ng-static-static-generator exposes functionality via the 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) { }
}

Blog entry source files

ng-static-site-generator uses jekyll-style files for blog entries. Files are placed in the blogPath folder specifed in ng-static-static-generator.json. (Note: Nesting folders within the blog path is not yet supported.)

filename: YYYY-MM-DD-url-slug.html or YYYY-MM-DD-url-slug.md (e.g. 2017-06-26-this-is-a-blog-entry.html)
file contents: Metadata is given at the top of file delimited by lines containing ---. Everything after the second --- is body content written in html or markdown.

Example:

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