Website Template Setup Guide

Step 1: Getting a Custom Domain

Estimated time: 5-15 minutes

I know I said that this template allows you to make and host your website for free, and it does, but this is the only step where you might want to consider spending a small bit of money ($6). That's because this step talks through purchasing a custom domain that you can use for your website.

What is a Domain?

A domain is your website's address on the internet (like www.yourcompany.com). It's how customers will find you online.

You can buy these website addresses from domain providers. We'll use Namecheap in this guide, but you can use any domain provider you are most comfortable with.

Do I need a Custom Domain?

You might be unsure on what you want to call your startup and therefore don't know what domain name to buy. That's ok. This template is designed so you don't need a custom domain to set up your website so you can skip this step, however I do recommend getting one.

Having a custom domain will help to legitimise your website when sending it to people and you can transfer it to any future website you make. You can get a .com domain for as cheap as $6 for the entire year, so worst case you change your mind on what your startup name is and have to buy a new domain. Just make sure you buy a cheap domain name to start with.

If you're stuck on what to call your startup you can get the help of ChatGPT. Go to ChatGPT.com and enter a prompt like "Generate 10 unique startup names for a company that [describe your business]". Then pick a name you like and check on Namecheap.com whether that domain name is available for you to purchase.

You may find that in many instances the .com for your preferred domain is already registered. This is because .com is the most popular domain extension on the internet. If this is the case you have 2 options. Either change your startup name to secure the .com or use a different domain extension. This article shows the most common domain extensions in 2024 with some other popular options you can use at the bottom.

However, if the domain name that most closely matches your company name belongs to a potential competitor, then to avoid problems down the line you may need to consider using a different company name.

If you already have a custom domain for your project or don't want to get one then you can skip this step.

Steps to Get a Custom Domain

1. Search for your domain:
   • Go to Namecheap.com
   • Use Namecheap's search bar to check if your desired domain is available
   • Try different variations if your first choice isn't available
2. Purchase your domain:
   • Once you find an available domain you like, add it to your cart
   • Press checkout and complete the checkout process
     • Turn on auto-renew for your domain registration to ensure you can keep it as long as you need. Just make sure to cancel it if you ever want to give up your domain
     • Keep domain privacy enabled as this is included for free and keeps your personal information private
     • There is no need to purchase any of the other products NameCheap offers right now
   • Confirm your order. Namecheap will guide you through the necessary steps to finalise your purchase, including creating an account or signing in

For more detailed instructions, check out Namecheap's domain registration guide.

Step 2: Copy the Get Going Website Template using GitHub

Estimated time: 5-10 minutes

In this step you will be making a copy of the Get Going Website Template that you can use and make your own. We will use GitHub pages to host the website so that other people on the internet can access it.

What is GitHub?

GitHub is a popular platform that website developers use to store and manage code. The Get Going template is saved here, and we'll use GitHub to host your website too.

Why GitHub?

First off, GitHub allows you to host your website for free, which is seriously hard to beat. GitHub also has built in editing, which makes it easier to edit your site without downloading additional software and means you never have to download the Get Going template onto your computer. GitHub is used by over 100 million software developers around the world so it is a trusted platform and will be adequately equipped to handle all levels of traffic your website may encounter.

Before we get going, here's some GitHub language that may be helpful to understand:

• Repository (or "Repo"): Think of this as a folder on your computer, used to store all the files that make up your website
• Commit a change: This basically means you are saving your changes to GitHub

Steps to Copy the Get Going Website Template

1. Create a GitHub account:
   • Go to GitHub.com
   • Click "Sign Up" and follow the prompts. Choose a free account from the subscription option list.
   • If you already have an account, simply log in
2. Create a copy of the Get Going template:
   • Go to https://github.com/lucaducca/Get-Going-Template
   • Click the "Use this template" button on the top right of your screen
   • From the list of options in the drop down menu, click "Create a new repository"
   • Under "Repository name" specify the name you want to give this project (ideally your company name). Don't worry, this can always be changed later.
   • Make sure it's set to "Public"
   • Click "Create repository"

After pressing "Create repository" you will be taken to your newly created repository page.

Your repository has 5 files inside of it (pictured below). Keep this page open as we will be making edits to the files LICENSE, inputs.js and logo.png in future steps.

If you accidentally leave this page, go back to GitHub.com, go to "Your profile" and click "Repositories" which will show a list of all of your repositories. Click the one for this project.

Step 3: Host your website using GitHub

Estimated time: 5-15 minutes

Following the previous step you now have your own copy of the Get Going template on your GitHub, free to edit as you wish.

In this step we will host your newly created website using GitHub pages, making it accessible to everyone on the internet.

Steps to Host Your Website

1. Delete the LICENSE file:
   • Currently included in the Get Going template you copied is a license file giving you the legal right to use the template for free
   • This was very nice of me, but for your own project you probably want to delete this so it is protected by copyright
   • In your GitHub repository, click the LICENSE file to open it
   • Click "..." in the top right to open the list of options
   • Click "Delete file"
   • Click "Commit changes..." then "Commit changes" again in the pop-up
   • You have now successfully deleted the LICENSE file and made your first edit to the template!
2. Set up GitHub Pages:
   • In your project repository, go to "Settings" in the top navigation bar
   • Click on "Pages" in the left sidebar
   • Under "Branch", click "None" to show the dropdown options and choose "main"
   • Click "Save"
3. Open your live website:
   • After pressing "Save" in the previous step, GitHub started setting up your website
   • It will take GitHub a few minutes to finish doing this, so wait 5 minutes or so, maybe even make a cup of tea, then refresh the page
   • If it's ready you will see a box at the top of the page saying "Your site is live" with your live websites URL (it will look like the below)

• • If you don't see this box yet, wait a few more minutes and refresh the page again
  • Click "Visit site" to be taken to your newly hosted website
  • You will see that currently your website is for a Netflix competitor called "Notflix". In the following steps I will walk you through how to update this to show your own startup
  • If you close your website you can get back to the link for it by clicking "Settings" then "Pages" in your GitHub repository. You can also save your new website to your favourites bar for quick access

4. Adding your custom domain (if you are not using a custom domain then you can skip this step):
   • Note: You must wait 48 hours after purchasing your custom domain to complete this step, so if you purchased your domain today you will have to return to this step in a couple of days (but you can continue with the other steps until then)
   • Go back to the GitHub pages section of your repository (Settings > Pages)
   • You will see there is a section called "Custom domains"
   • In the empty box type your custom domain without www. (e.g., example.com) and press "Save"
   • You will see "DNS Check in Progress" and then get "DNS check unsuccessful". This error is expected so ignore it for now
   • If you used NameCheap to purchase your custom domain, follow these instructions (steps 1-3) or follow along with this video to finish setting up your custom domain on NameCheap
   • After following these steps return to the GitHub pages section of your repository
   • It will take a few minutes, but the DNS check should now show as successful. Congrats! You now have your website hosted online accessible using your custom domain!
5. Return to your GitHub repository:
   • To get back to your repository (which we will be using later) click "< > Code" in the top navigation bar of GitHub

Step 4: Choosing your brand colours

Estimated time: 5-10 minutes

This next step is a quick and easy one where we will decide on a primary brand colour for your website and get the HEX code for it (we will need this for future steps).

If you already know what you want your brand colour to be then that's great! Just make sure you have the HEX code for it. To do this you can use HTMLColorCodes.com to pick the colour you want and copy the HEX code (it looks like a # followed by 6 digits e.g., #E50914 is the HEX code for the iconic Netflix red).

If you're not sure what colour you want to use, you can check out USBrandColors.com for inspiration from some of the most iconic US brands.

You can also check out Coolors.co for further inspiration based on trending colour palettes.

Remember not to overthink it at this stage. You can always change your mind down the road so for now lets just get going!

If you want to keep it simple, below are the HEX codes for some standard colours that you can use:

• Red: #FF0000
• Yellow: #FFFF00
• Blue: #0000FF
• Orange: #FFA500
• Green: #00FF00
• Purple: #A020F0

Whatever colour you pick, make sure you keep a note of the HEX code so we can use it later.

Step 5: Setting up EmailOctopus

Estimated time: 15-30 minutes

What is EmailOctopus?

EmailOctopus is an email marketing platform that allows us to gather customer emails through an input form. This allows us to start building a mailing list and most importantly means when it comes to launching our product we can let everyone who registered their interest know about it.

Why EmailOctopus?

There are many email marketing platforms out there, including well known brands like MailChimp and Brevo. I chose EmailOctopus for this template as they:

• Have a generous free tier (up to 2,500 subscribers and 10,000 emails per month)
• Have competitive and transparent pricing for when you go BIG!
• Are easy to use, even for beginners
• Allow easy export of contacts so in the future you can always switch to another provider and bring your contacts at no cost
• Have great customer support to help you when the time comes to send emails

Do I need an EmailOctopus form?

The form will allow site visitors to sign up to your mailing list, wait-list or whatever other marketing list you choose to use it for. Either way it is a great opportunity to get the contact details of people who are interested in your idea so I recommend doing this step.

However this step is still optional so you can skip it if you want.

Steps to Set Up EmailOctopus

Note: To comply with anti-spam laws, email marketing platforms like EmailOctopus require you supply a physical address when creating an account that will be included in all emails sent to your mailing list. If you don't want to use your home address this should be a business address, PO box, co-working space address or any other physical address where you are able to receive mail and have consent to do so. Some other examples of spaces you can use can be found in this article. If you already have one of these available to you, then you can skip part one of this step. Likewise, if you just want to set up your website for now and don't plan to email your mailing list anytime soon then you can use your personal address to set up an account and change it when you're ready to send commercial emails by returning to part one (just don't forget as your personal address will be included in the emails you send). If neither of these apply to you then follow step one, which will walk you through securing a free pay-as-you-go postal address that you can use.

1. Create a free UK address (regardless of where you are in the world):
   • Go to UKPostBox.com
   • Click "Sign Up" and select the free "PO Box Addresses" option
   • Select "PO Box Poole"
   • Select "Letter PAYG" and confirm your order
   • Insert your details and press "Sign Up"
   • Follow the instructions to verify your identity
   • After submitting your ID documents it will take one working day to verify and receive your new UK address

If you have followed part one and are waiting for your ID to be verified to get your new address, you can either pause here and return once your new address has been confirmed in ~24hrs or you can use your personal address to create an account for now, then change it once you have received your new address. Either works!

2. Create an EmailOctopus account:
   • Go to EmailOctopus.com
   • Click "Sign Up" and follow the prompts to create an account, or sign in if you already have an account
   • Select a subscription tier (I recommend the free tier for now)
   • Enter your details
   • Note: If you followed Step 1: Getting a Custom Domain, you already have your company name and website URL. If however you skipped Step 1 as you don't know what to call your company then don't worry! Just use the same placeholder project name you used when setting up your GitHub repository and use the URL for your live GitHub website (i.e., username.github.io)
   • Enter your address
   • Note: As already mentioned, EmailOctopus needs your address to comply with anti-spam laws. Use the address you are happy to be displayed to your mailing list, such as a business address, PO box or co-working space address. If you do not have one of these but are not planning to send commercial emails yet or are waiting for your new UKPostBox.com address then you should use your personal address as a placeholder. To update your address in EmailOctopus head to Account settings > Sender info and update it there.
3. Create a new contact list:
   • In your EmailOctopus dashboard, click "Lists" then "Create a list"
   • Name your list (e.g., "Newsletter Subscribers")
   • Click "Create"
4. Create a form:
   • Go to "Landing pages & forms" in your dashboard
   • Click "Create a form"
   • In the "List" dropdown ensure the list you created for this project is selected
   • Select the "Inline" style and click "Save & next"
   • Select the "Basic" template
5. Customise your form:
   • Click your form to open the "Content" menu
   • In "Button" under "Background colour", enter the HEX colour code you have picked for your brand
   • If you're using a very light background colour make sure to change the "Text colour" to black using HEX code #000000
   • Press "Update"
6. Get your form code:
   • Click "</> Add to your website" in the form editor
   • Copy the provided <script> code
   • Keep this code somewhere handy - we'll use it later!

For more detailed instructions on creating a form or to customise your form further, check out EmailOctopus's video guide.

Phew! I'm glad that's done. That was a tricky step so well done! We're now on the home stretch to having your new website made!

Let's do a recap on the progress we have made so far:

• Decided a name for your startup
• Purchased a custom domain so customers can find your website
• Created a GitHub account and hosted the Get Going template using your new custom domain
• Confirmed an address that we can use to comply with email marketing anti-spam laws
• Created a mailing list and form using EmailOctopus
• Determined the brand colours we will use for our project and customised our form to match

Step 6: Setting up Calendly

Estimated time: 10-15 minutes

What is Calendly?

Calendly is an online scheduling platform that allows people to easily schedule meetings with each other. It allows you to integrate your calendar (e.g., Google, Outlook etc.) so people can only book a meeting with you when you have availability.

Why Calendly?

Calendly is a well known brand providing a simple solution that fits our purpose. I chose it for this template as:

• The free tier supports unlimited 1-on-1 meetings
• It integrates directly with your calendar
• It's user-friendly for both you and your customers

Do I need Calendly?

If you're not planning to conduct any customer interviews yet or do not want any other meeting scheduling ability then you can skip this step.

Steps to Set Up Calendly

1. Create a Calendly account:
   • Go to Calendly.com
   • Click "Get started" and follow the prompts to create an account
   • If you have a Gmail or Outlook account, Calendly will automatically sync with that calendar, so use the email address that has your calendar schedule
   • If you already have an account, simply log in
2. Customize your event:
   • In your "Event types" you will see a 30 Minute Meeting has already been created for you
   • Click on this meeting to edit it
   • Click on "Event details"
   • Update the "Event name" (e.g., 30 minute interview)
   • Update the "Duration" (I recommend max 30 minutes for customer interviews)
   • Update the "Location" with your preferred way to meet and follow the prompts to set this up
   • Click "Save and close"
   • If you want to customize your event further, such as specifying the days and times you're available check out this Calendly guide on getting started
3. Get your Calendly link:
   • Once your event is set up, you'll see the option to share
   • Click "Share" and copy the link - keep it handy as we'll use it in the next step!

Nice work! We now have EmailOctopus and Calendly set-up to use in your website.

However before we move onto the next steps of connecting these to your website, I want to give some advice to help avoid some common errors.

Be patient

When updating the inputs.js file, it's important to wait a few minutes to give enough time for GitHub to upload your changes to your live website. So after committing your changes make sure you wait a few minutes to see them appear on your website.

Test each change

It's important before moving on from a change you have made to test that it's working as it should. This helps to avoid the "blank screen of death" as I call it, which I will show you in a second. It also means that if something does go wrong you know exactly what caused it and can isolate the issue to one line which helps A LOT when debugging. So take the time to test changes after committing them - I promise it's worth the effort!

Understand the "blank screen of death"

I've given it a scary name, but I promise you it's not that scary. It just means something has gone a bit funny with one of your inputs. If you follow the above advice you are less likely to encounter this problem and if you do come across it you are likely to be able to solve it a lot quicker.

The image above shows what the blank screen of death looks like, which is basically all your features (EmailOctopus form, mission statement etc.,) disappearing! Below I have outlined some simple mistakes which might cause this problem (some of which you may have already faced when implementing the EmailOctopus and Calendly links):

• You are missing or have too many ' ' single quotation marks around your input → There should be a single pair of ' ' quotation marks around each input
• Your inputs span multiple lines → Each input should be on one line only
• You have included an apostrophe ' in your mission statement or other inputs → I will share how to overcome this in Step 9 where it becomes relevant

Step 7: Connecting EmailOctopus and Calendly to your website

Estimated time: 10-20 minutes

In this step we will be bringing it all together so that customers can join your mailing list and schedule meetings directly from your website.

We will be heading back to GitHub to edit the template you have saved there. Remember those EmailOctopus and Calendly links I said to keep handy... make sure to have them ready for this step.

Even if you are not including the EmailOctopus form or Calendly in your webpage you should follow these steps to ensure they are removed.

Connecting EmailOctopus

1. Insert your EmailOctopus script:
   • Return to the repository you created in Step 2 on GitHub.com
   • In your repository, click on the file called inputs.js
   • Click the pencil icon on the top right to edit the file
   • Find the line that starts with const emailOctopusScript =
   • Between the ' ' single quotation marks, replace the current text with the script you copied from EmailOctopus
   • If you are not including an EmailOctopus mailing list, just leave it blank: const emailOctopusScript = ''
   • Click "Commit changes..." then "Commit changes" again in the pop-up
2. Wait a few minutes:
   • It will take a few minutes for your new EmailOctopus form to update to your live website
   • How fast depends on your internet speed and other variables, so it's best to wait at least 5 minutes before moving onto the next step which is testing that your new form is working correctly
3. Test your EmailOctopus form:
   • Refresh your live website
   • You should see your personalised EmailOctopus form (or nothing if you have chosen not to include a mailing list)
   • If you do not see your personalised form then wait a few more minutes for the live webpage to update
   • If this persists, refer to the troubleshooting section for help
   • Enter an email address into the form and click "Subscribe"
   • Back on EmailOctopus, go to your "Lists"
   • Click on the list you created for this project
   • If it has been connected correctly, you will see the email address you submitted in the table under "Email addresses"
4. Troubleshooting:
   • Try submitting an email address into your mailing list again: The link may not have updated to your live website yet. Make sure to wait until you can see your personalised form in your website (which should have your brand colours)
   • Check the script you copied into the inputs.js file is correct: It should look like the below and be surrounded in ' ' single quotation marks

• • Try the steps again and make sure you are following the steps carefully
  • Reach out to EmailOctopus support through their chat widget or other support channels

Connecting Calendly

1. Add your Calendly link:
   • Return to the repository you created in Step 2 on GitHub.com
   • In your repository, click on the file called inputs.js, which is the same file we used to insert the EmailOctopus script
   • Click the pencil icon to edit the file
   • Find the line that starts with const calendlyLink =
   • Between the ' ' single quotation marks, replace the current text with the link you copied from Calendly
   • If you are not including a Calendly link, just leave it blank: const calendlyLink = ''
   • Click "Commit changes..." then "Commit changes" again in the pop-up
2. Wait a few minutes:
   • It will take a few minutes for your new Calendly link to update to your live website
   • How fast depends on your internet speed and other variables, so it's best to wait at least 5 minutes before moving onto the next step which is testing that your new link is working correctly
3. Test your Calendly link:
   • Refresh your live website
   • If you are connecting Calendly the button won't look any different as we will be editing the colour etc., later (it will have disappeared if you have chosen not to include interview scheduling)
   • Click the "Schedule a meeting" button
   • It should take you to your Calendly event page
4. Troubleshooting:
   • Try waiting a little longer as the link may not have updated to your live website yet
   • Check the link you copied into the inputs.js file is correct: It should look like the below and be surrounded in ' ' single quotation marks

• • Try the steps again and make sure you are following the steps carefully
  • If you are able to follow the link but Calendly is not working as expected then reach out to Calendly support

Congratulations! Most of the hard work is now done. You now have a live website with an integrated mailing list and interview scheduling functionality! How exciting!

Now it's time to make the site fit your brand with these final two steps.

Step 8: Adding your logo

Estimated time: 5-25 minutes

Already have a logo? Great! This step will walk you through adding it your website.

No logo? Don't worry! Choose the section below based on whether you want to make one now or not.

Do I need a logo?

In short... No. Making a logo is completely optional and can be saved for a time when you have a better idea of what your startup is.

Avoid being a perfectionist in this step. If you want to make a logo, make it simple. Otherwise don't make one yet and return to this step when you've validated your idea with customers a bit more.

If you don't have a logo, and don't want to make one yet

1. Remove placeholder logo:
   • In your GitHub.com repository, click on the file called inputs.js
   • Click the pencil icon to edit the file
   • Find const logoFileName = and delete logo.png from between the ' ' single quotation marks
   • Click "Commit changes..." then "Commit changes" again in the pop-up

If you don't have a logo, but want to make one

Below I have provided two options you can use for creating a logo free and easily. You can choose whichever option sounds best to you or use a completely different platform, the choice is yours!

Option 1 (Recommended): Canva - Create your logo from a template using the well loved Canva design platform

1. Create a Canva account:
   • Head over to Canva
   • Click "Sign Up" and follow the prompts to make a free account
   • If you already have an account, simply log in
2. Make your logo from a template:
   • Start by picking one of Canva's free logo templates
   • Edit it to fit your brand (remember to keep it simple!)
   • When your logo is finished, click "Share" then "Download" and download it as a PNG file
   • Note: If you want your logo to have a transparent background then you will need a pro subscription. You can sign up to a 30 day free trial and cancel any time
   • Once your logo has been downloaded, follow the steps for "If you have a logo" below

Option 2: Shopify - Create your logo using Shopify's new AI logo maker

1. Create a Shopify account:
   • Head over to the Shopify AI logo maker
   • Click "Sign Up" and input your details to make a free account
   • If you already have an account, simply log in
2. Make your logo using AI:
   • Click "Get started" in the the Shopify AI logo maker
   • Follow the prompts to specify your industry and how you want your logo to look
   • You will be given a list of logos to pick from. Pick your favourite and click "Edit logo"
   • Edit the logo to look how you want using the side panel or leave it as is
   • When you are happy with your logo click "Next"
   • Click "Download"
   • Your new logo has now been sent to the email address you used to sign up
   • Open this email and click "Download HatchfulExpor-All.zip"
   • In the downloaded folder you will see "logo.png" which is the logo file we will be using in the next step
   • Now follow the steps for "If you have a logo" below

If you have a logo

1. Remove the placeholder logo:
   • Go to your GitHub.com project repository
   • Click the logo.png file to open the 'NOTFLIX' logo
   • In the upper right hand side corner, click the three dots "..."
   • From the drop down menu click "Delete file"
   • Click "Commit changes..." then "Commit changes" again in the pop-up
   • logo.png should now be deleted from your repository
2. Add your logo to GitHub:
   • First make sure your logo image is saved as a PNG file (the file name will be something like logo.png). If not, use this free PNG converter
   • Go to your GitHub.com project repository
   • Click "Add file", then from the dropdown click "Upload files"
   • Upload your logo file (preferably named logo.png)
   • Click "Commit changes..."
   • You should see your logo.png file in your repository
   • If your logo file is not named logo.png then you either change it to logo.png and upload it again, or follow the instructions below:
   • In your project repository, click on the inputs.js file
   • Click the pencil icon to edit the file
   • Find const logoFileName = and replace logo.png with your logo file name between the ' ' single quotation marks
   • Click "Commit changes..." then "Commit changes" again in the pop-up
   • Your logo should now be getting uploaded to your website by GitHub!
3. Wait and test:
   • Wait 5-10 minutes then refresh your website to make sure your logo is now live
   • If you still see the "Notflix" logo then wait another few minutes as it can sometimes be slow to upload!
4. Troubleshooting:
   • If you see the old logo, try waiting a little longer before refreshing your page again
   • If you are getting the "blank screen of death" then refer to the common issues causing this error and try following the steps to add your logo again
   • If you are still experiencing issues, then try to follow the steps using a different PNG image to see if the issue is with your logo itself. You can download the Get Going logo to try this here by clicking the "Download raw file" button. If your logo is the issue, you may have to use a different one (make sure it's a PNG file).
   • Note: You may receive an email from GitHub titled "Run cancelled: pages build and deployment - main". This is ok and can generally be ignored.

Step 9: Website Content and Branding

Estimated time: 20-40 minutes

Now for the final and most exciting part. This is where you can really get creative and make your new website reflect your brand.

We'll be working in the inputs.js file for this step. In each case you can leave a field blank if it's not relevant to you, and either that element will be removed or a default value will be used.

We will start by working through the high priority changes you must make for the page to become your own, then move onto more optional, lower priority changes after.

After each change you make to the input.js file you can check to see how it looks by following the below steps:

• On GitHub click "Commit changes..." then "Commit changes" again in the pop-up
• After 5-10 minutes refresh your live website
• You should see your changes reflected in your live website
• If you get the "blank screen of death" refer to the common issues causing this error

I mentioned earlier that one of the reasons causing the "blank screen of death" is using an apostrophe ' in your mission statement or other inputs. That's because these apostrophes get confused in the code with the ' ' single quotation marks we wrap around each input.

There's a simple fix and that is adding a \ backslash before the apostrophe anytime you want to use one.

So for example, if you want to say "My company's goal is...", in input.js you will have to write "My company\'s goal is..." instead

It's a little annoying I know, but it's just one of those things!

High Priority Changes

1. Open input.js:
   • Return to the repository you created in Step 2 on GitHub.com
   • In your repository, click on the file called inputs.js
   • Click the pencil icon to edit the file
2. Change company name and brand colours:
   • Find const companyName = and between the ' ' single quotation marks replace NOTFLIX with your startup name
   • Find const companyNameColor = and between the ' ' single quotation marks replace #E50914 with the HEX colour code you decided on for your brand in Step 4: Choosing your brand colours
   • Do the same for const formButtonBackgroundColor = to change the Calendly link button to your chosen brand colour
   • Find const formButtonTextColor = . The colour currently between the ' ' single quotation marks is white (#FFFFFF). If your brand colour is very light, you should change this to black (#000000). If your brand colour is darker, then you can leave it as white
   • To check what text colour looks most visible against your chosen brand colour you can use this colour contrast checker and see if it passes the accessibility tests
3. Update social media links:
   • Find the lines corresponding to the social media links (e.g., for Facebook it's const facebookLink =)
   • Between the ' ' single quotation marks replace the links with the links to your own social media page
   • For any social media platforms you don't use, delete the link between the ' ' single quotation marks to remove the icon from your website
4. Update header and description text:
   • Find const headerText = and const descriptionText =
   • Replace the current text between the ' ' single quotation marks with your own mission statement describing your startup (remember to use a \ backslash before any apostrophe's)
   • headerText should be used for your succinct one-line mission statement and descriptionText can be used for a slightly longer supporting description
   • For guidance and examples of writing good mission statements, check out this article
   • If you want to change the font size of your header and description you can do it by increasing or decreasing the numbers next to const headerTextSize = and const descriptionTextSize =
5. Update contact email:
   • Find const contactEmail = and between the ' ' single quotation marks replace example@notflix.com with your email address
   • If you do not want your email address shown on your website then leave it blank between the ' ' single quotation marks

Low Priority Changes

1. Change page background and text colours:
   • Find const pageBackgroundColor = and const pageTextColor =
   • Replace the codes with your desired colour HEX codes, or leave as is (white background, black text) for simplicity
   • To update the colour of the form titles, find const formTextColor = and update the HEX colour code
2. Update calls-to-action text:
   • You can change the default text of buttons and "calls to action" by finding and updating the text between the ' ' single quotation marks for:
   • const socialMediaCallToAction =
   • const meetingCallToAction =
   • const meetingButtonText =

Lowest Priority Changes

1. Change form background colour:
   • If you changed your page background colour, you may want to update the form background colours to match
   • Find const formBackgroundColor = and update the HEX colour code if needed (for example to match your new page background colour)
   • To change the border colour of the form, find const formBorderColor = and update the HEX colour code
2. Change social media icon colours:
   • Find and update the social media icon colours if needed (for example to make them visible if you are using a black background colour)

That's it! Make sure to commit your changes so they are saved to your live website. Feel free to play around with each element using the instructions as time goes on.

Final Remarks

Congratulations! You now have your very own website, completely free to host. It should serve as a great starting point for your startup journey.

Remember, you can always come back to this guide and use it to edit your website as time goes on.

If you have found this template valuable and are able to support me I would be extremely grateful if you bought me a coffee using the button below.

Or share the template with people you know using these buttons.

You can also follow me on X @lucaducca or join my launch list to hear when I launch new projects (I'm aiming to launch a new startup every 2 months for the next year!)

If there are any additional features you would like to see in the template, then you can suggest new features here.