Create a Professional & (Almost) Free LandingPage Check List

Introduction

Whether you're a company, an entrepreneur, or someone building a side or hobby project, there comes a moment when you need a landing page to showcase your product or service to the world.

Building a landing page might seem straightforward. There are plenty of SaaS solutions available to simplify the process. Platforms like Wix or Squarespace enable you to build your site without any development knowledge. Additionally, AI solutions can generate websites based on prompts, complete with codebases.

While these approaches are helpful, they have their limitations. Site builders still require a learning curve, and AI-generated sites can be challenging to customize later. Explaining your vision to an AI model isn’t always easy.

For a more scalable solution, I recommend using an existing JavaScript framework, which I'll cover in detail below. Here's a comprehensive list of steps and tasks to help you get started.

They assume some familiarity with development concepts! But don't be afraid, you can make it!

1. Create the Content (free)

Start by drafting the content for your landing page. In the past, you’d need a professional copywriter, but nowadays, tools like ChatGPT can help create decent copy for a first version. Once your idea gains traction and you start earning revenue, consider investing in a professional copywriter to elevate your text and make it truly unique and engaging.

2. Design Your Color Palette (free)

A strong landing page relies on a consistent and appealing color palette, ideally based on your brand or corporate colors. To create a unique set of colors, visit https://palettemaker.com/ and design your palette.

3. Create a Logo (free / paid)

A logo is crucial for differentiating yourself from competitors. While paid solutions are excellent, you can use free tools for a basic logo until you’re ready to upgrade. https://canva.com is a fantastic option for creating professional-looking logos with minimal effort.

4. Create a GitHub Repository (free)

Next, set up a GitHub repository to host your project’s code. GitHub is excellent for keeping your code safe and versioned, so you can revert to earlier versions if needed.

- Create a GitHub account at https://github.com and set up your first repository.

- Install Git on your local computer to interact with GitHub (for committing and pushing changes).

If you encounter any difficulties, ChatGPT can guide you through the process.

5. Set Up Hosting with Vercel (free)

You’ll need a hosting platform for your landing page. I recommend https://vercel.com because it’s straightforward and integrates well with JavaScript frameworks like https://astro.build/.

- Create a Vercel account and a new project.

- Link your GitHub repository to your Vercel project.

- Deploy your project. Vercel will automatically host your site using an internal domain, but you can link your custom domain later.

6. Create a Business Email (free / paid)

Having a professional email address is essential for credibility. You can:

- Use a personal email (not recommended).

- Create a free email address for your product (acceptable but not ideal).

- Use a paid service for a professional email. Services like https://zoho.com/mail or Google Workspace are excellent choices.

7. Buy and Configure a Domain (paid)

A custom domain makes your landing page professional. For example, `mygreatlandingpage.ai`. Although you can use the free Vercel domain, it’s better to invest in a custom domain.

- Choose a domain: Less common domains (e.g., `.xyz`) are cheaper than `.com`, but they may appear less professional.

- Configure DNS: After purchasing your domain, set up DNS to point to Vercel (if you did not buy it with Vercel). This tells browsers where to redirect users when they type your domain.

If you have a business email, you’ll also need to configure email redirection. Your domain provider will guide you through the process.

8. Choose a Template (free / paid)

For a scalable and customizable solution, use a JavaScript framework like https://astro.build/.. Astro is ideal for static sites like landing pages and offers free templates, such as https://astro.build/themes/details/mobit-astro/.

To get started:

- Clone the template repository to your local machine.

- Follow the instructions in the template’s README file.

If you’re unfamiliar with these steps, **ChatGPT** can provide real-time guidance.

9. Edit the Template Locally (free)

Once you have the template, open the project in an IDE like https://code.visualstudio.com/

- Locate the `/pages` folder and edit the `index.astro` file.

- Replace placeholder text with your content and adjust components to match your needs.

If you break something, don’t worry! You can delete the folder and re-clone the repository.

10. Deploy Your Site (free)

When you’re happy with the local version of your site, push the code to your GitHub repository. Vercel will automatically deploy the changes, and your landing page will be live within minutes.

Summary

These steps will help you create a professional landing page. While this approach requires some familiarity with technical concepts, it’s scalable and adaptable for future growth. I hope this guide helps you get started—happy building!