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

Feven Seyfu — Thu, 01 Feb 2024 15:01:42 +0000

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,

Github Pages
Netlify

Let's get started,

1.Deploy with Github pages

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

step 2: From the left side bar scroll to pages

step 3: deploy from a branch - select the branch you want to deploy

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

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

Step 2: Navigate to add new site

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

if you want to deploy from a different branch from the default

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
remove the existing and change to a name you prefer

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!

A Beginner's Guide to Git, GitHub

Feven Seyfu — Wed, 24 Jan 2024 16:07:18 +0000

Git and GitHub have saved my forgetful self on multiple occasions. Yet, if you had asked me about them when I first started coding, my answer might have been different. For beginners on the coding journey, Git and GitHub can be intimidating. However, grasping version control and collaboration tools makes code management and sharing easier. Reflecting on my programming learning curve, one of my regrets is not diving into Git and GitHub earlier. This delay has led to the loss of some projects. Hence, I am writing this article to guide you on the basics and how to set up and use Git and GitHub effectively.

What is Git and Github?

Although Git and GitHub may sound similar, they serve different purposes.Git is a version control system that tracks changes in your code by maintaining a history of modification. So basically, if you have a working program and want to add a new feature, Git allows you to save your code history. This way, if you encounter issues with your changes, you can easily revert to a point where your code was functioning correctly..

GitHub, on the other hand, is a platform that utilizes Git for collaborative coding, allowing multiple developers to work on projects concurrently.It is a web-based platform which allows you to host, share, and contribute to code repositories(project folders).

Setting Up Git

Before diving into Git commands, you need to set it up on your machine:

Installation: Download and install Git from git-scm.com.
Configuration: Set your name and email using the following commands: git config --global user.name "Your Name" git config --global user.email "your.email@example.com"

Git Basics

Repository (Repo): A Git repository is a storage space that contains your project's files and the history of changes. To create a new repository, use:

git init

2.** Cloning a Repository** : To copy an existing repository to your local machine, use:

git clone repository_url

Committing Changes: After making changes, commit them(Committing in Git is like taking a snapshot of your project at a specific point in time) use the command:


   git add .
   git commit -m "Your commit message"

Tip: when committing, use commit messages that are descriptive and meaningful. Read this article for more.

Branching: Create a new branch to work on a feature or bug fix:

   git branch -b  new_branch
   git checkout new_branch

Tip: replace new_branch with you preferred branch name

Merging: once done with your feature and happy with result merge/combine changes from one branch to another usually it will be main or any development branch:

 git checkout destination_branch
   git merge source_branch

GitHub Basics

So far we have worked on our project locally and tracked the changes with git but now we want to host our project online so that it can be accessible to everyone else in order to be able to collaborate, below are the steps we can take.I assume You already have a Github account if now visit github to register.

1.** Repository Creation:** First thing is first visit GitHub, click "New" to create a new repository, and follow the instructions to insert name,description to your project and you can also setup a readme.

Cloning from GitHub: If you want to work on an existing project you can copy the repository URL and use:

git clone repository_url.git

Tip: the URL has the format https://github.com/username/repository_name.git navigate to repository->code(drop down) and copy link

Pushing Changes to GitHub: once you have made your changes and committed in git you can push to github. When you push in Git, you are essentially uploading your local commits to the remote repository. This ensures that others can see the latest version of your project.

   git push origin branch_name

Tip: please use descriptive branch names and explore more here.

4.** Pull Requests:**Once you push your changes before merging to the main branch you need to create a pull request explaining the changes which serves as a formal request for the repository maintainers to review the proposed changes before they are merged.

Git and Github are essential tools for developers. With the basics covered, you can confidently manage your projects, collaborate with others, and contribute to open-source initiatives and Inspired explore more commands and collaborate with the vast developer community to enhance your skills.Happy coding!

DEV Community: Feven Seyfu