A Beginner's Guide to Building Websites: From Buying a Domain to Deploying on Heroku with GitHub

Building a website can seem like a daunting task, especially if you're new to the process. However, with the right tools and guidance, you can create and deploy a website with ease. In this guide, we'll walk you through the steps to get started, from buying a domain to deploying your website on Heroku, connecting Heroku with GitHub, and updating your site with code changes on GitHub.


Step 1: Buying a Domain

The first step in building a website is purchasing a domain name. Your domain name is the address users will type into their browsers to visit your site, so it’s essential to choose one that’s memorable and relevant to your content.


How to Buy a Domain:

  1. Choose a Domain Registrar: Start by selecting a domain registrar, such as GoDaddy, Namecheap, or Google Domains. These companies allow you to search for and purchase available domain names.
  2. Search for a Domain Name: Use the registrar's search tool to find a domain name that suits your website. If your desired name is taken, try different variations or consider using a different domain extension like .net, .org, or country-specific extensions like .co.uk.
  3. Purchase the Domain: Once you’ve found an available domain, proceed to purchase it. Domain prices vary depending on the name and extension, but they typically range from $10 to $50 per year.
  4. Set Up DNS Records: After purchasing the domain, you’ll need to configure the DNS (Domain Name System) settings to point your domain to your website. This involves setting up records like A (address) records and CNAME (canonical name) records, which tell the internet where to find your website.

Step 2: Setting Up a Website on Heroku

Heroku is a cloud platform that allows developers to deploy, manage, and scale applications. It’s a popular choice for hosting web applications, especially for those who want a simple, scalable solution.


How to Deploy a Website on Heroku:

  1. Create a Heroku Account: Start by signing up for a free account on the Heroku website. You’ll need to provide some basic information and verify your email address.
  2. Install the Heroku CLI: The Heroku Command Line Interface (CLI) is a tool that allows you to manage your Heroku apps directly from your terminal. Download and install the Heroku CLI from the official Heroku website.
  3. Create a New Heroku App: Once you’ve installed the CLI, open your terminal and log in to Heroku by typing heroku login. After logging in, create a new Heroku app by navigating to your project directory and running the command:

Copy code
heroku create
  1. This command will create a new app on Heroku and generate a unique URL where your website will be hosted (e.g., your-app-name.herokuapp.com).
  2. Deploy Your Website: To deploy your website on Heroku, you’ll need to push your code to Heroku’s remote repository. This is done by running the following commands in your terminal:

sql
Copy code
git add .
git commit -m "Initial commit"
git push heroku main
  1. Heroku will automatically build and deploy your website based on the code in your repository.

Step 3: Connecting Heroku with GitHub

GitHub is a platform for version control and collaboration that allows you to store and manage your code. By connecting Heroku with GitHub, you can automate the deployment process, so your website updates automatically whenever you push changes to your GitHub repository.


How to Connect Heroku with GitHub:

  1. Link Your GitHub Repository: In the Heroku dashboard, navigate to your app and go to the "Deploy" tab. Under "Deployment method," select "GitHub" and authenticate your GitHub account if prompted. Once authenticated, search for and select the repository you want to link to your Heroku app.
  2. Enable Automatic Deploys: After linking your GitHub repository, you can enable automatic deploys by clicking the "Enable Automatic Deploys" button. This feature ensures that every time you push changes to the specified branch on GitHub (usually main), Heroku will automatically deploy the updated code to your website.
  3. Manual Deploys: If you prefer more control over when your site is updated, you can choose to deploy manually by clicking the "Deploy Branch" button in the Heroku dashboard. This will deploy the current state of your GitHub branch to Heroku.

Step 4: Adding Code to GitHub and Updating Your Website

Now that your Heroku app is connected to GitHub, you can update your website by pushing new code to your GitHub repository.


How to Update Your Website with Code Changes:

  1. Clone Your GitHub Repository: If you haven’t already, clone your GitHub repository to your local machine using the following command:

bash
Copy code
git clone https://github.com/yourusername/yourrepository.git
  1. Replace yourusername and yourrepository with your actual GitHub username and repository name.
  2. Make Code Changes: Open the cloned repository in your preferred code editor (e.g., Visual Studio Code, Sublime Text). Make any necessary changes to your website’s code, such as updating HTML, CSS, or JavaScript files.
  3. Commit and Push Changes: After making changes, save your files and use the following commands in your terminal to commit the changes and push them to GitHub:

Copy code
git add .
git commit -m "Update website content"
git push origin main
  1. Since you’ve already connected your GitHub repository to Heroku and enabled automatic deploys, Heroku will detect the changes and automatically redeploy your website with the latest code.
  2. Verify the Deployment: Once the deployment is complete, you can visit your website’s Heroku URL (e.g., your-app-name.herokuapp.com) to see the updated content. If everything was configured correctly, your changes should be live.

Additional Tips for Managing Your Website

  1. Custom Domain Setup: If you’ve purchased a custom domain, you can configure Heroku to use it instead of the default Heroku URL. In the Heroku dashboard, go to the "Settings" tab of your app and add your custom domain under the "Domains" section. You’ll need to update your DNS settings with your domain registrar to point to Heroku’s servers.
  2. Environment Variables: Heroku allows you to manage environment variables for your app, which can be useful for storing sensitive information like API keys or database credentials. You can set these variables in the "Settings" tab under "Config Vars."
  3. Heroku Add-ons: Heroku offers a marketplace of add-ons that provide additional functionality, such as databases, logging, and monitoring tools. You can explore and add these services directly from the Heroku dashboard to enhance your app.
  4. Version Control: Using GitHub for version control is essential for managing changes to your website’s code. It allows you to track changes, collaborate with others, and roll back to previous versions if necessary.

Conclusion

Building a website doesn’t have to be complicated. By following the steps outlined in this guide, you can quickly get started with creating your own website, from buying a domain to deploying it on Heroku and managing it with GitHub. This process not only simplifies website development but also empowers you to make updates easily and efficiently.

Whether you’re a beginner or an experienced developer, mastering these tools and techniques will set you on the path to building professional and scalable websites. So, take the first step, and start creating your online presence today!

Back to Blogs