Giter VIP home page Giter VIP logo

metalpress's Introduction

metalpress npm Travis Codecov

Create a blog easily with Metalsmith.

A wrapper of Metalsmith plugins for quickly creating a blog with Metalsmith.

Features

  • Liquid Templating
  • Markdown Rendering
  • Permalinks
  • Pagination
  • Firebase Data Integration
  • Webpack Bundling
  • Use NPM Modules
  • SASS Compiling and CSS Fingerprinting
  • RSS & Sitemap Support
  • Imagemin, Code Highlighting, Html Minification
  • robots.txt
  • Post Features
    • Excerpts
    • Tags
    • Drafts

Installation

$ npm install metalpress --save

Structure and Templating

metalpress works from a specific directory structure. It contains a templates and src directory. Within the src directory it will load data from data as yaml or json files. You can create folders for collections and use markdown files for pages. You should store all assets in assets.

For templating, metalpress uses liquid. You can learn more about the syntax here.

Here's an example structure:

├── package.json
├── src
│   ├── data
│       ├── site.yaml
│       ├── projects.json
│   ├── assets
│       ├── sass
│       ├── img
│       ├── fonts
│       ├── js
│           ├── index.js
│   ├── index.md
│   ├── pages
│       ├── about.md
│   └── posts
│       ├── 2016-08-25-how-to-use-metalpress.md
├── templates
│   ├── _includes
│       ├── header.liquid
│       ├── footer.liquid
│   └── _layouts
│       ├── home.liquid

Usage

To get started with metalpress, you can use the API or CLI.

API Usage

metalpress taks a config object and callback. It will process the files in the config, build the site, and return a metalsmith instance. The callback will contain any errors and the file mappings.

import metalpress from 'metalpress';
import config from './metalpress.config';

const m = metalpress(config, (err, files) => {
  console.log('New site build completed.');
});

CLI Usage

Install CLI

npm install metalpress-cli -g

Initialize a New Project

Prompts a series of questions and creates a new .metalpress config.

metalpress init

Start a Browser-sync Server

Serve the project on automatically assigned browser-sync port. (default: http://localhost:3000)

metalpress serve

Deploy a Project

To deploy your site, you'll need to have your aws.json set up. It includes:

{
  "key":"AWS_ACCESS_KEY_HERE",
  "secret":"AWS_SECRET_KEY_HERE",
  "stagingBucket":"staging.example.com",
  "productionBucket":"example.com"
}

Deploy a dist and deployed to AWS S3.

Staging

metalpress deploy

Production

metalpress deploy -p

Webpack Usage

By default, metalpress uses a webpack configuration for both staging and production environments. Within your config, you can specify jquery: true for included support jquery.

If you need to do so, you can override webpack with a custom config. For example, you can use the following options in your .metalpress config. You can add only the parameters you need which will be extended into the defaults, or override the entire file as needed.

{
  "webpack": {
    "dev": "./webpack.config.js",
    "prod": "./webpack.prod.config.js"
  }
}

For Questions, Issues, PRs please refer to @cameronroe

GPL-3 LICENSE

metalpress's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

metalpress's Issues

Update packages & fix npm deps

  • Figure out how to update outdated packages in npm
  • Get tests to run with ava and babel
  • Watch tutorial on using nyc for test coverage
  • Watch tutorial on using semantic-release

metalsmith-imagemin breaking changes

Hello, I'm the author of metalsmith-imagemin and I just wanted to let you know, a new version is out, with some breaking changes (specifically usage and options) to align with the latest imagemin version and API change.

let me know if you run into any trouble with the update :)

Bump metalsmith-metallic version

Hi there, I've noticed you depended on metalsmith-metallic. I've recently bumped the version to (and published) 1.0.0 with PR 8, as I felt the bugfix was semver-major, as it impacts consumers of the metalsmith chain I emit. I just wanted to let you know, in case updating it impacts your code in the future.

Cleanup dependencies

I'm wondering if the listed dependencies is accurate. For a simple static webpage that depends on this project, it takes awhile for a fresh install because of all dependencies:

$ time npm i
...

real    5m51.668s
user    1m8.121s
sys 0m22.777s

This is also somewhat alarming (but I guess not too surprising because of how npm works):

$ ls -aslh node_modules/ | wc -l
1075

Cannot pass in preMiddleware or postMiddleware

  1. Looks like metalpress-cli expects the metalpress config to be a json file, but your preMiddleware and postMiddleware blocks accept functions https://github.com/axisdefined/metalpress/blob/master/src/index.js#L203-L211.
  2. This comment is wrong https://github.com/axisdefined/metalpress/blob/master/src/index.js#L151-L159
  3. Should preMiddleware be defined in the middle? Or in the beginning? Right now this seems to be a bit of a weird spot.
  4. The tests for middleware are all commented out.

add helpers for active classes

Getting an active class is an annoyance and should be abstracted into a helper tag or filter. We need to know which url we're actually on which is defined from metalsmith-permalinks, or the title of the page, and should be passed into a filter {{ path | active_class }}, which looks through the site config navigation and tests if any of the path is defined. From there it will return a "", or "active" string.

v1.0

Metalpress is on it's way! But before we kick off the v1.0, this issue will outline everything that's coming and make sure all the features are correctly implemented.

Metalpress CLI

Metalpress will come bundled with a CLI to make development fast and simple. Here are a few of the commands with their description.

metalpress init

Initializes a .metalpress which has project settings in json

metalpress new

Creates a new metalpress project from a git repo starter boilerplate.

metalpress serve

Serves a metalpress project on a browser-sync server (default: http://localhost:3000)

metalpress deploy

Deploys a metalpress project to an AWS bucket (staging/production).

TDD?

Since we're building the entire site statically, we can technically run tests over it using a library like cheerio to load in the markup and query for selectors. This could be interesting to set up and would allow for some precise calculations of layout to occur.

For example, if we knew that we had a container of 1140px, we calculate other elements with percentage-based or flexbox widths to make sure they are laid out correctly. If we load up the templates using something like karma or protractor, we should be able to run javascript and assert how our layout changes. Let's say we had a box on the page that animated on hover. We could trigger a hover from javascript on the box and measure the element's properties to see if it is responding properly. With karma, we can bundle those js builds with webpack as well. Look into this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.