This guide takes you through the steps necessary to create your own Photódex of AR snaps from Pokémon GO.
An example can be seen here: http://jtatomico.photodex.io
To create your own Photódex, you will need to have a a working knowledge of Git and a GitHub account.
Fork the repository at https://github.com/jamiehumphries/photodex to your own account (click Fork in the top right).
There should only be one branch, which is called master
.
Clone the repository locally, to allow you to add your snaps.
Photódex requires two different sizes of each of your AR snaps - a thumbnail and a gallery image.
For an example, see: https://github.com/jamiehumphries/jtatomico.photodex.io/tree/gh-pages/snaps
The first step is to place a copy your AR snaps from Pokémon GO in to the /snaps
directory.
The images need to be PNG files and the name needs to include the Pokémon's three digit Pokédex number with leading zeroes if necessary.
For example, an AR snap of Bulbasaur could be placed at /snaps/001-Bulbasaur.PNG
or just /snaps/001.png
.
From your original snaps, we now need to generate a thumbnail and a gallery image which are to be are placed in /snaps/thumbs
and /snaps/gallery
.
To do this:
-
Install ImageMagick: https://www.imagemagick.org/
-
Install Node: https://nodejs.org/
-
From the project's root directory, run:
npm install npm run snaps
Once you have confirmed that the images have indeed been converted and copied to /snaps/thumbs
and /snaps/gallery
, you can delete the original images in the root of /snaps
. This is not necessary because Git ignores them, but it might keep things tidier.
To test that your website is working, run:
npm start
You should then be able to see your Photódex running at: http://localhost:8080
Once you are happy that your local instance is working properly, you can now publish it as a GitHub Pages site.
Checkout a new branch at the head of master
called gh-pages
:
git checkout -b gh-pages
Commit all of you new snaps to this new branch:
git add snaps/
git commit -m "Add snaps."
Push this branch back to your GitHub repository.
git push -u origin gh-pages
If you now return to GitHub and check the Settings page of your photodex
repository,
you should see under the GitHub Pages that your site has been deployed, e.g.:
✓ Your site is published at https://jamiehumphries.github.io/photodex/
Click the link and check that you are happy with the published Photódex, before moving on to the final step.
Your Photódex is now live on the internet, so you could stop here! But if you would like your own subdomain on photodex.io, then read on.
The subdomain you request must match your Pokémon GO username, e.g. the user PikachuRox91 gets pikachurox91.photodex.io.
Add this as a custom domain for your GitHub Pages site by following the instructions here.
Finally, email jtatomico@gmail.com with a link to your GitHub Pages site (e.g. https://jamiehumphries.github.io/photodex) to request your subdomain registration.
I will let you know once the subdomain has been registered. Please note that the DNS update may take up to a day to filter through.
When, in the future, you get a snap of a new Pokémon that you haven't yet registered to your Photódex, you can quickly add it in using these steps:
-
Add the new
.png
snap to your/snaps
directory. -
Re-run the NPM task to generate the thumbnail and gallery images:
npm run snaps
-
Make a new commit with these images on the
gh-pages
branch, e.g.:git checkout gh-pages git add snaps/ git commit -m "Found Chansey!"
-
Push this commit back to GitHub:
git push origin gh-pages
GitHub will then republish your site and in a few moments you should be able to see your new snap online.
That should hopefully be all that you need to know! Happy hunting - Gotta Snap 'Em All!