How to set up your Netlify Website Template

Step 1: Download Your Website Template

1. After purchasing the template, open the provided PDF file.
2. Use the link in the PDF to access the Proton Drive page.
3. Enter the password from the PDF to access the files.
4. Download the template and save it to your desktop.
5. Unzip the file by right-clicking it and selecting “Extract.”

Step 2: Create a GitHub Account and Install GitHub Desktop

1. Go to the GitHub website and create an account if you don’t have one.
2. Download and install GitHub Desktop.
3. Open GitHub Desktop and log in to your GitHub account by going to File > Options > Accounts > Sign into GitHub.
4. 
5. 

Step 3: Create and Publish a GitHub Repository

1. In GitHub Desktop, click the dropdown menu to add a new repository.
2. 
2. Then select Add > Create a New Repository.
3. 
3. Give your repo a name and where you want to store it, then click Create Repository.
4. 
4. Once you have created your new repo, click Publish Repository.
5. 
5. Make sure you have checked Keep this code private, then click Publish Repository.
6. 

Step 4: Upload Your Template to GitHub

1. Open the newly created repository folder on your desktop by clicking Show in Explorer.
2. 
2. Copy the contents of the unzipped template into this folder.
3. 
3. Return to GitHub Desktop, fill in the Summary field and Commit the changes.
4. 
4. Then push them to GitHub by clicking Push Origin.
5. 

Step 5: Create a Netlify Account

1. Go to the Netlify website and sign up for an account.
2. Confirm your email and log in to the Netlify dashboard.

Step 6: Connect Your Site to Netlify

1. In Netlify, in the menu go to Sites, you should then see the Add your site to Netlify, click Import from Git.
2. 
2. We are going to deploy our project with GitHub.
3. 
3. Now you need to select the Repository we just created and copied your site into.
4. 
4. Give your site a name, this can be whatever you want.
5. 
6. You need your build setting to look exactly like this:
7. In the Build Settings:
   • Set the Branch to Deploy to main.
   • Set the Base Directory to /.
   • Set the Build Command to npm run build.
   • Set the Publish Directory to /public.
8. 
6. Then you can Deploy your site.
7. 
7. You will see your site building in the Production Deploys box, it will then turn green with Published next to it.
8. 
9. Your site is now live.

Step 7: Enable Netlify Identity.

1. Go to the Site Configuration section in Netlify.
2. 
2. Go to the Identity in the side menu.
3. 
3. Enable Identity.
4. 

Step 8: Configure Identity Settings

1. Go to the Identity Setting page from the menu in the sidebar.
2. 
2. Scroll down to the Registration settings
3. First we will configure the Registration Preferences, change this to Invite Only.
4. 
5. 
4. Second we will configure External Provider, add GitHub here.
5. 
6. 
7. 
5. Now still in the Identity Settings, scroll down to the Services settings and click Enable Git Gateway.
6. 
6. Lastly in the Identity Settings, you need to invite yourself so you can login to the Admin setting of your website. Send an invitation to your GitHub email (the email address you used to create your GitHub account) from the Users settings.
7. 
7. Accept the invitation via email and log in with Continue with GitHub.
8. 

Step 9: Trigger a Netlify Update

1. Access the CMS via your-site-url/admin.
2. Make a minor change (e.g., add an exclamation mark) to any content.
3. Publish the changes to trigger a rebuild of the site.

Step 10: Enable Form Detection

• Go to the Forms section in Netlify and click Enable form detection.
• 
• 

Step 11: Submit a test form to activate it.

1. Go to your site and send a test message to activate your sites form.
2. 
2. Then you want to go back to the Form menu in Netlify and you should now see the ,Active Forms box.
3. 
4. *If you do not see this Active Form box, try hard resetting your site with ‘CTRL + F5’, and submit another form from your site. If you still do not see that Active Form box, then repeat step X and trigger another build of your site, then once your site is build, go to its live page, perform another hard reset, and submit another form.
3. Now you should have 1 submission, click on it and you should see the test message you just sent.
4. 

Step 12: Setup Email notifications for your Form

1. Configure email notifications for form submissions in Site Configuration > Notifications.
2. 
3. 
2. Scroll down to the Emails & Webhooks section, and look for the Form Submissions Notifications.
3. 
3. Select Add notification > Email Notification.
4. 
4. Complete the form, you need to input the email you want the notification to go to.
5. 

Step 13: Setting up a Custom Domain

1. In the sidebar menu for your site, go to Domain Management. Click Add a Domain.
2. 
2. Enter in your Custom Domain you have purchased form a domain provider, it will tell you that its already registered, that means that its already registered with your provider. Click Add Domain.
3. 
3. Now on the Domain Management page in the Production Domains you will see your custom domain. Now click Options > Set up Netlify DNS.
4. 
4. Click Verify.
5. 
5. Click Add domain.
6. 
6. You don’t need to change anything in the DNS Records, Netlify will do this for you. Click Continue.
7. 
7. These are the name servers you will need to replace with your Domain Provider. Now you want to go to your Domain Provider and deleted any name servers in your custom domain, and replace them with these. This process will be different depending on who your provider is, below is resources for the 4 main domain providers, if yours is not on the list just google “ Your Domain Provider Name, how to edit name servers”.
8. 

9. Custom Domain Resources

   • Namecheap: How to Change DNS For a Domain
   • GoDaddy: How to Connect Godaddy Domain to Netlify
   • Domain.com: How To Update Nameservers
   • Bluehost: How to Change Your Name Servers
8. After you have updated your name servers, your will see a tick next to Netlify DNS, note any change to your domain can take up to 48 hours to process.
9. 
9. Now you can go back to your Site Overview page, and you should now see your custom domain is displayed and working.
10. 

11. Your site is now all set up.