Day27|在 GitHub 上建立专案与使用 git push 指令将档案上传到 GitHub

先前介绍了很多关於 Git 的常用指令以及使用情况,但目前我们都只是在本地端操作而已,如果需要跟别人共同制作专案,或是想要传送到开放空间请教各个写 Code 大师,这时候我们就会需要 Push 到远端数据库啦!

现在最常听见与使用的远端数据库是 GitHub ,接下来就让我们慢慢了解 GitHub 是什麽,我们又要怎麽把我们的档案传送到 GitHub 呢?


GitHub 是什麽?

简单来说,GitHub 就是一个提供存取 Git 的站点、远端数据库,可以将自己写好的专案分享上传。

但要注意的是!Git 跟 GitHub 两个完全是不一样的东西唷!

👉 Git 被作为工具,让我们执行档案的管理并提交到储存库;而 GitHub 则是一个网站,本体是一个 Git Server ,提供除了基本的存取站点,也提供一些社群功能。

GitHub 是一个由 GitHub 公司所建立的网站,同时提供付费帐户与免费帐户,让使用着可以在这个 Git Server 建立自己的数据库,并存取保管中的代码。而相较於其他的 Git Server ,GitHub 还有一个特点是它类似於一个社群网页,拥有追踪( Fallow )、按赞( Star )其他使用者、数据库有谁参与并追踪最新版本,也有评论并提供复制( Fork )专案给予其他人的专案建议,而其他人同样也可以回馈给你的专案。

除此之外,提醒 GitHub 的 G 跟 H 都是大写英文喔!


设定属於自己的 GitHub 空间!

了解 GitHub 是什麽以後,接下来就动手将我们的专案 Push 上去吧~

Step 1 - 注册 GitHub

GitHub 官网注册会员。

https://ithelp.ithome.com.tw/upload/images/20211011/20141010U5VQl4cSzH.png

注册完後,点击 Profile ,可以进入个人的 GitHub 页面。

https://ithelp.ithome.com.tw/upload/images/20211011/20141010x15yYjjESW.png

Step 2 - 在 GitHub 建立新的数据库

当要上传档案时,我们需要在 GitHub 开新的专案。

可以点选右上角会员头贴的下拉选单,选择「Your Repositiories」後进入页面,再点选 「 New 」新增专案。

https://ithelp.ithome.com.tw/upload/images/20211011/20141010bGYjAsvUhO.png
https://ithelp.ithome.com.tw/upload/images/20211011/20141010lhp69rEZkJ.png

或是旁边的 + 号也可以选择 「New repository」

https://ithelp.ithome.com.tw/upload/images/20211011/20141010hAj2OCyJB9.png
https://ithelp.ithome.com.tw/upload/images/20211011/20141010qZw4ZIL5ET.png

之後就会进入到 Creat a new repository 的页面:

https://ithelp.ithome.com.tw/upload/images/20211011/20141010Zw9q70mbQp.png

填写专案名称、选择存取权限、按下 Creat repository 完成新增专案。

https://ithelp.ithome.com.tw/upload/images/20211011/201410103FZimIynQu.png

接下来会导入到以下这个画面:

https://ithelp.ithome.com.tw/upload/images/20211011/2014101099VvN4e3cd.png

页面说明|

  • creat a new repository on the command line - 适用於全新开始
  • push an existing repository from the command line - 上传现存专案

接下来可以先把网址复制起来,後续步骤会用到。

https://ithelp.ithome.com.tw/upload/images/20211011/201410106YeZMCUB0M.png

Step 3 - 将档案上传到 Push

假设我们目前什麽都没有,要找一个空的目录。

因此我们跟着 create a new repository on the command line 这个步骤执行指令:

  1. 建立一个 README.md 档案
$ echo "# Vue_Todolist" >> README.md # 建立一个 README.md 档案

https://ithelp.ithome.com.tw/upload/images/20211011/20141010hqmhWkdezW.png

  1. git init 指令建立 Git 版本控制
$ git init # 进行版本控制

https://ithelp.ithome.com.tw/upload/images/20211011/20141010gr8RDHgFcv.png

  1. README.md 档案加至暂存区
$ git add README.md # 将 [README.md](http://README.md) 档案加至暂存区

https://ithelp.ithome.com.tw/upload/images/20211011/201410102xwwfYwe6q.png

  1. 提交到数据库
$ git commit -m "first commit"

https://ithelp.ithome.com.tw/upload/images/20211011/20141010maeTKEkkaY.png

  1. 建立分支
$ git branch -M main

https://ithelp.ithome.com.tw/upload/images/20211011/20141010t7jBL6gxOm.png

  1. 将档案推上远端数据库 |设定一个端节的节点

    $ git remote add origin https://github.com/cycChuyin/Vue_Todolist.git
    
    • git remote 指令 - 跟远端有关系的操作( remote ,远端之意)
    • add 指令 → 加入一个远端的节点
    • origin 为指向位置的代名词,这里代表後面提供的服务器位置(此位置与我们先前复制的相同)。

    https://ithelp.ithome.com.tw/upload/images/20211011/201410107qRD6XfKBk.png

  2. 将档案推上远端数据库 |git push

    设定好节点後,可以将档案 push 上去

    $ git push -u origin main
    

    说明 Push 指令:

    • main 这个分支的内容推向 origin 这个位置。

    先前 origin 已经有代指我们 GitHub 要上传的位子

    • origin 如果没有 main ,则自动建立一个同样叫做 main 的分支。如果本来就有 main 分支,则会将此分支指向最新进度。
    • -u 参数,设定 upstream。

    https://ithelp.ithome.com.tw/upload/images/20211011/201410108jHr3J4hjj.png

    执行 Push 指令时,可能会要求你输入 GitHub 的帐号密码。而这里的回馈讯息是说会需要一个 token ,可以根据讯息回馈来操作。
    Token authentication requirements for Git operations - 说明为何遇到这种情况及解决方式如何进行。
    Creating a personal access token - 後续跟着指示操作,得到金钥以後便可以回到 Git 继续操作。

    https://ithelp.ithome.com.tw/upload/images/20211011/20141010wqH5sv2CX2.png

    之後回到页面上重新整理:

    https://ithelp.ithome.com.tw/upload/images/20211011/20141010AabfL1PKke.png

    看到这个档案代表专案建立成功啦!

    之後也可以跟着这些步骤继续上传新的版本~


<<:  Day27 Javascript元件库 Jquery介绍

>>:  【Day 26】我们与 1102 的距离 - Bypass Clear Log Event

Day12 NiFi - Reporting Task & Bulletin Board

今天来带大家了解一下 NiFi 原生的 Monitoring 是怎麽运作的,像是 Disk, Mem...

从 IT 技术面细说 Search Console 的 27 组数字 KPI (21) :KPI 总表,如何填表

为甚麽只靠 Google Search Console 的报表是不够的呢? 因为早期 Webmast...

第二次参加铁人赛

今天要来分享我第二年参加铁人赛的故事!这时故事的时间线已经来到去年暑假。 进入正题 去年暑假,除了做...

Day-5 现代电视游玩怀旧主机可接受的最低标准、最终方案 S 端子

S 端子(或称 S-Video)的 S 呢、指的是 Separate、也就是分离的意思。它的原理就只...

Day 19 民生公共物联网资料应用竞赛,产品设计讨论过程分享

来找设计师一起 side project,前後端 / UIUX 皆可ㄛ。配对单连结: https:...