npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

ng-static-site-generator

v0.10.1

Published

Static site generator for Angular

Downloads

23

Readme

ng-static-site-generator

Build Status npm version

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

  • [x] Build an Angular app and blog entries into a static html and css website.
  • [x] Build a client app to support dynamic functionality in the browser.
  • [x] Watch build mode to automatically rebuild the site after changes.
  • [x] Generate blog pages from source files written in markdown.
  • [x] 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.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>