ranj chak dot com
Personal website for Ranjani Chakraborty at http://ranjchak.com.
$ git clone https://github.com/mcous/ranj-chak-dot-com.git
$ npm install
$ make && npm start
A dev server will now be running at 0.0.0.0:8080 to show you what the page will look like.
$ make all- Default target. Builds html, js, and css, and minifies images
$ make clean- Deletes built files
$ make watch- Watches files and builds as necessary on changes
There are several important development scripts:
$ npm start- Start the dev server at 0.0.0.0:8080
The development server is Express-based and lives in
server.js. It incorporates LiveReload, so it will reload the page automatically (no plugin needed) when source files change.
To deploy the site, cut a new release with the npm version command. The automatic
postversion script will take care of building and pushing to GitHub pages. To deploy, you must have write access to the
ranj-chak-dot-com repository. For example:
$ npm version patch -m 'Upgrade to %s for ____'if you fixed a minor issue, like a typo
$ npm version minor -m 'Upgrade to %s for ____'if you did something small, like added a video
$ npm version major -m 'Upgrade to %s for ____'if you did something big, like change the structure
The logic, styling, structure, images, and content of the page all live in separate places:
- logic -
- styling -
- template -
- content -
- images -
The build steps output to
src/script and are combined into a single
bundle.js file at build time. The build is handled by Browserify.
Style files are broken up into individual components to line up (mostly) with the template files. They live in
src/style and are combined into a single
bundle.css at build time. The build is handled by PostCSS with several plugins (configuration in
postcss import plugin
This plugin is included to inline the files from CSS imports to build a single CSS bundle.
postcss cssnext plugin
This plugin is included to allow the use of future CSS syntax and features.
This plugin is included to allow the use of the lost fractional grid system.
templates and content
All templates live in the
src/template directory. Content for the templates is pulled at build time from
src/content.json. The templates are combined and output to a single
index.html. The templates are written in Jade.
Most editing, adding, or removing content from the site can be accomplished by editing
Images live in
src/img. Before the images are deployed or served, they are minified by imagemin.