![Site Frame Build Status](
Last updated 3 years ago by theladbible .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install channel-site-frame 
SYNC missed versions from official npm registry.

Site Frame

Site Frame Build Status

Main frame for the statically produced channel site.



Install the dependencies running yarn or npm install.

Having issues with authentication?

Test your SSH connection by following the Github testing steps - after that, all dependencies should install as expected.

Build Static Site

Generate Front Matter

Run gulp generate-front-matter --data="{{insert source here}}"

Or... gulp update-front-matter && gulp build-development to fetch the last 100 articles from the last 7 days.

Sick of looking at the same articles?

To get more up-to-date versions of the content, run gulp update-front-matter before running gulp generate-front-matter - if you want content from a specific site, check src/channelOptions.js to edit the channel ID.

Generate Content Matter

Once Front Matter has been generated you can create the static pages from this resource by running gulp generate-content-matter.

You may pass an optional --day={day} parameter to specify the number of days to generate the content for. Set to -1 to generate ALL content.

You may instead pass an --id={id} parameter to generate the content for a specific ID only.

Finally, you may pass the --legacy parameter to generate only the legacy URL versions of the articles.

Issues generating content/front matter?

The following files will need to be renamed before you begin generating content:

  • config.json.dist > config.json
  • data.example.json > data.json
  • src/channelOptions.js.dist > src/channelOptions.js

Complete Install

Once the above steps have been completed run gulp build to generate all the sites resources including images, css etc.

gulp build will call gulp generate-content-matter among other gulp sub-tasks.

You may also run gulp build-resource with/without the --days={days}, --id={id} or --legacy params (see above) to JUST generate the HTML page(s) and inline the CSS. This assumes all assets already exist (from a previous gulp build run).

Additional Args

Dump a list of files generated --dumpFiles=/tmp/files.txt.

View site

To view the site, run gulp serve. This should provide a URL for you to view.

Having issues viewing categories?

You need to set your environment to recognise that it's a dev environment - in your config.json file, set development to true. After this, re-build your environment (gulp build-development should do the trick) and voilà! One fully-working environment.


### Google AMP In order to generate Google AMP files alongside your html files, run: gulp generate-google-amp-feed && gulp inline-css-amp

Google's AMP layouts will contain boilerplate code, including javascript and css. Do not remove this. Boilerplate code will be encapsulated within <amp-boilerplate></amp-boilerplate>.

Instant Articles

In order to render a feed of instant articles, run: gulp generate-ia-feed.

Profiling content matter generation

Run DEBUG=metalsmith-timer gulp generate-content-matter. The debug flag enables debug mode in the content-matter dependency and shows how long each metalsmith plugin takes to run when generating content matter.


The tests are written in ES6 and should therefore be run using no version >= 6.0.0. To run the the test, simply run npm run test

If you introduce new code to this project you should ensure that all current tests pass as well as writing tests for your own code as necessary.

Visual Regression Testing

We currently use Ghost Inspector for help in testing visual regressions, which runs automatically every time branch changes are pushed to the repo.

Adding/editing tests

To add or edit tests, log into Ghost Inspector and add or update the relevant test in the Circle Test Suite. We also utilise ngrok for tunneling to the test server that Circle spins up to allow Ghost Inspector to run the tests.

Changing the test suite?

In the rare event that we need to change the test suite, the token is stored as a Circle environmental variable; this can be edited by going to the specific Site Settings in Circle and selecting 'Environment Variables' under 'Build Settings'.

Current Tags

  • 1.1.0                                ...           latest (3 years ago)

1 Versions

  • 1.1.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (102)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2017 © |