Publish Your Personal Homepage

Introduction

Your portfolio website is running, but it still shows the example profile. Edit a short profile file and publish it to the website server, then compare your local edit with the actual browser page.

Complete Launch Your First Portfolio Website first. This lab supplies its own fresh EC2 server, connection configuration and website code. You do not need the instance or files from the previous lab.

Certification Relevance

Lab Overview

Prepare Your Personal Profile

In this step, you will edit a local profile file while your website continues to show its original content.

This lab provides a fresh, running website server. Once Terminal and AWS View are ready, open the portfolio link in this lab’s AWS View and confirm Alex Morgan appears. You do not need to restart or recover the server from the previous lab.

A local file is in your LabEx working environment. A remote file is on the website's EC2 server. Changing a local file does not automatically change the remote website.

Return to Terminal and enter the project folder:

cd /home/labex/project

Inspect the supplied profile with cat:

cat profile.json

The profile is JSON, a small configuration format using named fields. name appears in the navigation, about section and footer. headline is the large main title, and about is its short supporting line. The original headline uses \n inside a JSON string for a line break; your practice title is one short line. Text is enclosed in double quotes; commas separate fields. The website code is provided, so you only need to supply these three values.

Write a new practice profile. cat > profile.json writes text into that file instead of displaying it. The <<'JSON' notation takes the following lines as the file content until the closing JSON line. Copy the whole block, including both marker lines:

cat > profile.json <<'JSON'
{
  "name": "Sam Rivera",
  "headline": "Design with purpose.",
  "about": "Brand identities and digital experiences."
}
JSON

Read the file back:

cat profile.json

Confirm the three values above. Use these practice values for the lab checks; you can explore other profile text after completing the exercise.

Refresh the website tab. It should still show Alex Morgan. This is expected: your local file has changed, but it has not yet been published to the EC2 server.

Publish and View Your Homepage

In this step, you will publish the profile you just prepared and confirm its effect on the actual website.

SSH provides an encrypted connection to a server; SCP copies files over that connection. The supplied ssh_config already selects this lab’s login key and connection route, so you can focus on the file you want to publish.

website.env contains the address and identifiers of this lab’s server. source loads those variable assignments into your current Terminal session. Display the address before using it:

source website.env
echo "$PUBLIC_IP"

Compare the displayed address with AWS View. $PUBLIC_IP uses the saved value, and the double quotes keep it together as one argument.

Now copy your local profile.json to the website. -F ssh_config selects the connection settings, ubuntu is the user on the EC2 server, and the colon separates the server address from the destination path:

scp -F ssh_config profile.json ubuntu@"$PUBLIC_IP":/home/ubuntu/portfolio/profile.json

The first connection may display a notice that it added the supplied server’s host key. A transfer reaching 100% means the copy finished. Next, check the page to see what that file changed.

Refresh the portfolio tab opened from this lab’s AWS View. It should now display Sam Rivera, Design with purpose. and Brand identities and digital experiences. The application reads the profile on each request, so no restart is needed.

Finally, check the file on the server. With SSH, a command after the server address runs remotely and then returns you to your LabEx prompt:

ssh -F ssh_config ubuntu@"$PUBLIC_IP" cat /home/ubuntu/portfolio/profile.json

The remote JSON should match your local file. You have confirmed both the copied content and the page it drives. If the page still shows Alex Morgan, check the transfer completed, the address matches AWS View and the destination path is correct, then refresh the current lab’s page.

Your publication is complete. Keep the website open to admire the result; the next lab provides its own server and explores which network rule allows visitors to reach it.

Summary

You edited a local JSON profile, published it to an EC2 server with SCP and checked the remote file through SSH. Seeing the new name and headline on the actual page confirmed that the file reached the application, rather than only changing your local copy.

Official references: Connect to a Linux instance with SSH and transfer files to an instance.