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 🙏

© 2024 – Pkg Stats / Ryan Hefner

sites

v1.0.2

Published

Super simple static sites

Downloads

881

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

daniel15daniel15

Keywords

Readme

Sites

Sites is a small collection of useful utilities for building static websites, without having to configure complex build tools. It works out-of-the-box with close to zero configuration required.

Features

Sites includes everything you need for a modern static website, out-of-the-box:

Usage

tl;dr: See the example directory in this repo for a sample site.

  1. Add the required npm packages to your site, by running yarn add --dev gulp sites (or npm install --save-dev gulp sites if using npm rather than Yarn).

  2. Create basic directory structure:

    • assets for any static files that do not need any processing (images, web fonts, etc).
    • css for SASS files. These are compiled into the _output/css directory.

  3. Create gulpfile.js with the following contents:

    const gulp = require('gulp');
const sites = require('sites');

sites.installTasks(gulp);

  4. Build static HTML files, referencing CSS files from _output/css:

    <!DOCTYPE html>
<html>
<head>
  <title>Hello world!</title>
  <link href="_output/css/main.css" rel="stylesheet">
</head>
<body>
  <h1>Hello world!</h1>
</body>
</html>

  5. Run gulp serve to open the site in your browser. This uses BrowserSync, so any edits to the CSS or HTML files will automatically refresh the browser!

  6. Configure CSS combination by adding some comments to the HTML file:

    <!-- build:css css/combined.css -->
<link href="_output/css/main.css" rel="stylesheet">
<!-- endbuild -->

  7. Run gulp build to build the production version of the site. The _output directory is now fully optimized and ready to push to production!

Changelog

1.0.2 - 28th October 2017

  • Copy regular .css files to the output directory, in addition to compiling Sass
  • Live reload Sass file when css/modules and css/partials directories change

1.0.1 - 3rd July 2017

  • Added support for JavaScript. JS files are compiled using Babel
  • Include source maps for combined files

1.0 - 2nd July 2017

  • Initial release