Weebly Site Creation

We are going to learn the steps involved in creating a simple (and free) website using Weebly. 

Step 1: Go to https://www.weebly.com/

In most cases, it will show the site specific to your region. If you are accessing the site from Singapore, it would show as 
​https://www.weebly.com/sg

Click on the "Sign Up" button at the top-right corner.

Step 2: Fill in the details

Fill in the details in the various boxes. 

Step 3: Select the website option

On the next page, you will be given two options. Select the option on the left that allows you to create a website. 

Step 4: Select a Theme

You will need to select a Theme for you website. 

*** This is NOT fixed. You are allowed to change the theme and layout at anytime. You can select any theme from any category to start your design. After testing your website with different themes,
you can make a final decision later on. After publishing, you can still change the theme and re-publish your site with the new theme and layout. ***

In this example, I am selecting the first theme from the Portfolio category.

Step 5: Start Editing

After selecting the theme, it will show you a preview.
​
​Click on the "Start Editing" button at the top-right corner of the page.

Step 6: Search for your domain name

Enter your preferred domain name for your site.
​Click on the "Search" button.

Step 7: Select your domain name

You see TWO categories of results.

Those in the "Professional Domain" category refer to names that require payment as they need to be officially registered with a domain name provider.

The option presented in the "Subdomain" category is free. 
I would strongly suggest to take this option first and evaluate the use of Weebly to build your site. You can keep your free site indefinitely.

After evaluating other web development platforms, you can make a decision and take the paid plan if you wish.

In some cases, the suggested subdomain maybe different from your original website name. That can happen if the subdomain has already been taken. You can repeat the action of Step 6 and try again with a new name.

Once you are satisfied with the subdomain name:
Click on "Choose" beside it.

Step 8: Subdomain setup complete

In this page you should see a message that the subdomain has been setup correctly.
​
​Click on the "Done" button at the top-right.

Step 9: Build Your Site

You will now come to the website builder page. 
As you scroll through the current default website, you can click on any of the text or images and observe that you can easily edit its content, very much like a word document. 

At the top, click on the button "Build".
At the left of the screen, you will see all the blocks available to build your site. You can add Titles, text, images, etc. anywhere on the screen and start to build your site. You need to explore the various blocks and observe how they are being used. All of them are "drag-and-drop" with no coding involved.

​Search for the "Embed Code" block on the left. Click on it and drag it to anywhere on the webpage that you are building.

Step 10: Embed your Code - Part 1

After placing the block on your webpage, you should see an area which has the following message
"Click to set custom HTML"

 Step 11: Embed your Code - Part 2

When you click on the text "Click to set Custom HTML", you will see this pop-up box.

​Click on "Edit Custom HTML"

 Step 12: Embed your Code - Part 3

A box will now appear to enter the HTML code.

 Step 13: Share your Scratch - Part 1

You  now need to login to your Scratch Account.
Go to "My Stuff" from your username at the top-right corner.
Select the Project that you wish to Share.

By default, you will see a message on the top of the page that says that the Project is not shared.

Click on the "Share" button to the right of the page.

 Step 14: Share your Scratch - Part 2

Once you have shared it, you will see a message that says:
"Congratulation on sharing your project!"

Click on the button "Copy Link" from the bottom-right of the page.

 Step 15: Share your Scratch - Part 3

You will see the following pop-up.

You can click on "Copy link" and share it with anyone if you want them to play this particular game. 

In our case, we will click on "Copy embed". This will allow us to place this game on our website.

 Step 16: Embed your Code - Part 4

From Step 12, the box to enter the HTML code is now ready in Weebly. 

You can paste the content copied from the Scratch page in the box.

 Step 17: See your Scratch

You should now be able to see that the Scratch Game is now visibile in your Weebly webpage builder.

 Step 18: Publish your Site

You can click on the "Publish" button at the top-right to publish your site.

 Step 19: Published Successfully!

You should see a message that tell you that the website has been published.

You can now click on the link and see your website and game in action!

CONGRATULATIONS ON YOUR NEW WEBSITE!

A Few Important Points

You can edit and publish as many times as you want. 
Do experiment with the various website building tools that Weebly offers to customize your site.

You are currently using the free Weebly account and this is very good for most websites.
You do not need to upgrade to a Pro account or by a custom domain at this time.
You can do something similar with Wix or any other web development platform as well.
Enjoy!