- Get the keys from:
APIs -> Content delivery / preview keys -> Website key
- Management Key -> Getting OAuth Token
cp config/default.json config/development.json
# Edit and add contentful keys
npm install
npm start
- When in development mode, you can access
__config__
from the console to see all defined variables at the top level. - Are you in a macro or partial? Use
{{ this | dump }}
to see it on the page.
- site
- title
- description
- styleClasses - added to
<body></body>
- canonicalLink - should be the hostname, used to construct a link for every page (based off path)
- twitterUsername - username of the page (or site's) author
- favicon - upload of the favicon
- pages - the top level pages for the site
The navigation is constructed via. links from the root site object and goes down via. children.
site -> pages -> children(pages)
- Create a webhook in Netlify, copy the url
- Go to
Settings -> Webhooks
in Contentful, paste the url
Forked from Gulp Starter, then stuff was changed and added:
- Nunjucks for templating, located in
src/html
- Content editing is done in markdown on prose.io
- Gulp will process all
*.md
docs insrc/content/*
- Continuous deployment is set up through host netlify, which is watching the
repo for commits to
master
.https://resolutebuilders.netlify.com/
- As such, all dev should be done on branches and PR'ed into master. For now,
let's use the main
dev
branch.
[ ] More robust image overlays that do color grading and correction [ ] Go over H5BP optimizations [ ] Sidebar scroller bug: Open dev tools (bottom aligned), then scroll to the bottom of a page with a collapsible sidebar, then close dev tools. The sidebar links will stay pinned to the bottom of the page.
[x] Section [x] Content blocks [ ] Form builder; port forms from the base project to start
What follows is stuff from the original readme.
--
Features | Tools Used |
---|---|
CSS | Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps |
JavaScript | Babel, Webpack |
HTML | Nunjucks, gulp-data, or bring your own |
Images | Compression with imagemin |
Icons | Auto-generated SVG Sprites and/or Icon Fonts |
Fonts | Folder and .sass mixin for including WebFonts |
Live Updating | BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware |
Production Builds | JS and CSS are uglified and minified, filename md5 hashing (reving), file size reporting, local production Express server for testing builds. |
JS Testing | Karma, Mocha, Chai, and Sinon, Example Travis CI integration |
Deployment | Quickly deploy public folder to gh-pages with gulp-gh-pages |
Make sure Node installed. I recommend using NVM to manage versions.
This has been tested on Node 0.12.x
- 5.9.0
, and should work on newer versions as well. File an issue if it doesn't!
npm install
npm start
Aliases: npm run gulp
, npm run development
This is where the magic happens. The perfect front-end workflow. This runs the default gulp task, which starts compiling, watching, and live updating all our files as we change them. BrowserSync will start a server on port 3000, or do whatever you've configured it to do. You'll be able to see live changes in all connected browsers. Don't forget about the additional BrowserSync tools available on port 3001!
Why run this as an npm script? NPM scripts add ./node_modules/bin to the path when run, using the packages version installed with this project, rather than a globally installed ones. Never npm install -g
and get into mis-matched version issues again. These scripts are defined in the scripts
property of package.json
.
npm run test:watch
npm run test
npm run production
npm run gulp
(or npm run development
)
This runs gulp
from ./node_modules/bin
, using the version installed with this project, rather than a globally installed instance. All commands in the package.json scripts
work this way. The gulp
command runs the default
task, defined in gulpfile.js/tasks/default.js
.
All files will compile in development mode (uncompressed with source maps). BrowserSync will serve up files to localhost:3000
and will stream live changes to the code and assets to all connected browsers. Don't forget about the additional BrowserSync tools available on localhost:3001
!
To run any other existing task, simply add the task name after the gulp
command. Example:
npm run gulp production
npm run production
This will compile revisioned and compressed files to ./public
. To build production files and preview them locally, run
npm run demo
This will start a static server that serves your production files to http://localhost:5000. This is primarily meant as a way to preview your production build locally, not necessarily for use as a live production server.
npm run deploy
This task compiles production code and then uses gulp-gh-pages to push the contents of your dest.root
to a gh-pages
(or other specified) branch, viewable at http://[your-username].github.io/[your-repo-name]. Be sure to update the homepage
property in your package.json
.
GitHub Pages isn't the most robust of hosting solutions (you'll eventually run into relative path issues), but it's a great place to quickly share in-progress work, and you get it for free.
Surge.sh might be a good alternative for production-ready static hosting to check out, and is just as easy to deploy to. Where ever you're deploying to, all you need to do is npm run gulp production
and transfer the contents of the public
folder to your server however you see fit.
For non-static sites (Rails, Craft, etc.), make sure the production
task runs as part of your deploy process.