Hack the “Deploy to Netlify” Button Using Environment Variables to Make a Customizable Site Generator

If you’re anything like me, you like being lazy shortcuts. The “Deploy to Netlify” button allows me to take this lovely feature of my personality and be productive with it.
Clicking the button above lets me (or you!) instantly clone my Next.js starter project and automatically deploy it to Netlify. Wow! So easy! I’m so happy!
Now, as I was perusing the docs for the button the other night, as one does, I noticed that you can pre-fill environment variables to the sites you deploy with the button. Which got me thinking… what kind of sites could I customize with that?

Idea: “Link in Bio” website
Ah, the famed “link in bio” you see all over social media when folks want you to see all of their relevant links in life. You can sign up for the various services that’ll make one of these sites for you, but what if you could make one yourself without having to sign up for yet another service?
But, we also are lazy and like shortcuts. Sounds like we can solve all of these problems with the “Deploy to Netlify” (DTN) button, and environment variables.
How would we build something like this?
In order to make our DTN button work, we need to make two projects that work together:
A template project (This is the repo that will be cloned and customized based on the environment variables passed in.)A generator project (This is the project that will create the environment variables that should be passed to the button.)I decided to be a little spicy with my examples, and so I made both projects with Vite, but the template project uses React and the generator project uses Vue.
I’ll do a high-level overview of how I built these two projects, and if you’d like to just see all the code, you can skip to the end of this post to see the final repositories!
The Template project
To start my template project, I’ll pull in Vite and React.
npm init @vitejs/app
After running this command, you can follow the prompts with whatever frameworks you’d like!
Now after doing the whole npm install thing, you’ll want to add a .local.env file and add in the environment variables you want to include. I want to have a name for the person who owns the site, their profile picture, and then all of their relevant links.
VITE_NAME=Cassidy Williams
VITE_PROFILE_PIC=https://github.com/cassidoo.png
VITE_GITHUB_LINK=https://github.com/cassidoo
VITE_TWITTER_LINK=https://twitter.com/cassidoo
You can set this up however you’d like, because this is just test data we’ll build off of! As you build out your own application, you can pull in your environment variables at any time for parsing with import.meta.env. Vite lets you access those variables from the client code with VITE_, so as you play around with variables, make sure you prepend that to your variables.
Ultimately, I made a rather large parsing function that I passed to my components to render into the template:
function getPageContent() {
// Pull in all variables that start with VITE_ and turn it into an array
let envVars = Object.entries(import.meta.env).filter((key) => key[0].startsWith(‘VITE_’))

// Get the name and profile picture, since those are structured differently from the links
const name = envVars.find((val) => val[0] === ‘VITE_NAME’)[1].replace(/_/g, ‘ ‘)
const profilePic = envVars.find((val) => val[0] === ‘VITE_PROFILE_PIC’)[1]

// …

// Pull all of the links, and properly format the names to be all lowercase and normalized
let links = envVars.map((k) => {
return [deEnvify(k[0]), k[1]]
})

// This object is what is ultimately sent to React to be rendered
return { name, profilePic, links }
}

function deEnvify(str) {
return str.replace(‘VITE_’, ”).replace(‘_LINK’, ”).toLowerCase().split(‘_’).join(‘ ‘)
}
I can now pull in these variables into a React function that renders the components I need:
// …
return (

{vars.name}

{vars.name}

{vars.links.map((l, index) => {
return
})}

)

// …
And voilà! With a little CSS, we have a “link in bio” site!

Now let’s turn this into something that doesn’t rely on hard-coded variables. Generator time!
The Generator project
I’m going to start a new Vite site, just like I did before, but I’ll be using Vue for this one, for funzies.
Now in this project, I need to generate the environment variables we talked about above. So we’ll need an input for the name, an input for the profile picture, and then a set of inputs for each link that a person might want to make.
In my App.vue template, I’ll have these separated out like so:

In that List component, we’ll have dual inputs that gather all of the links our users might want to add:

So in this component, there’s the two inputs that are adding to an object called newItem, and then the ListItem component lists out all of the links that have been created already, and each one can delete itself.
Now, we can take all of these values we’ve gotten from our users, and populate the GenerateButton component with them to make our DTN button work!
The template in GenerateButton is just an  tag with the link. The power in this one comes from the methods in the 

Typed at

Share your love

One comment

  1. Inspiring story there. What occurred after? Take care!

Leave a Reply