owned this note
owned this note
Published
Linked with GitHub
---
tags: BMMB554-23
---
[](https://xkcd.com/1296)
# Lecture 14: GitHub and Git
:::info
The assumption here is that you have configured authentication so that you can push changes from your local repository to GitHub's remote!
:::
## Clone, change, push
### Clone a repo
First we will clone a copy of the repository you forked on Tuesday by executing `git clone` and git inside it:
```bash=
git clone git@github.com:[YOUR GITHUB HANDLE]/bmmb554_foo_bar.git
cd bmmb554_foo_bar
```
:::warning
Just make sure you replace `YOUR GITHUB HANDLE` with, urg, your GitHub handle!
:::
### Make a few changes
Edit `README.md` by adding any text you want (e.g., 'making some changes') and also create a new directory called `docs`:
```bash=
mkdir docs
```
now inside the `docs` create a new file called `index.html` and past the following content in it:
```html=
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
### `add` and `commit`
Make sure you are at the root of your local repo. And then:
```bash=
$ git status
On branch main
Your branch is up to date with 'origin/main'.
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: README.md
Untracked files:
(use "git add <file>..." to include in what will be committed)
docs/
no changes added to commit (use "git add" and/or "git commit -a")
$ git add README.md
$ git add docs/*
$ git status
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: README.md
new file: docs/index.html
$ git commit -m 'changed README and added docs'
[main a5fdbae] changed REDAME and added docs
2 files changed, 11 insertions(+), 1 deletion(-)
create mode 100644 docs/index.html
```
### `push` !
Since we have authentication working, let's push:
```bash=
$ git push
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 639 bytes | 639.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:nekrut/bmmb554_foo_bar.git
de89f51..a5fdbae main -> main
```
### Go to GitHub and see the changes
### Enable GitHub Pages
- Click "Settings"
- Click "Pages"
- Set "Barnch" to `main` and directory to `docs`
After a minute or so you will be able to go to `https://[YOUR GITHUB HANDLE].github.io/bmmb554_foo_bar` and see something like this:
:tada: :tada: :tada: :tada: :tada: :tada: :tada: :tada: :tada: :tada: :tada: :tada: :tada:
## Create a meaningful website
We will create a web page using markdown and hackmd.
### What is markdown?
[Markdown](https://en.wikipedia.org/wiki/Markdown) is a lightweight markup language that is used to format text in a simple and easy-to-read way. It was created by John Gruber in 2004 and has become widely used in documentation, web pages, and other text-based documents.
Markdown allows you to add formatting elements to plain text using a few simple syntax rules. For example, you can add headings by using the "#" symbol at the beginning of a line, add emphasis to text by using asterisks or underscores, and create lists by using dashes or numbers.
### What is HackMd?
[HackMD](htpps://hackmd.io) is a collaborative, web-based markdown editor that allows multiple users to work on a document in real-time. It is similar to other collaborative writing tools, such as Google Docs or Microsoft Office 365, but with a focus on markdown formatting.
HackMD provides a simple and intuitive interface for editing markdown text. You can create headings, add emphasis, create lists, add images, and more using the markdown syntax. You can also collaborate with others in real-time, with changes appearing instantly on everyone's screens.
One of the unique features of HackMD is the ability to create "live" documents, which are documents that allow you to run code, create interactive visualizations, and embed multimedia content directly within the markdown text. This makes HackMD an ideal tool for creating technical documentation, tutorials, and interactive educational materials.
HackMD also supports integration with other tools, such as GitHub, Dropbox, Google Drive, and more, allowing you to easily import and export documents to and from other platforms.
HackMD is available both as a web-based application and as a self-hosted solution that you can run on your own server. It is used by developers, educators, and teams across various industries for collaborative writing, note-taking, and technical documentation.
### Sign up with HackMd and create a page
For this go to https://hackmd.io and sign up for an account. Note that you can sign up using your GitHub credentials.
Once you are done, let's go through [HackMd markdown syntax reference](https://hackmd.io/c/codimd-documentation/%2F%40codimd%2Fmarkdown-syntax).
You can now go ahead and create a page!
### Deploy a page on GitHub
We will now go through the following steps:
- Save webpage as HTML
- Move it to replace `index.html` in the `docs/` directory of your repo
- Push to GitHub
## The PR workflow
A pull request is a feature of version control systems, such as Git, that allows developers to propose changes to a codebase hosted in a shared repository.
When a developer wants to contribute to a project, they will create a copy of the project (a "fork"), make changes to the codebase in their own copy, and then submit a pull request to the original project's maintainers. The pull request includes a summary of the changes made, any relevant documentation or tests, and a request for the maintainers to review the changes and merge them into the original project.
The maintainers can then review the proposed changes, leave comments or suggest modifications, and ultimately decide whether or not to merge the changes into the project. This process allows for collaboration and code review, and ensures that changes to a codebase are thoroughly reviewed and tested before being added to the main codebase.
### Let's do a PR against the repo of this course
To do this:
- Clone https://github.com/nekrut/BMMB554
- Create a new branch
- Make some changes
- Push
- Create a PR
Google Drive
Gist
Clipboard
Sign in with Wallet
