Happy New Year 2024! Big things in store for 2024 but first, lets launch our very first personal website using AWS. This will be my very first iteration of the website that I will update weekly, hopefully! If you have any comments/recommendations, please contact me below via the message box in my website!
The website will go through numerous iterations by the time 2024 ends so come along and we will learn/go through all its versions!
First about the website. I followed a website locally on my laptop using VSCode and the languages of choice were HTML, CSS and React.
Prerequisites
- Must know how to use Git and Github
- VSCode installed
- Must have the code for our website
What is AWS Amplify?
AWS Amplify is a set of purpose-built tools and features that enables frontend web and mobile developers to quickly and easily build full-stack applications on AWS. Amplify provides two services: Amplify Hosting and Amplify Studio. For this instance we will be using Amplify Hosting . It provides a git-based workflow for hosting full-stack serverless web apps with continuous deployment.
Creating and connecting a repository
Since our application was written in React, we can follow the following steps as is:
1. Upload our development code to Github
If you already used an online code editor such as Gitpod, these steps will be somehow similar.
a. New repository
Create a new GitHub repository for your app (link)
b. Push code to the repository
From VSCode we will now initialize git and push the application to the new GitHub repo we created above. Execute the following commands in your command line interface:
git init
git remote add origin https://github.com/Msaghu/dhfhkdfkfj.git
git remote -v
git pull origin master
git add .
git commit -m “initial commit”
git push origin master
i. Line 1* >
if 'WebApp' is the folder you have your local web app. Change it to the directory cd WebApp
ii. Line 1 >
initialize git in the folder
iii. Line 2 >
add github url as a remote
get the git@github command from the HTTPS tab on Github.
iv. Line 3 >
Now pull the read me file from the github repo
v. Line 4 >
Verify that the Remote URL added or not utilizing the following command:
c. Connect your repository,
log in to the Amplify Console and choose Get Started at the top of the page then Get Started under Amplify Hosting.
d. Select preferred VCS
On the Get started with Amplify Hosting page, select GitHub and choose Continue.
On the Add repository branch step, select yourbranchname from the Select a repository dropdown.
We will then need to authorize AWS Amplify to your GitHub account.
In the Branch dropdown select the branch master and choose Next.
e.
On the Build settings page, leave all the defaults, select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and choose Next.
On the Review page select Save and deploy.
f. Deploy
The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.
Once completed, select the site image, or the link underneath the thumbnail to launch your website.
You have now successfully launched your website!
Top comments (0)