Publishing and hosting in No-Code - Mini Project: Build & Apply

Publishing and Hosting a Simple Website

📖 Scenario: You want to share your personal website with friends and family. To do this, you need to publish your website files and make them available on the internet through hosting.

🎯 Goal: Build a simple plan to publish and host a website by setting up the website files, choosing a hosting service, uploading the files, and making the website live.

📋 What You'll Learn

Create a folder named my_website containing an index.html file

Define a variable hosting_service with the name of the hosting platform

List the steps to upload files to the hosting service

Add the final step to make the website live and accessible online

💡 Why This Matters

🌍 Real World

Publishing and hosting websites is essential for sharing information, portfolios, or businesses on the internet.

💼 Career

Understanding website publishing and hosting is important for roles in web development, digital marketing, and IT support.

1

DATA SETUP: Create the website folder and main file

Create a folder named my_website and inside it create a file named index.html with the content <h1>Welcome to My Website</h1>.

No-Code

# Create folder 'my_website' and file 'index.html' with the heading
# Your code here

Hint

Think of the website folder as a container holding your main page file named index.html.

2

CONFIGURATION: Choose a hosting service

Create a variable called hosting_service and set it to the string "Netlify" as the platform where you will host your website.

No-Code

my_website/
  index.html (contains: Welcome to My Website)

# Set the hosting service name
# Your code here

Hint

Assign the hosting platform name exactly as "Netlify" to the variable hosting_service.

3

CORE LOGIC: List the upload steps

Create a list called upload_steps with these exact strings in order: "Login to Netlify", "Create a new site", "Upload my_website folder", "Configure domain".

No-Code

my_website/
  index.html (contains: Welcome to My Website)
hosting_service = "Netlify"

# List the upload steps in order
# Your code here

Hint

Make sure the list upload_steps contains all four steps as strings in the correct order.

4

COMPLETION: Add the final step to make the website live

Add a variable called final_step and set it to the string "Publish the site and share the URL" to complete the publishing process.

No-Code

my_website/
  index.html (contains: Welcome to My Website)
hosting_service = "Netlify"
upload_steps = [
    "Login to Netlify",
    "Create a new site",
    "Upload my_website folder",
    "Configure domain"
]

# Add the final publishing step
# Your code here

Hint

Set the variable final_step exactly to the string "Publish the site and share the URL".

Practice

1. What is the main purpose of publishing and hosting a website?

easy

A. To write the website's code

B. To make the website accessible to people on the internet

C. To design the website layout

D. To create images for the website

Solution

1. Step 1: Understand publishing and hosting

   Publishing and hosting means putting your website online so others can visit it.

2. Step 2: Identify the main goal

   The main goal is to make the website accessible to anyone using the internet.

3. Final Answer:

   To make the website accessible to people on the internet -> Option B

4. Quick Check:

   Publishing and hosting = making website accessible [OK]

Hint: Publishing means putting your site online for others [OK]

Common Mistakes:

• Confusing publishing with designing or coding
• Thinking hosting is only about creating content
• Assuming publishing is offline work

2. Which of the following is a correct step to publish a website using a hosting service?

easy

A. Upload your website files to the hosting server

B. Change your computer's IP address

C. Delete all files from your computer

D. Write the website code in a text editor only

Solution

1. Step 1: Identify the publishing process

   Publishing requires uploading your website files to a hosting server so they can be accessed online.

2. Step 2: Evaluate the options

   Uploading files is the correct step; writing code is done before publishing, deleting files or changing IP is unrelated.

3. Final Answer:

   Upload your website files to the hosting server -> Option A

4. Quick Check:

   Uploading files = publishing step [OK]

Hint: Publishing means uploading files to a server [OK]

Common Mistakes:

• Thinking writing code is the publishing step
• Deleting files is not needed
• Changing IP address does not publish site

3. You uploaded your website files to GitHub Pages. What will happen next?

medium

A. Your website will only be visible on your computer

B. Your files will be deleted automatically

C. Your website will be live and accessible via a GitHub URL

D. You must pay extra to make the site live

Solution

1. Step 1: Understand GitHub Pages hosting

   GitHub Pages hosts your website files and provides a URL to access the site online.

2. Step 2: Identify the outcome of uploading files

   Once files are uploaded, the website becomes live and accessible via a GitHub URL without extra cost.

3. Final Answer:

   Your website will be live and accessible via a GitHub URL -> Option C

4. Quick Check:

   GitHub Pages hosting = live site URL [OK]

Hint: GitHub Pages makes your site live with a free URL [OK]

Common Mistakes:

• Thinking files get deleted after upload
• Assuming site is only local
• Believing extra payment is required

4. You uploaded your website files but the site is not showing online. What is a common mistake you should check?

medium

A. You forgot to connect your domain or use the hosting URL

B. You wrote the website code in uppercase letters

C. You used too many images on the site

D. You saved files in a folder named 'Documents' on your computer

Solution

1. Step 1: Identify why site is not visible online

   Often, the site is not live because the domain is not connected or the hosting URL is not used correctly.

2. Step 2: Evaluate other options

   Writing code in uppercase, image count, or local folder names do not prevent the site from showing online.

3. Final Answer:

   You forgot to connect your domain or use the hosting URL -> Option A

4. Quick Check:

   Missing domain connection = site not visible [OK]

Hint: Check domain connection if site is not live [OK]

Common Mistakes:

• Ignoring domain or URL setup
• Blaming code case sensitivity
• Thinking local folder names affect hosting

5. You want to publish a website with your own domain name and ensure it loads quickly worldwide. What should you do?

hard

A. Upload files only to a free hosting service without domain setup

B. Use only social media to share your website files

C. Keep the website files on your personal computer and share the IP address

D. Use a paid hosting service with domain connection and a Content Delivery Network (CDN)

Solution

1. Step 1: Understand domain and speed needs

   To use your own domain and have fast loading worldwide, you need a hosting service that supports domain connection and uses a CDN.

2. Step 2: Evaluate options for publishing

   Paid hosting with domain and CDN meets these needs; free hosting without domain or personal computer hosting won't provide this.

3. Final Answer:

   Use a paid hosting service with domain connection and a Content Delivery Network (CDN) -> Option D

4. Quick Check:

   Paid hosting + domain + CDN = fast, custom domain site [OK]

Hint: Paid hosting + domain + CDN = fast, professional site [OK]

Common Mistakes:

• Relying on free hosting without domain
• Hosting from personal computer
• Sharing files only on social media