How to setup FREE Secure Landing page without coding skills

Hello there,

I just launched my side project landing page today and want to share how I did it using FREE services.

https://mogoni.dev

Here are the steps

1. Created a landing page using Launchaco
2. Copied and published source code on GitHub Pages
3. Added custom domain name. I use Google Domains

Let’s get started

I will describe briefly the overall process to get you familiar with the whole loop. And I will share more detailed articles for each step later.

1. Create a landing page using Launchaco

After doing some research I find that Launchaco provides the best tool to quickly set up a landing page. The UX is amazing.

Go to www.launchaco.com and press “Create your website for Free”.

Name your project, then choose the layout that fits your product.

Choose a layout for your project

The online editor is great. There is no big variety of blocks, but in my opinion, it’s even better. Fewer chances to mix the design styles.

All the components you need

Each block has a couple of fields to fill in.

Editing blocks

After you’re done with editing publish it.

Publishing on Launcaco

You will get a link similar to https://<your-project-name>.launchaco.com.

Link to Launchaco page

Copy and keep it somewhere. We will use it later.

2. Publish code on GitHub Pages

Great job so far. To have our custom domain instead of your-project-name.launchaco.com we need to host the code. Github provides free hosting and it’s very easy to setup.

Go to github.com and register your account(if you don’t have one).

I have an active GitHub account already, so you may have different onboarding experience as a first time user, however, there you should be able to find “New” button on the left top corner. Or just type https://github.com/new

Type your project name and press Create repository

Create new repository

Click on the “creating a new file” text.

Create a new file

Type docs/index.html in the name field. It will automatically create docs folder.

In a new tab open the link you saved from Launchaco in Chrome Browser. (your-project-name.launchaco.com)

Press Right-click on the page to view the source code.

Select all and copy

(Press Ctrl+A then Ctrl+C on Windows, Command+A then Command+C for macOS).

Copy source code

Paste into Github editing. Save with Commit new file.

Go to Repository Settings and scroll to GitHub Pages section

Open repository settings

Select /docs folder as the source.

Select the default folder for your page

It will automatically save and now if you scroll down, you will see the published page link. Open it and you will see your Landing page hosted on Github.

GitHub page link

3. Adding your custom domain name. I use Google Domains 🔗

We are almost done. Are you excited?

The last step is to connect your custom shiny domain to GitHub.

I used to use Godaddy previously for my domains. However, after recent price bump on domains, I transferred all my domains to Google Domains.

Hack: Google Domains doesn’t have promo offers, but you can register a domain on Godaddy, and then transfer it to Google Domain

Congrats 🎉

If got this far your website should be ready to share with the public.

So what’s next? Share it. Do it now. No delays.

Why? Some people (me including) think that after publishing the site it will go viral.

But realistically just a few people will see it unless you already prepared a marketing campaign. And it will take a lot of effort and time to get it to a big audience. So don’t be scared to share it immediately. I am sure you will get some issues from first users and but that’s great that people want you to improve it.

…TO BE CONTINUED…

Part 2 (optional steps)

1. Set up Hotjar for Heatmaps and Visitor Recording
2. Add privacy policy with Iubenda
3. Setup mailing list using MailChimp
4. Setup domain on Cloudflare