Do you want free hosting for your demo website? Do you want to deploy your webapp for free? Then look no further. You can do that and more with Heroku.  Read more to deploy your first static website on Heroku.

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Heroku has a genorous free plan allowing students/hobbyist to deploy their apps on the cloud for free.

In this post you are going to learn the following –

• Basics of git
• Adding files necessary to host static HTML on Heroku
• Pushing code to your git repo
• Creating a new app on Heroku and connecting it with your GitHub account

What you’ll need –

1. A GitHub account ( if you are a student, apply for a student pack here)
2. A Heroku account ( if you are a student , avail your benefits here)

1. Git

What is Git?

Git is a version control tool. Think of it like a backup of your code, but instead of backing up all your code, it just backs up the changes. Watch the following video to learn more about git and github.

For the purpose of this blog post, I am going to use a sample website from microsoft sample html project. Considering you are already registered on GitHub, go to the page and click on fork. This will copy all the code to your account so that you can make changes to it.

Once that is done, you need to download and install git on your machine. After installing git, head over to your cmd prompt and copy/paste the following

git clone https://github.com/< username >/project-html-website

Make sure you replace the < username > with your own github username, and that you have already forked the project.

Once you run the above command, the project will be copied to your local directory. Go ahead and check it out.

2. Adding files necessary to host static HTML on Heroku

• Add a file called composer.json in the directory. If you want to learn more about why we are adding a composer.json file to the directory – click here. 
• Inside the composer.json file add the following line –

• { }

• Add another file called index.php. If you want to know more about index files – click here.
• Inside index.php add the following line –

• <?php include_once("index.html"); ?>

• You can replace index.html with the name of the html file you want to server as your home page.

Your folder structure should now look like this

Let us now push these local changes to our github repo. To do that change directory into the folder using – cd directory and perform the following commands.

3. Pushing code to your git repo

If everything goes well you should have the same output as I have in the above screen shot. Let’s go over the commands one by one

• cd project-html-website

• is to change the directory of the terminal into the project folder
• Once we are in the project folder, we add/propose changed to git by

• git add *

• git commit -m "commit message"

• And finally the

• git push

• To push all the local changes to the github server.

4. Creating a new app on Heroku

• Go to your Heroku dashboard and create a new app.
• 
• Give the app a suitable name and click on Create app.
• Once that is done, you will be redirected to the deploy page for your new app.
• Click on GitHub and connect your app to your GitHub repo.
• 
• Once you are connected, scroll down and click on the deploy brach button.
• Once it is deployed, you can see the website with its own unique Heroku url.
• 
• View my app here

version control system tracks changes to a file or set of files over time. There are three types of version control system: Local Version Control Systems: Centralized Version Control Systems: Distributed Version Control Systems: Popular version control systems and tools Here’s a brief overview of some commonly used version control tools and their pros and […]

• git clone
• git add
• git commit
• git push
• git pull
• git branch
• git checkout
• git status

git clone remote

to create new repository in github cloud , then create a local repo and clone 2 repositories using git clone remote (repo link).

git add filename
git add .

to add a single file using git add and add all the files which present in the current repo the use git add . | . represent add all the files.

git commit -m "message"

commit the added file using git commit and put some mesagges about the file using -m ” ” .

some ideas of commit messages are available in below mentioned link.

Reference : conventional commit.org | https://www.conventionalcommits.org/en/v1.0.0/

git rm --cached filename
if incase want to remove the added file use git remove  
git rm --cached -f filename 
-f --> forcefully remove the file.

git push

push the commited file from the local to cloud repo using git push. it will push the file to remote repository.

git pull 

when u need to change or edit or modify the remote file first you will pull the file to local repository from remote using git pull.

git branch 
Branch means where will you store the files in git remote.git branch is to specify the branch name it will push the file to current remote branch.

git checkout -b "branchname"
to create a new branch.

git checkout branchname
check the created branch or new branch

git branch -M branchname
to modify or change the branch name

git branch -a
to listout all branches.

git status
check all the status of previously used command like know the added file is staged or unstaged

---

Reference : https://www.markdownguide.org/cheat-sheet/

markdown cheathseet for readme file

Reference : conventional commit.org | https://www.conventionalcommits.org/en/v1.0.0/

for commit messages.

• git clone
• git add
• git commit
• git push
• git pull
• git branch
• git checkout
• git status

git clone remote

to create new repository in github cloud , then create a local repo and clone 2 repositories using git clone remote (repo link).

git add filename
git add .

to add a single file using git add and add all the files which present in the current repo the use git add . | . represent add all the files.

git commit -m "message"

commit the added file using git commit and put some mesagges about the file using -m ” ” .

some ideas of commit messages are available in below mentioned link.

Reference : conventional commit.org | https://www.conventionalcommits.org/en/v1.0.0/

git rm --cached filename
if incase want to remove the added file use git remove  
git rm --cached -f filename 
-f --> forcefully remove the file.

git push

push the commited file from the local to cloud repo using git push. it will push the file to remote repository.

git pull 

when u need to change or edit or modify the remote file first you will pull the file to local repository from remote using git pull.

git branch 
Branch means where will you store the files in git remote.git branch is to specify the branch name it will push the file to current remote branch.

git checkout -b "branchname"
to create a new branch.

git checkout branchname
check the created branch or new branch

git branch -M branchname
to modify or change the branch name

git branch -a
to listout all branches.

git status
check all the status of previously used command like know the added file is staged or unstaged

---

Reference : https://www.markdownguide.org/cheat-sheet/

markdown cheathseet for readme file

Reference : conventional commit.org | https://www.conventionalcommits.org/en/v1.0.0/

for commit messages.

Github:

It allows collaboration with any developer all over the world. Open Source solutions enable potential developer to contribute and share the knowledge to benefit the Global Community. At a high level, GitHub is a website and cloud-based service that helps developers store and manage their code, as well as track and control changes to their code. To understand exactly what GitHub is, you need to know two connected principles:

• Version control
• Git

What Is Version Control?

Version control helps developers track and manage changes to a software project’s code. As a software project grows, version control becomes essential. Take WordPress…

At this point, WordPress is a pretty big project. If a core developer wanted to work on one specific part of the WordPress codebase, it wouldn’t be safe or efficient to have them directly edit the “official” source code.

Instead, version control lets developers safely work through branching and merging.

With branching, a developer duplicates part of the source code (called the repository). The developer can then safely make changes to that part of the code without affecting the rest of the project.

Then, once the developer gets his or her part of the code working properly, he or she can merge that code back into the main source code to make it official.

What Is Git?

Git is a specific open-source version control system created by Linus Torvalds in 2005.It is used for coordinating work among several people on a project and track progress over time. It is used for source code management for software development.

GitHub is a Git repository hosting service which provides a web-based graphical interface that helps every team member to work together on the project from anywhere and makes it easy to collaborate.

Jenkins

Jenkins is a Java-based open-source automation platform with plugins designed for continuous integration.

It helps automate the parts of software development related to building, testing, and deploying, facilitating continuous integration, and continuous delivery, making it easier for developers and DevOps engineers to integrate changes to the project and for consumers to get a new build. It is a server-based system that runs in servlet containers such as Apache Tomcat.

Git vs Jenkins: What are the differences?

Git and Jenkins are both popular tools, Git is a distributed version control system and Jenkins is a continuous integration and automation tool. Let’s explore the key differences between the two:

1. Code Management vs. Automated Builds: Git is primarily used for code management and version control. It allows developers to track changes, collaborate on code, and handle code branching and merging efficiently. On the other hand, Jenkins focuses on automated builds, testing, and deployment. It helps in integrating code changes from multiple team members and automates the build process, including compiling, testing, and packaging the software.
2. Local vs. Remote: Git operates locally on the developer’s machine, allowing them to work offline and commit changes to their local repository. Developers can then push their changes to a remote repository, facilitating collaboration with other team members. In contrast, Jenkins is a remote tool that runs on a dedicated server or cloud platform. It continuously monitors the code repository and triggers automated builds or tests based on predefined conditions or schedules.
3. Version Control vs. Continuous Integration: Git’s primary focus is on version control, tracking changes to files and directories over time. It provides features like branching, merging, and resolving conflicts to manage code versions effectively. Jenkins, on the other hand, emphasizes continuous integration (CI), which involves frequently integrating code changes from multiple developers into a shared repository. Jenkins automatically builds and tests the integrated code, highlighting any conflicts or issues that arise during the process.
4. User Interface: Git primarily relies on a command-line interface (CLI) for executing various operations. However, there are also graphical user interface (GUI) clients available for more user-friendly interactions. Jenkins, on the other hand, provides a web-based graphical user interface that allows users to configure and manage Jenkins jobs, view build reports, and monitor the status of automated builds and tests.
5. Plugin Ecosystem: Git has an extensive ecosystem of third-party plugins that extend its functionality and integrations with other development tools. These plugins cover various areas, including code review, issue tracking, and build automation. Jenkins, being an automation tool, has a rich plugin ecosystem as well. These plugins enable users to integrate Jenkins with different build tools, testing frameworks, version control systems, and deployment platforms, enhancing its capabilities and flexibility.
6. Ease of Use: Git can have a steep learning curve for beginners, particularly when it comes to understanding concepts like branching, merging, and resolving conflicts. However, once users become familiar with its core functionality, it provides a powerful and flexible version control system. Jenkins, on the other hand, aims to simplify the CI process and provide an intuitive user interface for managing builds and automation. While some initial setup and configuration may be required, Jenkins offers ease of use in terms of managing continuous integration workflows.

In summary, Git focuses on code management and version control, while Jenkins specializes in continuous integration and automation. Git operates locally, while Jenkins runs remotely on dedicated servers. Git’s primary interface is command-line-based, with additional GUI clients available, whereas Jenkins offers a web-based graphical user interface. Both Git and Jenkins have plugin ecosystems that extend their functionality, but Jenkins prioritizes automation-related integrations. Finally, while Git has a steeper learning curve, Jenkins aims to provide ease of use in managing continuous integration workflows.

Source: https://stackshare.io/stackups/git-vs-jenkins#:~:text=Git%20operates%20locally%2C%20while%20Jenkins,web%2Dbased%20graphical%20user%20interface.