環境変数を使用して「NetLifyにデプロイする」ボタンをハッキングして、カスタマイズ可能なサイトジェネレーターを作成します-CSSチュートリアル-php.cn

Idea: “Link in Bio” website

How would we build something like this?

The Template project

The Generator project

Put it all together

ホームページ

ウェブフロントエンド

CSSチュートリアル

環境変数を使用して「NetLifyにデプロイする」ボタンをハッキングして、カスタマイズ可能なサイトジェネレーターを作成します

William Shakespeare

Mar 22, 2025 am 10:41 AM

$Hack the \$

If you’re anything like me, you like ~~being lazy~~ shortcuts. The“Deploy to Netlify” buttonallows me to take this lovely feature of my personality and be productive with it.

Clicking the button above lets me (or you!) instantly clone myNext.js starter projectand 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 canpre-fill environment variablesto 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 oneyourselfwithout 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 wholenpm installthing, you’ll want to add a.local.envfile 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 withimport.meta.env. Vite lets you access those variables from the client code withVITE_, 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 (
    <div>
      <img alt={vars.name} src={vars.profilePic} />
      <p>{vars.name}</p>
      {vars.links.map((l, index) => {
        return <Link key={`link${index}`} name={l[0]} href={l[1]} />
      })}
    </div>
  )

// ...

ログイン後にコピー

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 myApp.vuetemplate, I’ll have these separated out like so:

<template>
  <div>
    <p>
      <span>Your name:</span>
      <input type="text" v-model="name" />
	</p>
    <p>
      <span>Your profile picture:</span>	
      <input type="text" v-model="propic" />
    </p>
  </div>

  <List v-model:list="list" />

  <GenerateButton :name="name" :propic="propic" :list="list" />
</template>

ログイン後にコピー

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

<template>
  <div >
    Add a link: <br />
    <input type="text" v-model="newItem.name" />
    <input type="text" v-model="newItem.url" @keyup.enter="addItem" />
    <button @click="addItem">+</button>

    <ListItem
      v-for="(item, index) in list"
      :key="index"
      :item="item"
      @delete="removeItem(index)"
    />
  </div>
</template>

ログイン後にコピー

So in this component, there’s the two inputs that are adding to an object callednewItem, and then theListItemcomponent 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 theGenerateButtoncomponent with them to make our DTN button work!

The template inGenerateButtonis just antag with the link. The power in this one comes from themethodsin the