This is basic flow/way to build your own automated interface for code sketches utilising gitHub pages.
Details in this medium article: medium.com/@eesur/code-sketches-nodebox-3-e6853f28c2bc
View with example data: https://eesur.github.io/template-nodebox-sketches/
There's just one setting you need to update in the index.html
, your repo name (around line 73
), where the render code is (be sure to include the branch). The other option is how may columns you prefer in the webpage (it uses flex grid)
settings: {
githubUrl: 'https://github.com/eesur/nodebox-daily-sketches/tree/master/',
columns: 3
}
prerequisites:
- node installed
- git installed
in your terminal:
- clone this repo to your computer (without the history):
git clone https://github.com/eesur/nodebox-daily-sketches.git && rm -rf nodebox-daily-sketches/.git
- run
npm update
to installpackage.json
dependencies - delete the example sketches and code (So you have a clean slate)
- create your repo and push to it
- set up gitHub Pages (just go to setting tab in your repo and turn on github pages)
- Save your NodeBox file into the
code
folder - For each sketch export a
png
image into theimg-ref
folder
NOTE: Make sure you name the code
files and img
files the same, for example in this template I've named the images [number-name].png/gif
and the code [number-name].ndbx
- Update the data in the files:
run npm tree
- push
code
: is a folder containing the code filesimg-refs
: folder for all the images (png and gif)directory-tree.js
: is the folder structure of the code filesimgTee.json
: is the folder structure of the image folders