Connect Github & Netlify
Connect Github & Netlify
Connect Github & Netlify
What is Github?
- Git is a version control software.
- We can track all changes and refer to any range of changes in history.
- Github is an online warehouse to store Git code repository.
- Github is also an online collaboration platform to work on the repo.
- Github is also a community for developers to discover new code repo.
- Github provides online editor for us to make quick changes.
Demo Time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341113/Screen_Shot_2020-05-09_at_12.38.24_AM.png)
First, create a new repository in Github.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341115/Screen_Shot_2020-05-09_at_12.37.50_AM.png)
This is the newly created repository
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341117/Screen_Shot_2020-05-09_at_12.45.33_AM.png)
Create a new index.html file with dummy content.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341123/Screen_Shot_2020-05-09_at_12.45.42_AM.png)
Now we are ready to connect Netlify.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341125/Screen_Shot_2020-05-09_at_12.48.11_AM.png)
Log in to Netlify.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341127/Screen_Shot_2020-05-09_at_12.48.18_AM.png)
Choose create a new site, and choose Github.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341128/Screen_Shot_2020-05-09_at_12.48.50_AM.png)
After authorized Github, we see all our repositories.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341129/Screen_Shot_2020-05-09_at_12.52.13_AM.png)
Select the repository that we just created.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341130/Screen_Shot_2020-05-09_at_12.52.23_AM.png)
Use default value in setting: master branch.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341131/Screen_Shot_2020-05-09_at_12.52.35_AM.png)
Seconds later, our site is ready.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341133/Screen_Shot_2020-05-09_at_12.52.56_AM.png)
We can configure a better site name for URL.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341165/Screen_Shot_2020-05-09_at_12.59.13_AM.png)
Previewing our deployed site.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341134/Screen_Shot_2020-05-09_at_12.57.21_AM.png)
Let’s make some changes by creating another dummy site in Codepen.
Export and download the code.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341144/Screen_Shot_2020-05-09_at_12.57.46_AM.png)
What we need is the dist folder.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341147/Screen_Shot_2020-05-09_at_12.58.04_AM.png)
Choose "upload" in Github and upload the exported files.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341149/Screen_Shot_2020-05-09_at_12.58.58_AM.png)
We shall write down what’s changes for better version control.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341169/Screen_Shot_2020-05-09_at_12.59.18_AM.png)
Whenever we update the Github master branch, Netlify deploys our site automatically.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342373/Screen_Shot_2020-05-09_at_9.59.33_AM.png)
We shall write down what’s changes for better version control.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342374/Screen_Shot_2020-05-09_at_10.01.32_AM.png)
We can make changes by editing files directly on Github.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342375/Screen_Shot_2020-05-09_at_10.01.53_AM.png)
In the repository home page, we can go to "commits" tab to view change history log
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342376/Screen_Shot_2020-05-09_at_10.02.00_AM.png)
It lists all the changes history and summary of what changes.
That’s why we write a commit message every time we change.
That allows us to look back and know what we changed.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342377/Screen_Shot_2020-05-09_at_10.02.19_AM.png)
We can view the detail difference by looking into the commit.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342378/Screen_Shot_2020-05-09_at_10.04.06_AM.png)
Every repository comes with a README.md file, we can update it and Github will render this Markdown file as project description and documentation.
Usage Example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341172/Screen_Shot_2020-05-09_at_1.16.06_AM.png)
Video promotion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341181/Screen_Shot_2020-05-09_at_1.28.49_AM.png)
Minimal personal website.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341183/Screen_Shot_2020-05-09_at_1.29.02_AM.png)
inQRCode.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341184/Screen_Shot_2020-05-09_at_1.29.13_AM.png)
draw.mz-lab.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341190/Screen_Shot_2020-05-09_at_1.31.24_AM.png)
Quick hosting of presentation materials.
https://learning-deck.netlify.app/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342405/Screen_Shot_2020-05-09_at_10.34.51_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341186/Screen_Shot_2020-05-09_at_1.29.25_AM.png)
Web books.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7341188/Screen_Shot_2020-05-09_at_1.31.01_AM.png)
Web books.
Behind the scene of the web book.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342408/Screen_Shot_2020-05-09_at_10.37.59_AM.png)
mak.la Short URL redirection
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7342411/Screen_Shot_2020-05-09_at_10.42.22_AM.png)
Example of mak.la _redirects
/ui https://excalidraw.com/
/gecko.zip https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-win64.zip
/macao-daily http://check-macao-dailypy.makzan.repl.run
/python-web https://repl.it/languages/python3
/hash https://cdpn.io/makzan/debug/f357bd5e7a6de39c000fa755820c9a3b
/progress https://cdpn.io/makzan/debug/1532fcdb65698d096bd356e7d60c39d0
Connect Github & Netlify
- Creating Github repository.
- Adding index.html file.
- Connecting Github and Netlify.
- Making changes to Github for continuous deployment.
- Updating README.md file for better describing the repository.
- Viewing change history in commits log.
Github for non-code stuff
- Writing documentations.
- in Markdown / AsciiDoc / HTML / Wiki / Plain Text
- Writing blog posts
- With Static Site Generator
- Writing books
Connect Github and Netlify
By makzan
Connect Github and Netlify
- 729