Hey. I'm Dwane (LifeLong.dev) and I like to build side projects. One of them is a site where I post pictures and videos of my travels (Dwane.in). I've shown it to a few folks and they asked if they could get one like it.

So here it is. A less complex version of my project that is easier to get up and running. You can see a demo at Dwane.Posted.Pics

For $2 USD a month, you can get a custom subdomain (yourname.posted.pics). If interested, contact me at my site or Twitter (@lifelongdev)

Things you need

• GitHub account
• Netlify account (you can log in using GitHub)
• Cloudinary account (you can Login using GitHub) *This is an affiliate link so I can get more credits if you sign up.

Steps

Deploy the site

• 

Set up Log in with GitHub

• To be able to log into the photo gallery's admin dashboard, you'll need to enable the GitHub provider in the Netlify dashboard. Go to "Site settings" -> "Identity", enable and then "Registration" and scroll to "External providers". Select "GitHub" under "Add provider".

Get Environment Variables

• In your Netlify dashboard, go to "Site settings" -> "Environment variables"

• Click "Add a variable" and select "Import from a .env file"

• Copy and paste the following into the box next to "Contents of .env file:"

CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_NAME=
GITHUB_PAT=
NETLIFY_PAT=

(Leave Scopes: All scopes and Deploy contexts: All deploy contexts)

• Click "Import variables"

• Now, we need to fill in the Environment variables. In the Netlify Dashboard, click a variable to expand it. Click "Options" -> "Edit". Make sure, "Scopes: All scopes" and "Values: Same value for all deploy contexts"

• Open the same variable below to see how to get the value you will then input into the dashboard. Click "Save variable" Repeat until all Environment variables are filled in.

CLOUDINARY_API_KEY | CLOUDINARY_API_SECRET | CLOUDINARY_NAME

Go to the Console dashboard The left side bar should look like this:

On this page, you'll find the API key, API secret, and Cloud Name to put into the Netlify dashboard.

GITHUB_PAT

Here is a link to instructions on how to set up your GitHub Personal Access Token (classic): https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token#creating-a-personal-access-token-classic Note: If you set an expiration, you'll have to create another PAT.

NETLIFY_PAT

Go to https://app.netlify.com/user/applications and scroll to "Personal access tokens". Click "New access token" give it a name and click "Generate token".

Set up Cloudinary upload preset

• Create a Cloudinary upload preset in the Console and then "Settings"(gear icon in the bottom left) -> "Upload" scroll to "Upload presets".

• Click "Add upload preset"

• Fill out the following:

Upload preset name -> posting-pictures
Signing Mode -> Unsigned
Use filename or externally defined Public ID: on
Unique filename: on

(You can take a look at the other options and select what fits your needs.)

View your photo gallery and admin dashboard

• In the Netlify dashboard, you should be able to click the link under "Settings for..." to view your photo gallery. I'll be empty.

If you get an error about posts.map or something, try to trigger a redeploy by going to "Deploys" in the left sidebar and then select "Deploy site" under "Trigger Deploy". I think it may have to do with the Environment keys being set when it was deployed intially. 🤷🏾‍♂

• Put "/admin" at the end of your site's URL to go to the dashboard.

• Click login and then "Continue with GitHub

If the screen stays on authorizing for a long time, you may need to add yourself as a User. Click "Site Settings" -> "Identity" -> "Registration". Under "Registration preferences", click "Edit settings". In the option "Invite only" description, click "Identity tab". There, register with the same email address used for your GitHub account.

Congrats!!!

• That's it! Add events, photos and enjoy! Feel free to show me your photo gallery if you want.

Upcoming features

Things I want to add once I get some time:

• Integrate the View Transitions API
• Show events on a map
• Show photos based on keywords, time, people, things, etc

Astro Stuff if you want to modify things

Built the photo gallery with Astro using HTML, CSS and JavaScript. Don't need to be an expert to make some customations.

The Admin dashboard is built with Svelte. Astro also supports Lit, Vue, React, Preact, SolidJS, and more. Feel free to rewrite anything with whatever you are comfortable with.

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.