# 新聞網頁製作(七)- GitHub 部署網頁、新聞敘事元件與 Bootstrap 套件

## Slides:
https://hackmd.io/6fCkIJuNTYmmjsZRV5427w

## 學習大綱：
- [新聞網頁製作 （一） - HTML 標記式語言](https://hackmd.io/svhFYKq4QyaarC_J0WRsig)
- [新聞網頁製作（二） - CSS 串接樣式表](https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ)
- [新聞網頁製作（三）- CSS 選擇器與基礎網頁排版](https://hackmd.io/ccO-gvxFR5-49q3ePoNJkg)
- [新聞網頁製作（四）- CSS Position 與 Flexbox 排版](https://hackmd.io/i1uBelrpRv2Uz5emQawIiw)
- [新聞網頁製作（五）- Responsive Web Design 響應式網頁](https://hackmd.io/ojTXG2s0RQaJz85goqIz1w)
- [新聞網頁製作（六）- 多媒體元素與動態效果](https://hackmd.io/J_YYk1YUSum1x3fVo75PXA)
- [新聞網頁製作（七）- GitHub 部署網頁、新聞敘事元件與其他套件](https://hackmd.io/P9N34oIwS2G6Mfhag3Rqzg)

## 本週學習要點
- 使用 GitHub 建立屬於自己的網頁
- 新聞敘事元件庫
- 使用 Bootstrap 套件

## GitHub 是什麼？
GitHub 是放程式碼的平台，也是絕大部分開源程式碼的存放處。

GitHub 不僅是存放程式碼的平台，他也是網路上工程師互相協作的練功場。大部分你遇到的問題，都可能也是別人的問題，而 GitHub 提供了大家討論的平台，大家都很樂意在這開放的平台上提供自己的看法與見解。
除此之外，GitHub 提供了版本控制（version control），版本控制就是歷史紀錄，所有程式碼的修正都留有獨特的編號，你可以輕鬆知道誰改了什麼？為何而改？

GitHub is a code hosting platform for version control and collaboration.
It lets you and others work together on projects from anywhere.

This tutorial teaches you GitHub essentials like repositories, branches, commits, and Pull Requests.
You’ll create your own Hello World repository and learn GitHub’s Pull Request workflow,
a popular way to create and review code.

## 使用 GitHub 建立屬於自己的網頁
GitHub 為了刺激大家將自己的專案開源，他不僅免費提供空間讓大家存放程式碼，也同時提供了一套簡單的服務，讓大家可以在 GitHub 上部署自己的網站。

接下來透過五個步驟，帶大家建立屬於自己的網頁。

### 步驟1： 申請 GitHub 帳號
請至 https://github.com 申請帳號。
`Username` 之後會成為網址的一部分，例如：我的帳號是 `nickhsine`，網址會是 `https://nickhsine.github.io` 開頭。

### 步驟2：建立程式碼 Repository
以下圖為例，我們建立了 `homework4` repository，repository 的名稱亦會成為網址的一部分，像是`https://nickhsine.github.io/homework4`。


由於我們是透過 GitHub 幫我們建立網頁，repository 預設是 `Public`，代表放在 `homework4` 裡面的程式碼都是公開的，每個人都能檢視它。

若要勾選 `Private`，則需要升級成付費帳號。

### 步驟3：上傳程式碼
下圖示範了如何上傳整個資料夾。


請注意，由於我們是用免費版，所以上傳的檔案不能過大，100MB 是檔案大小的極限。另外，請盡量讓每個 repository 的大小小於 1GB。

### 步驟4：編寫上傳日誌
確認檔案都成功上傳後，我們必須編寫日誌（Commit），此舉是要在 GitHub 上留下紀錄，說明每次更動，具體做了些什麼事情，方便日後維護。


### 步驟5：確認檔案是否上傳成功
編寫日誌後，我們可以透過[網頁介面](https://github.com/nickhsine/homework4/)檢查我們上傳的檔案。


### 步驟6：設定 GitHub Pages
1. 點選 Settings 按鈕
2. 點選左側 Pages 按鈕
3. 在 Source 的下拉式選單中，選取 `main` 分支（Branch）
4. 點選 Save 按鈕


### 步驟7：檢視網頁
GitHub 會根據
1. 帳號 `nickhsine`
2. repository `homework4`
3. 程式碼檔案路徑 `article-page.html`

產生網址如下的
`https://nickhsine.github.io/homework4/article-page.html`的[範例網頁](https://nickhsine.github.io/homework4/article-page.html)。

註：每個步驟的操作可以參考：[GitHub Guides](https://guides.github.com/activities/hello-world/)。

## 新聞敘事元件庫

- [Knight Lab](https://knightlab.northwestern.edu/)
- 報導者開放實驗室
- [《報導者開放實驗室》：不重新發明輪子！一個「通用型新聞敘事元件庫」的實踐之路](https://medium.com/twreporter/orangutan-npm-packages-e48ec08df1a2)
- [《報導者》新聞小工具上線公測part 1：橫著滾吧照片！](https://medium.com/twreporter/twreporter-lab-scrollable-image-news-tool-3fa0c27423c)
- [《報導者》新聞小工具上線公測part 2：「大事記」圖表產生器](https://medium.com/twreporter/twreporter-lab-timeline-news-tool-4fe8db1035f2)
- [香港反送中大事記：一張圖看香港人怒吼的285天](https://www.twreporter.org/a/hong-kong-extradition-law-event)
- [【不斷更新】COVID-19大事記：從全球到台灣，疫情如何發展？](https://www.twreporter.org/a/2019-ncov-epidemic)
- [封城孤島：無藥無糧，從近萬筆求救訊息看上海的封城亂象](https://www.readr.tw/post/2903)
- [《報導者》新聞小工具上線公測part 3：左右互搏版型](https://medium.com/twreporter/twreporter-lab-dual-channel-news-tool-5c13c7a83e24)
- [從武漢到世界──COVID-19（武漢肺炎）疫情即時脈動](https://www.twreporter.org/i/covid-2019-keep-tracking-gcs)
- [《報導者》新聞小工具上線公測part 4：「捲動式影片」圖表產生器](https://medium.com/twreporter/tw-reporter-lab-scrollable-video-scrollytelling-open-news-tool-ac006651484d)
- [交友×PUA×假投資：分解「沉浸式詐騙」手法，你需要的4個反制手段](https://www.twreporter.org/a/online-scams-solutions)
- [從租用到迫遷──南鐵東移，25年政策與地貌的轉變](https://www.twreporter.org/a/tainan-underground-railway-project-controversy)
- [H&H/g0v 演講投影片](https://docs.google.com/presentation/d/1rrEPsY6LogftPxhHNell3M-vDCIAWuKifZ0fdsviLxg/view)

## [Bootstrap 套件](https://getbootstrap.com/)
Bootstrap 是很強大的套件，它有一套定義好的 CSS 和 Javascript，只要套上 Bootstrap 的程式碼，就可以快速產生手機優先的響應式網頁。

以下特別介紹 Bootstrap 提供的三個互動式的網頁元件。

- [Carousel](https://getbootstrap.com/docs/5.0/components/carousel/)
- [Card](https://getbootstrap.com/docs/5.0/components/card/)
- [Scrollspy](https://getbootstrap.com/docs/5.0/components/scrollspy/)

為了使用 Bootstrap 的元件或是任何功能，我們第一步必須先將 Bootstrap 的 CSS 和 Javascript 程式載入（請見 [Bootstrap Quick Start](https://getbootstrap.com/docs/5.0/getting-started/introduction/#quick-start)）。

確定 CSS 和 Javascript 的檔案載入後，我們便可以使用上述互動式的網頁元件。（若 Bootstrap 只是用來排版，而非使用互動式的網頁元件的話，我們可以只載入 CSS 檔案就好。）

接著，我們可以快速透過 Bootstrap 的範例程式碼，產生屬於我們自己的 `Card`、`Carousel` 和 `Scrollspy`。

然而，透過 Bootstrap 產生出來的元件，雖然快速好用，但會與同樣使用 Bootstrap 的其他網頁長得類似，缺少特色。

我們可以透過以下方式，客製化我們使用的 Bootstrap 元件。

#### 1. 借用 Bootstrap 定義好的 CSS 類別
Bootstrap 的 Javascript 在處理互動時，會選擇它（Javascript）認得的類別，因此，我們可以在該類別中新增我們要的 CSS 樣式。

以 `Carousel` 元件為例（借用官網上的範例）：

<head>
  <!-- 載入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://raw.githubusercontent.com/nickhsine/teach-at-nccu/master/assets/images/image-1.jpg" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://raw.githubusercontent.com/nickhsine/teach-at-nccu/master/assets/images/image-2.jpg" class="d-block w-100" alt="">
    </div>
  </div>
</div>
<!-- 載入 Bootstrap Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>

在最外層的 `<div>` 中，使用了 `carousel` 和 `slide` 類別。
這兩個類別是 `Carousel` Javascript 處理互動時會使用的類別，如果我們將其移除，會發現，圖片動態向左移動的效果不見了。

我們可以透過新增樣式在這些定義好的類別上，讓 `Carousel` 看起來與別人不同。

舉例來說，我們將 Bootstrap 定義好的 `.carousel` 類別，將上邊框樣式。

<head>
  <!-- 載入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  
  <style>
  /* 加紅色邊框在 carousel 上 */ 
  .carousel {
      border: 3px solid red;
  }
  </style>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://raw.githubusercontent.com/nickhsine/teach-at-nccu/master/assets/images/image-1.jpg" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://raw.githubusercontent.com/nickhsine/teach-at-nccu/master/assets/images/image-2.jpg" class="d-block w-100" alt="">
    </div>
  </div>
</div>
<!-- 載入 Bootstrap Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>

#### 2. 新增 CSS 類別
除了使用定義好的類別，我們也可以添加新的樣式。
假設 `.red-border` 是我們定義好的類別，其樣式如下：

.red-border {
  border: 3px solid red;
}

我們透過新增 `.red-border` 在我們想要的 HTML 標籤，達到客製化的效果。

<head>
  <!-- 載入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  
  <style> 
  .red-border {
      border: 3px solid red;
  }
  </style>
</head>
<body>
<!-- 新增 .red-border 類別 -->
<div id="carouselExampleSlidesOnly" class="carousel slide red-border" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://raw.githubusercontent.com/nickhsine/teach-at-nccu/master/assets/images/image-1.jpg" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://raw.githubusercontent.com/nickhsine/teach-at-nccu/master/assets/images/image-2.jpg" class="d-block w-100" alt="">
    </div>
  </div>
</div>
<!-- 載入 Bootstrap Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>

## 延伸閱讀：
- [從0 到1 的GitHub Pages 教學手冊- HackMD](https://hackmd.io/@Albertnotes/B1_iKcAwI)

###### tags: `teach-at-nccu`, `html`, `css`, `github`