DEV Community

Cover image for How to host your website on Azure?
Rakesh Potnuru
Rakesh Potnuru

Posted on β€’ Edited on β€’ Originally published at itsrakesh.com

5 1

How to host your website on Azure?

Hosting your website on Azure is very simple. Just a few clicks πŸ‘€.

Final result

Final result

Prerequisites

  1. Signup for an Azure account for free if you don't have already. (Note: If you are a student you can get free credits)
  2. Basic git knowledge and a GitHub account.
  3. Your website.

Let's get started

  1. After creating Azure account, login into portal.azure.com.
  2. Click on Create a resource.
  3. Search for Static Web App and select static web app.
  4. Click on Create. Azure Static Web App

Here we need to fill in a few details.

  1. In the project details, choose your subscription.
  2. For Resource Group click on create new and name it anything you like.
  3. Next, give your app a Name.
  4. Hosting plan: Free: For hobby or personal projects
  5. Next, select a region.
  6. After that, in deployment details select GitHub as source and sign in with your GitHub account.
    • For Organization, choose your GitHub account from the dropdown.
    • Next, select Repository and Branch.
  7. Now Build details
    • For Build Presets, if your website is built with a framework or a static site generator then choose accordingly otherwise choose Custom.
    • For App location, choose where your app files are there or if it is a simple website with only HTML and CSS files leave it as /.
  8. Click on Review + Create.
    Demo

  9. Verify all the provided details and click Create.

  10. Wait for a few seconds, after deployment is complete click on Go to resource.

  11. Copy the URL, paste in a new tab and see.
    Demo

Congrats πŸŽ‰πŸŽ‰πŸŽ‰! Your website is now live on internet.
Congrats gif
If you have any doubts ask in the comments below πŸ‘‡.


Also read,


Hope this helps you!
Save for reference.
Connect with me on Twitter and GitHub. Follow me for more πŸ˜ƒ.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series πŸ“Ί

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay