Logo

dev-resources.site

for different kinds of informations.

From Localhost to Live: Easy Deployment With Github Pages or Netlify

Published at
2/1/2024
Categories
deployment
webdev
netlify
githubpages
Author
fevenseyfu
Author
10 person written this
fevenseyfu
open
From Localhost to Live: Easy Deployment With Github Pages or Netlify

Hi Dev's,

If you've been following my first post, we've set up Git and GitHub, pushing our project successfully. Congratulations! If you missed our initial guide on these tools, you can catch up here.

But now you want to show off your new acquired skills and share with family and friends.However you are not sure how to do that since not everyone can setup your project locally.

I've got you covered; let's deploy your project and get you a live link so you can show off your new skills to family and friends.

we will use 2 options to deploy your site for free,

  1. Github Pages
  2. Netlify

Let's get started,

1.Deploy with Github pages

step 1: head to your project repository and navigate to the
Settings

step 2: From the left side bar scroll to pages
Screenshot of sidebar
step 3: deploy from a branch - select the branch you want to deploy
Select to deploy from a branch

step 4: enforce https to make your site is secure
Congratulations! your site is up and running!

Link to deployed site

2.Deploy with Netlify

Step 1: If you don't have an account you need to visit Netlify and sign up

I recommend signing up with your github account to easily deploy from your repository

screenshot of Signup link

Step 2: Navigate to add new site

Screenshot to Deploy from repository

step 3: authorize Netlify to have access to Github
step 4: select the repository you want to deploy if you can't see scroll down to add repo

Screenshot of Link to add repo to deploy

Screenshot to show how to Select the repo to deploy

if you want to deploy from a different branch from the default
screenshot of link to change branch

step 5: For static site you don't need to configure so scroll down and click on deploy site name

step 6: it will deploy and generate a funny looking link for you that nobody can remember so let's change that:

  • click onsite configuration and change site name how to change site name
  • remove the existing and change to a name you prefer

link to change site name

Note: the netlify.app remains unless you have a custom domain name this will do.

Step 7: now you can go to the site and check if it works fine

Conclusion

Congratulations! You've successfully deployed your site using either GitHub Pages or Netlify. Remember, if you encounter issues with images or icons , ensure that the file paths are adjusted appropriately, such as using '../' to navigate to the correct directories. Now that your site is live, share it with the world and continue your coding journey!

Happy coding!

githubpages Article's
30 articles in total
Favicon
London Perl Mongers on GitHub Pages
Favicon
Create Your Professional Resume Website with GitHub and Quarto
Favicon
Did You Know You Can Use GitHub to Host Your Site for Free?
Favicon
A refresher on GitHub Pages
Favicon
How to Deploy a React App to GitHub Pages
Favicon
How to Deploy an Express.js App on GitHub Pages Using GitHub Actions
Favicon
Create your portfolio with GitHub Pages
Favicon
Deploying React Apps to Github Pages with Github Actions
Favicon
Publicando suas paginas Flutter no Github Pages utilizando GitHub Action
Favicon
From Localhost to Live: Easy Deployment With Github Pages or Netlify
Favicon
Jekyll Docker
Favicon
Guia de Análise de Tráfego para GitHub Pages: Integração com Ferramentas de Analytics
Favicon
Um Guia Simples para Levar Seu Projeto Angular para o GitHub Pages
Favicon
How to: Deploy Angular Website to Github Pages
Favicon
Using GitHub Pages and Miss Hosting for DNS and Hosting
Favicon
Deploying Your Vite Apps to Github Pages is a Breeze with Vite Github Pages Deployer
Favicon
piratematt.com v3—Overview & Getting Started
Favicon
Host React app in GitHub pages
Favicon
404 There isn't a GitHub Pages site here.
Favicon
Deploy your React app using GitHub pages
Favicon
Why your GitHub action is not triggered by other actions
Favicon
Deploying GitHub Pages sites with GitHub Workflows
Favicon
This blog changes its theme every day
Favicon
Como criar um blog com Jekyll no GitHub Pages?
Favicon
Create a free static website using Github Pages and Jekyll
Favicon
Github Pages Tips if your img doesn't appear 🖼️
Favicon
Hosting static websites on GitHub pages
Favicon
Updating GitHub Pages using GitHub Actions
Favicon
What I learned from self-hosting a Supabase Svelte project: Part 2
Favicon
Using GitHub Pages and GitHub Actions to Deploy a React App ✨

Featured ones: