Unlock the Power of Hosting: A Step-by-Step Guide to Hosting Your Webpage
Getting Started
Automate the tedious task of deploying static sites to production with a robust hosting platform that offers continuous integration and continuous deployment (CI/CD), instant forms, analytics, and serverless functions. In this article, we’ll show you how to host a webpage in simple terms.
Prerequisites
Before we dive in, make sure you have a GitHub account and a hosting account. If you don’t have one, create a hosting account and a GitHub account.
Building a Simple Static Webpage
Our webpage consists of a single HTML file with minimal CSS. Create a new HTML file with the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
</body>
</html>Putting Your Code in a GitHub Repository
Create a new GitHub repository by clicking the plus (+) icon in the upper right-hand corner of the GitHub homepage and selecting New Repository. Name your repository, select Public, and initialize it with a README file. Then, drag and drop your index.html file into the repository.
Connecting Your GitHub Account to Your Hosting Platform
Create a new hosting account and log in. Click the New site from Git button and select GitHub as your preferred Git provider. Connect your GitHub account to your hosting platform, and select the repository for your webpage.
Deploying Your Webpage
Configure the build settings to deploy your app. Since we’re only deploying a simple webpage, we don’t need to do much here. Set the Branch to deploy option to master and click Deploy site.
A Quicker Alternative: Drag-and-Drop Deployment
A faster way to host your site is by simply dragging and dropping the site’s folders. Visit the hosting platform’s drag-and-drop website, drop your folder, and you’ll be redirected to a dashboard similar to the one shown earlier.
Customizing Your Domain Name
To customize your domain name, navigate to your project’s dashboard page on your hosting platform and click Domain Settings. Toggle the options drop-down and click on Edit site name. You can also purchase a custom domain from sites like Namecheap and add it to your hosting platform.
Securing Your Site with HTTPS
Verify your DNS configuration and enable HTTPS in the domain settings page. This will secure your site with an SSL certificate.
Congratulations! You’ve Successfully Hosted Your Webpage
You now have a fully functional webpage hosted on your hosting platform with a custom domain and HTTPS enabled. Explore the many features of your hosting platform and take your web development skills to the next level.