This repo creates a set of gallery pages based on IPFS hosted hicetnunc.xyz NFT token artworks:
You can create your own gallery website with nothing more than a github account.
- fork this repo in to your github account
- install Node.js: https://nodejs.org/en/
- clone your fork to your machine and navigate to the folder
- install dependencies:
npm install
- run the setup script:
npm run setup
- Add items to your gallery
# this will create the gallery named "prosopagnosia" if it doesn't exist
# add it will add the object 26001 to that gallery
node tools/add_item.js prosopagnosia 26001
- Remove items from the gallery
# this will remove object 26001 from the prosopagnosia gallery
node tools/rm_item.js prosopagnosia 26001
- Change the favicon.ico files
- You can upload a new image to a favicon creator like this one: https://favicon.io
- Download the images and overwrite the files in
./public/
- Commit your changes:
git add -A .; git commit -m 'initial gallery setup'
- Push to your own fork:
git push -u origin main
- Deploy to github pages:
npm run deploy
In a few minutes, your site will be at https://{YOUR_GITHUB_USERNAME}.github.io/gallery
If you want to setup an event clock for your gallery, edit ./src/data/galleries.json
add add an eventTime
as a unix timestamp (https://www.unixtimestamp.com) for the moment in time that the event will begin and eventURL
that will display as a link to the event location when the countdown finishes.
Example:
"prosopagnosia": {
"eventTime": 1618167600000,
"eventURL": "https://www.hicetnunc.xyz/tz/tz1c2e1WMKKtf6oBZcZK3YFxrXgVbb2ggRr9",
"description": "\"I can't remember her face, but when she looked at me, it felt like this.\"",
"main": 25769,
"items": [25769, 25896, 25900, 25918, 25948, 25998, 26001, 26002]
}
npm run fetch
Then you can commit and re-deploy:
git add -A .; git commit -m 'update data'; git push; npm run deploy
- This site is built using Vue.js, SCSS, and pug
- Text and social media links are in
config.json
./src/data/galleries.json
can be edited to rearrange items, to set new main thumbnails, add event countdowns, and gallery level descriptions../src/data/gallery_data.json
is the downloaded object data from hicetnunc.xyz- Primary CSS styles for background-color, text-color, etc, can be found in
./src/App.vue
npm run serve