A boilerplate implementation to effectively merge webpack and metalsmith in development and production environments.
Cloning the repo or downloading a release might be the best idea. This is a boilerplate, not a library.
You may build on top of this project or extract parts you need for your own projects.
Afterwards, simply install all dependencies by running:
yarn || npm install
This boilerplate tries to combine the best out of metalsmith and webpack.
page.js
and extracted to a css file via ExtractTextPluginPattern | Description |
---|---|
./content/* |
website content files, mainly markdown files |
./layouts/*.html |
metalsmith-layouts layout files |
./src/config/paths.js |
path configuration |
./src/assets/css,js |
page javascript and stylesheet files |
./src/scripts/*.js |
build process & dev environment scripts |
./dist/assets/**/* |
webpack output directory |
./dist/site/**/* |
metalsmith output directory |
You can start a fully featured development server via yarn dev
(or npm run dev
).
It will spawn a html server at http://localhost:3000
including browser-sync for live reload.
Browser sync spawns a basic webserver with the webpack-dev-middleware injected.
The live reload gets very effective by combining 3 different reload techniques:
rs
shortcut while running. Simply type and hit enter to restart the server manuallymetalsmith-helpers.js
in the scripts folder exports two metalsmith debugging plugins: A StatisticsPlugin
for a general overview and a DebugPlugin
for in-deepth insights<pre>{{debug YOUR_VARIABLE}}</pre>
(Hint: use this
as variable to debug display the whole file metadata)npm run
for an overview of all available scripts.You can run a fresh page build via yarn build
(Or npm run build
)
npm-scripts
: Set DEBUG
environment variable to metalsmith*
to enable metalsmith debuggingnpm-scripts
: Clean up ./dist/*
directorieswebpack
: Build javascript and stylesheet files via webpackmetalsmith
: Copy webpack assets to site directorymetalsmith
: Fingerprint webpack assetsmetalsmith
: Compile markdown filesmetalsmith
: Apply layoutsmetalsmith
: Show statisticsEt voilà. You can find your generated website in ./dist/site/
. See below how you can preview and deploy the result.
With yarn deploy
(or npm run deploy
) you can deploy your latest website directly to GitHub pages via gh-pages
Running yarn server
(or npm run server
) will spawn a simple production server which is great for testing the final version.
This project follows the standard coding and the conventional changelog commit message style. Also it is configured to never decrease the code coverage of its tests.
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue. But before doing anything, please read the CONTRIBUTING.md guidelines.