---
# System prepended metadata

title: 0606 個人專屬 Linktree 建置工作坊
tags: [Talk]

---

---
title: 0606 個人專屬 Linktree 建置工作坊
tags: Talk
description: 國立清華大學 產業創新實作
---

# [產業創新實作] 0606 一個和課程無關的工作坊

:::info
【 個人專屬 Linktree 建置工作坊】
* 時間：2023/06/06（二）19:00 ~ 22:00
* 地點：國立清華大學 旺宏館(圖書館) 502 討論室
* 備註：[點我查看此頁面的其他檢視方式](https://hackmd.io/OFzsnQsfS-envqY5PJyXgw)
:::

---

# 歡迎訊息

## 留言板
> 你好嗎
> [name=葦]
>嗨嗨
>
>哈囉
>[name=小安]
> 林奇葦說說仔

## 目錄

[TOC]

---

## 常用連結

- [Codepen](https://codepen.io/)
    - [Codepen 使用教學](https://hackmd.io/@w4wBc9wkR4CvPsIeEWiLbg/S1XivuMAu/%2FdaWWkPFKSNeVBN6uPV96Jg)
- [VS code](https://code.visualstudio.com/)
- [Live Preview (VS code Plugin)](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)
- [Little link](https://github.com/sethcottle/littlelink)
- [ChatGPT](https://chat.openai.com/)
- [Cloudflare](https://dash.cloudflare.com/sign-up)
- [7-Zip](https://www.7-zip.org/download.html)

---

# 嘿！我們先從寫 Hello World 開始!

## HTML

### 別人的筆記

- [HTML筆記 @hbdoy](https://hackmd.io/@hbdoy/B1YcHatMg)
    - [作者：Ryan Lee](https://hackmd.io/@hbdoy)
- [HTML @FrontEndSharedDocumentTeam](https://hackmd.io/@FrontEndSharedDocumentTeam/SycaGTJyd)
    - [作者：前端共筆文件小組](https://hackmd.io/@FrontEndSharedDocumentTeam)

- [網頁建置教學](https://www.w3schools.com/html/)

### 什麼是 HTML?

HTML 是用來建立網頁的語言。它使用標籤來定義網頁的結構和內容。
建立一個 HTML 文件，第一步是定義文件型態，使用 ```<!DOCTYPE html>```。接著定義 HTML 文件的開始和結束，使用 ```<html>``` 和 ```</html>``` 標籤。

HTML 文件分為兩個主要區塊:```<head>``` 和 ```<body>```。

#### head
```<head>``` 定義文件資訊，像 ```<title>``` 標題、```<meta>``` 關鍵詞、```<link>``` CSS 連結等。

#### body
```<body>``` 定義可見的網頁內容，像文字、圖片、表格等。在 ```<body>``` 區塊，我們可以添加:

* ```<h1>``` 到 ```<h6>``` 標題標籤 - 定義標題，h1 最重要，h6 最不重要
* ```<p>``` 段落標籤 - 定義一段文字內容 
* ```<a>``` 連結標籤 - 製作可點擊的超連結 
* ```<img>``` 圖片標籤 - 嵌入圖片 
* ```<div>``` 區塊元素 - 群組其他元素，方便CSS樣式的應用
* ```<ul>``` 和 ```<li>``` 無序清單 - 製作清單
* ```<form>``` 表單 - 用來收集使用者資訊
* ```<table>``` 表格 - 顯示資料表格

以上就是 HTML 的基本標籤和結構。練習使用這些標籤，你就可以開始建立簡單的網頁了!如果要美化網頁，可以參考 CSS 教學，使用樣式表為 HTML 標籤增加樣式。

### 實作練習

#### 範例1:簡單的網頁架構

任務：讓 Hello World! 變成你的名字，下面的文字變成你喜歡的一段話，然後讓文字可以有不同的樣子

```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>
```

* font-family
* font-size
* font-weight
* font-style
* font-variant
* font-family 屬性是用來設定字體的類別。

font-size 屬性是用來設定字體的大小。大小可以是以數字顯現 (絕對的或是相較的均可)，或是以下其中之一的值："xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。

font-weight 屬性是用來設定字體的厚度。厚度的設定值可以從 100 到 900 (900 是最厚的)。另外，我們也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。

font-style 屬性是用來設定字體是否為斜體字 (italic 或 oblique)。

font-variant 屬性是用來設定文字是不是要以小型大寫 (small caps) 字體顯現。在小型大寫字體中，所有的字母都是大寫，可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。

[Font - ithome](https://ithelp.ithome.com.tw/articles/10191735)

```style=""```

#### 範例2:連結和圖片
任務：在網路上找到一張你喜歡的圖片，把 Link 換成導向網頁的連結，還有把圖片換成你的
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <h1><a href="https://www.example.com">Link to Example.com</a></h1>
    <a href="https://www.google.com"><img src="https://via.placeholder.com/150"></a>
  </body>
</html> 
```

##### 小安
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>貓貓</title>
  </head>
  <body>
    <h1><a href="https://playing.ltn.com.tw/article/10152/1">可愛貓貓！</a></h1>
    <a href="https://img.ltn.com.tw/Upload/playing/page/2018/07/08/180708-10152-1-J2OEU.jpg"><img src="https://img.ltn.com.tw/Upload/playing/page/2018/07/08/180708-10152-1-J2OEU.jpg"></a>
  </body>
</html> 
```

##### 林奇葦
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>好看的貓咪</title>
  </head>
  <body>
    <h1><a href="https://699pic.com/tupian/maomi.html">貓貓的產地</a></h1>
    <a href="https://img95.699pic.com/photo/50152/9794.jpg_wh300.jpg"><img src="https://img95.699pic.com/photo/50152/9794.jpg_wh300.jpg"></a>
  </body>
</html> 
```

##### 陳玟妤
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>挪威的森林</title>
  </head>
  <body>
    <h1><a href="https://www.example.com">水喔</a></h1>
    <a href="https://owlting-blog-media.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2019/10/05115838/rendered15.jpg"><img src="https://owlting-blog-media.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2019/10/05115838/rendered15.jpg"></a>
  </body>
</html> 
```

##### 周穎瑄
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My pet</title>
  </head>
  <body>
    <h1><a href="https://www.freepik.com/free-photo/cute-pet-collage-isolated_35587034.htm#query=pet&position=0&from_view=keyword&track=sph">my pet </a></h1>
    <a href="https://www.google.com"><img src="https://www.daysoftheyear.com/wp-content/uploads/international-cat-day1-scaled.jpg"></a>
  </body>
</html> 
```

##### 陳芷萱
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <h1><a href="https://stork.pet/s10700331120308g/">貓咪總動員館／銀白色曼赤肯</a></h1>
    <a href="https://www.google.com"><img src="https://stork.pet/wp-content/uploads/2023/03/111-14.jpg"></a>
  </body>
</html> 
```

##### 範本
```htmlembedded=
把你的程式放這裡
```

#### 範例3:表格

任務：表格資訊　換成你的生日，性別

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text     | Text     | Text     |

[表格](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/table)

```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>  
        <th>Age</th> 
        <th>Occupation</th>
      </tr>  
      <tr>
        <td>Jill</td>  
        <td>25</td>
        <td>Software Engineer</td>
      </tr>  
      <tr>
        <td>Mark</td> 
        <td>35</td>  
        <td>Designer</td>
      </tr>
    </table>
  </body>
</html>
```

##### 葦
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>  
        <th>Birth</th> 
        <th>Gender</th>
      </tr>  
      <tr>
        <td>Kiwi</td>  
        <td>2003/07/24</td>
        <td>Male</td>
      </tr>  
    </table>
  </body>
</html>
```
##### 小安
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>  
        <th>Birth</th> 
        <th>Gender</th>
      </tr>  
      <tr>
        <td>Andrea</td>  
        <td>2004/11/16</td>
        <td>girl</td>
      </tr>  
    </table>
  </body>
</html>
```

##### 周穎瑄
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <p>這是表格</p>
    <table>
      <tr>
        <th>Name</th>  
        <th>birth</th> 
        <th>gender</th>
      </tr>  
      <tr>
        <td>Olivia</td>  
        <td>5/14</td>
        <td>female</td>
      </tr>  
    </table>
  </body>
</html>
```

##### 陳芷萱
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>  
        <th>Birth</th> 
        <th>Gender</th>
      </tr>  
      <tr>
        <td>SummerFun</td>
        <td>2001/06/05</td>
        <td>Cat</td>
      </tr>  
    </table>
  </body>
</html>
```

##### 陳玟妤
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>  
        <th>Age</th> 
        <th>gender</th>
      </tr>  
      <tr>
        <td>Tina</td>  
        <td>20</td>
        <td>female</td>
      </tr>  
  
    </table>
  </body>
</html>
```

#### 範例4:表單

任務：選課調查表單，要記錄 email（email 放到最前面），然後多一個清空 ```reset``` 的選項 

```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
  </head>
  <body>
    <form>
      <div>
        <label>Name:</label> 
        <input type="text" name="name">
      </div>
      <div>
        <label>Email:</label> 
        <input type="email" name="email">
      </div>
      <div>
        <label>Message:</label> 
        <textarea name="message" rows="10" cols="30"></textarea>
      </div>  
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
```

##### 陳玟妤
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
  </head>
  <body>
    <form>
      <div>
        <label>電子郵件:</label> 
        <input type="email" name="email">
      </div>
      <div>
        <label>姓名:</label> 
        <input type="text" name="name">
      </div>
     
      <div>
        <label>訊息:</label> 
        <textarea name="message" rows="10" cols="30"></textarea>
      </div>  
      <button type="submit">提交</button><button type="submit">清空</button>
     
    </form>
  </body>
</html>

##### 小安
```htmlembeded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
  </head>
  <body>
    <form>
      <div>
        <label>電子郵件：</label> 
        <input type="email" name="email">
      </div>
      <div>
        <label>姓名：</label> 
        <input type="name" name="name">
      </div>
      <div>
        <label>訊息:</label> 
        <textarea name="message" rows="10" cols="30"></textarea>
      </div>  
      <button type="submit">提交<button type="reset">清空</button>
    </form>
  </body>
 </html>
```

#### 周穎瑄
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
  </head>
  <body>
    <form>
      <div>
        <label>信箱:</label> 
        <input type="email" name=“信箱”>
      </div>
      <div>
        <label>名字:</label> 
        <input type="text" name="名字">
      </div>
      <div>
        <label>訊息:</label> 
        <textarea name="訊息" rows="10" cols="30"></textarea>
      </div>  
      <button type="submit">提交</button>
      <button type="submit">清空</button>
    </form>
  </body>
</html>
```

##### 林奇葦
![](https://hackmd.io/_uploads/S1qJDs38n.png)
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
  </head>
  <body>
    <form>
      <div>
        <label>信箱:</label> 
        <input type="email" name="email">
      </div>
      <div>
        <label>姓名:</label> 
        <input type="text" name="name">
      </div>
      <div>
        <label>訊息:</label> 
        <textarea name="message" rows="10" cols="30"></textarea>
      </div>  
      <button type="submit">提交</button><button type="reset">清空</button>
    </form>
  </body>
</html>
```


## CSS

### 別人的筆記

- [CSS 樣式彙整-前端筆記 @DCT](https://hackmd.io/@DCT/html_css)
    - [作者：wa.__.wa](https://hackmd.io/@DCT)
- [CSS @FrontEndSharedDocumentTeam](https://hackmd.io/@FrontEndSharedDocumentTeam/HkZemp11u)
    - [作者：前端共筆文件小組](https://hackmd.io/@FrontEndSharedDocumentTeam)

### CSS 可以吃嗎？

> 不能
> [name=林奇葦]

CSS 是屬於 HTML 的樣式語言。它負責網頁的版面和外觀。要運用 CSS,我們需要在 HTML 中以 ```<link>``` 標籤引入 CSS 檔案,或使用 ```<style>``` 標籤在 HTML 文件中直接撰寫樣式代碼。

CSS 運作的原理是選取 HTML 元素並為其添加樣式。我們可以根據元素名稱（element）、id、class 等來選取元素。例如:

元素名稱:
```h1 { color: blue; }``` 選取所有 h1 標題

id: ```#my-id { font-size: 20px; }``` 選取 id 為 ```my-id``` 的元素

class: ```.my-class { background: yellow; }``` 選取所有 class 為 ```my-class``` 的元素


添加的樣式可以是：


* 顏色:```color```
color: blue
* 尺寸:```width```, ```height```, ```padding```, ```margin```, ```font-size``` 等
* 位置:```float```, ```position```, ```top```, ```bottom``` 等
* 外觀:```background```, ```border```, ```display``` 等


我們也可以組合多個選取器,例如:　```h1.my-class``` 選取 class 為 ```my-class ```　的 ```h1``` 標題。

在 CSS 中,樣式表遵循以下規則:
```css
選取器 {
樣式屬性1: 屬性值;
樣式屬性2: 屬性值;
}
```
舉例來說，一個 CSS 樣式表會是這樣的

```css
/* Default (this is great for your own brand color!) */
.button.button-default {
  color: #ffffff;
  background-color: #4491fd;
}
.button.button-default:hover,
.button.button-default:focus {
  filter: brightness(90%);
}
```

### 實作練習

#### 範例1:簡單的網頁架構
```htmlembedded
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>
```
```css
body {
  background: #eee;
  color: #333;
  font-family: sans-serif;
  text-align: center;
}

h1 {
  font-size: 2rem; 
}

p {
  font-size: 1.2rem;
  margin: 1rem 0;
}
```

#### 範例2:連結和圖片
```htmlembedded
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>貓貓</title>
  </head>
  <body>
    <h1><a href="https://playing.ltn.com.tw/article/10152/1">可愛貓貓！</a></h1>
    <a href="https://img.ltn.com.tw/Upload/playing/page/2018/07/08/180708-10152-1-J2OEU.jpg"><img src="https://img.ltn.com.tw/Upload/playing/page/2018/07/08/180708-10152-1-J2OEU.jpg"></a>
  </body>
</html> 
```
```css
a {
  color: #00a;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  width: 150px;
  border-radius: 50%;
}
```

#### 範例3:表格
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>  
        <th>Birth</th> 
        <th>Gender</th>
      </tr>  
      <tr>
        <td>Kiwi</td>  
        <td>2003/07/24</td>
        <td>Male</td>
      </tr>  
    </table>
  </body>
</html>
```
```css
table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 50%; 
}

th, td {
  padding: 1rem;
  text-align: left; 
}

tr:nth-child(even) {
  background: #ddd;
}
```

#### 範例4:表單
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
  </head>
  <body>
    <form>
      <div>
        <label>信箱:</label> 
        <input type="email" name="email">
      </div>
      <div>
        <label>姓名:</label> 
        <input type="text" name="name">
      </div>
      <div>
        <label>訊息:</label> 
        <textarea name="message" rows="10" cols="30"></textarea>
      </div>  
      <button type="submit">提交</button><button type="reset">清空</button>
    </form>
  </body>
</html>
```
```css
form {
  max-width: 500px;
  margin: 0 auto;
}

input, textarea, button {
  display: block;
  margin: 1rem 0;
  padding: 0.5rem;
}

button {
  background: #09a;
  color: #fff;
  border: 0; 
  width: 100%; 
}
```

## Open Graph

### OG OG OMG!
Open Graph 是 Facebook 提出的標準,幫助社群媒體更佳地理解和顯示網頁內容。
- https://ogp.me/
- https://ithelp.ithome.com.tw/articles/10278469

要實作 Open Graph,需要在 HTML ```<head>``` 中添加一些 ```<meta>``` 標籤:

```htmlembedded
<meta property="og:title" content="網頁標題" />
<!-- 定義網頁的標題,通常與 <title> 標籤相同 -->

<meta property="og:description" content="網頁描述" />
<!-- 定義網頁的描述,幫助社群媒體瞭解網頁內容 -->

<meta property="og:image" content="圖片網址" /> 
<!-- 定義代表網頁的主要圖片網址 -->

<meta property="og:url" content="網頁網址" />
<!-- 定義網頁的網址 -->

<meta property="og:type" content="website" /> 
<!-- 定義網頁的類型,像 article、website、profile 等 -->
```

這些 ```<meta>``` 標籤告訴社群媒體這個網頁的標題、描述和圖片。當使用者分享網頁時,社群媒體就可以根據這些資訊來生成預覽和動態貼文。

---

# 你要有個好用的 Editor - Virsual Studio Code

## VS Code?
Visual Studio Code 或 VS Code 是一個開源的代碼編輯器,適用於 Windows,macOS 和 Linux。它可以編輯 HTML、CSS、JavaScript 等網頁開發技術。

## 安裝與使用

- [來這裡安裝 VS code](https://code.visualstudio.com/)

開啟 File > Open Folder,選擇你的專案資料夾。這樣 VS Code 可以辨識專案中的檔案,像 HTML、CSS、JS 檔案。

在 VS Code 中按右鍵,選擇在各個資料夾中開啟終端機和編輯器。這使你可以同時編輯代碼和在終端機中執行命令。

安裝相關的擴充套件 (Extensions)。像 Live Server 可以在瀏覽器中即時預覽 HTML 檔案。ESLint 可以針對 JS 代碼作風格檢查。等等。

## 快速鍵

使用快速鍵加速開發效率。例如:

* Ctrl/Cmd + P:快速切換檔案
* Ctrl/Cmd + Shift + P:執行Command Palette,輸入指令
* Ctrl/Cmd + B:開啟/關閉側邊欄
* Alt + 向上/向下:移動一行上/下一個
* Ctrl/Cmd + /:註解選取行
* Ctrl/Cmd + Space:自動完成代碼
* Ctrl/Cmd + S:儲存檔案

## 其他功能

- VS Code 有強大的智能感知功能,可以自動完成 HTML 標籤、CSS 屬性等。也可以快速預覽和搜尋文件。
- 可以安裝主題更換VS Code 的外觀。也可以修改設定來調整字體大小、標示符號等。
- VS Code 是一個功能強大,高度客製化的代碼編輯器。運用它可以大幅提高HTML、CSS 和 JavaScript 的開發效率和體驗!

## 一些好用的插件

### Chinese (Traditional) Language Pack for Visual Studio Code
> 這個擴充套件可以將 VS Code 的介面語言設定為 traditional Chinese(正體中文)。安裝此插件後,VS Code 的介面文字將變成中文,提高界面友好性。
* 名稱: Chinese (Traditional) Language Pack for Visual Studio Code
* 識別碼: MS-CEINTL.vscode-language-pack-zh-hant
* 描述: Language pack extension for Chinese (Traditional)
* 版本: 1.79.2023053109
* 發行者: Microsoft
* VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant

### HTML CSS Support
> 這個擴充套件可以在 VS Code 中為 HTML 和 CSS 檔案提供智能感知支援。它可以自動完成 HTML 標籤、CSS 選取器和屬性。同時提供 CSS 樣式預覽、移到定義和文件檢視等功能。安裝此插件可以大幅提高 HTML 和 CSS 開發的速度與體驗。
* 名稱: HTML CSS Support
* 識別碼: ecmel.vscode-html-css
* 描述: CSS Intellisense for HTML
* 版本: 1.13.1
* 發行者: ecmel
* VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

### Live Preview
> 這個擴充套件可以在 VS Code 中啟動一個本地伺服器,用於即時預覽 HTML 檔案。安裝此插件後,選擇 View->Command Palette,輸入 Live Server:Open with Live Server,即可在預設瀏覽器中預覽 HTML 檔案。此插件將同步偵測 HTML 檔案的變更,並立即重新載入瀏覽器頁面。它可以大幅加快網頁開發的效率,無需手動重新整理瀏覽器即可即時預覽網頁修改的效果。
* 名稱: Live Preview
* 識別碼: ms-vscode.live-server
* 描述: Hosts a local server in your workspace for you to preview your webpages on.
* 版本: 0.4.8
* 發行者: Microsoft
* VS Marketplace
* 連結: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

### vscode-icons
> 這個擴充套件可以為 VS Code 的檔案和資料夾添加類型圖示。它包含了多種常用檔案類型的圖示,如:HTML, CSS, JavaScript, PHP, Python 等。安裝此插件後,可以更清楚分辨專案中的各種檔案,尤其是在模糊檔案名稱的情況下。
* 名稱: vscode-icons
* 識別碼: vscode-icons-team.vscode-icons
* 描述: Icons for Visual Studio Code
* 版本: 12.4.0
* 發行者: VSCode Icons Team
* VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

### Image preview
> 這個擴充套件可以在 VS Code 的編輯器視窗左邊行號區域預覽圖片。當游標 hover 在連結至圖片的路徑或 URL 時,即會顯示該圖片的預覽。安裝此插件後,可以更方便地預覽 HTML 和Markdown等檔案中嵌入的圖片,無需開啟瀏覽器即可快速預覽編輯中的圖片。
* 名稱: Image preview
* 識別碼: kisstkondoros.vscode-gutter-preview
* 描述: Shows image preview in the gutter and on hover
* 版本: 0.30.0
* 發行者: Kiss Tamás
* VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

---

# 天下程式都在這 - GitHub
![GitHub](https://upload.wikimedia.org/wikipedia/commons/c/c2/GitHub_Invertocat_Logo.svg)

## GitHub (X) GayHub (O)

GitHub 是全球最大的程式碼託管平台（多少男性為了一個 PR 頭髮掉滿地 QQ），目前隸屬於微軟公司旗下。

## Open Source

開源(Open Source)指的是公開發布程式碼的方式,它允許任何人都可以自由使用、閱讀、修改和分享這些程式碼。

開源軟體的特性包括:

* 免費使用與分享 - 任何人都可以免費下載使用開源軟體,並且自由分享給其他人。
* 可公開存取源碼 - 開源軟體的原始程式碼對所有人開放和透明,任何人都可以查看與研究。
* 可修訂與再散布 - 任何人都可以依自己的需要修訂和修改開源軟體的程式碼,並且可以再散布這些衍生作品。
* 鼓勵共同開發 - 開源軟體鼓勵開發者一同參與,通過程式碼審查,錯誤回報等協作改進軟體。
* 範例與教材 - 很多開源軟體自身就是很好的學習教材,可以幫助你學習技術與開發技能。

開源運動推動了現代社會的技術創新與共享。很多開源專案最終演變成廣受歡迎並商用化的產品。開源精神鼓勵人們技術上協作共享,進而推動人類各領域的發展。


## GitHub 的功能

* 版本控制和協作 - GitHub 是以 Git 為基礎的版本控制系統。它提供了強大的分支和合併功能,可以有效管理專案中的修訂和更新。同時也支持團隊協作,多人共同貢獻於一個專案。
* 存放庫和工具 - GitHub 提供了自由和私有存放庫,可以儲存程式碼、文件、圖片等不同資料。它也提供了強大的工具,像 Projects、 Wiki、Issue 等,可以有效管理專案進度。
* 流程自動化 - GitHub 具備 CI/CD 功能,可以透過 Actions 自動執行程式碼測試、構建、部署等流程。
* 開放原始碼社群 - GitHub 是全球最大的開放原始碼社群平台,上面存放了上百萬個開源專案。任何人都可以 fork、星標和貢獻他人的專案。
* 代碼片段和資源 - GitHub 是代碼片段和其他開發資源的寶庫。你可以在上面找到各類語言的程式碼範例和學習資源。
* 其他功能 - GitHub 還提供了包括 Wiki、Gist、Pages、Discussions、Marketplace 等多種功能,可以滿足開發者的各種需求。

> 欸但我們沒有要用到這麼多功能啦
> [name=林奇葦]

## Repository

Repository,也稱為倉庫或存放庫,是 GitHub 用來存放專案的地方。每個專案都有一個與之對應的倉庫,用來存放專案的所有檔案和資料。

在 GitHub 上,倉庫有兩種類型:

* Public 公開倉庫:任何人都可以查看和 fork 此倉庫。公開倉庫適用於開源專案。
* Private 私有倉庫:只有您和指定的協作者才能查看此倉庫。私有倉庫需要付費訂閱,適用於私人或商業專案。

倉庫包含了:

* 專案檔案:像程式碼、文件、圖片等。
* 提交記錄:專案所有檔案的修改記錄。
* 分支:專案不同開發線的分支管理。
* 版本:專案不同修改版本的記錄。
* Issue:專案的問題管理和追蹤系統。
* Wiki:專案的文件和教學管理系統。
* Readme (讀我讀我!)檔案:專案的說明文件。

要使用一個倉庫,你需要先 Fork 或 clone 它到你的帳號下。Fork 是複製一個倉庫到你的帳號,clone 是將倉庫下載到本地端。接著你就可以查看專案的內容,並提交 pull request (aka PR) 將你的修改同步回原倉庫。

## littlelink
![littlelink](https://camo.githubusercontent.com/11dc516e04211ff20b250cb709cdb29e39ca907034287942aa8fa280286c0690/68747470733a2f2f63646e2e636f74746c652e636c6f75642f6c6974746c656c696e6b2f6c6974746c656c696e6b2e676966)

LittleLink 是一個開源的 Linktree 替代方案。它提供 60 多種社群媒體品牌按鈕,並持續增加中。[README.md](https://github.com/sethcottle/littlelink/blob/main/README.md)

### 下載教學
下載地址：[點我直達 Repo](https://github.com/sethcottle/littlelink)

點開大大的，綠色的 code 按鈕
![](https://hackmd.io/_uploads/HJibi3j82.png)

選擇 Download ZIP 下載壓縮檔
![](https://hackmd.io/_uploads/S1mfi2oUn.png)

我猜有人不會解壓縮：[7-zip](https://www.7-zip.org/download.html)

### 目錄結構

![](https://hackmd.io/_uploads/SyK-2no82.png)

* .gitignore - Git 版本控制忽略的設定檔案
* LICENSE.md - 專案授權條款文件
* README.md - 專案說明文件
* css/ - 存放 CSS 樣式表文件夾
* fonts/ - 字型文件夾
* images/ - 圖片文件夾
* index.html - 專案的 HTML 主檔案
* privacy.html - 隱私權政策頁面

> MIT License 是一種開源授權條款,允許任何人免費使用、修改、散布軟體的原始碼,甚至也可以在商業上使用。唯一的限制是必須保留原始碼的授權聲明,以及免除原作者的責任。它是一款對開發者和商業最友好的開源授權條款。
> [name=claude]

### Index.html

#### Head
```htmlembedded=
<head>

  <!-- Page Information
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>LittleLink</title>
  <meta name="description" content="https://littlelink.io">
  <meta name="author" content="Seth Cottle">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">

    <!-- Themes:
            Auto:   css/skeleton-auto.css
            Light:  css/skeleton-light.css
            Dark:   css/skeleton-dark.css
     -->
    <link rel="stylesheet" href="css/skeleton-auto.css">

    <!-- Brand Styles -->
    <link rel="stylesheet" href="css/brands.css">


  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/littlelink.png">

</head>
```

#### Image
```htmlembedded=
<!-- Your Image Here -->
<img src="images/littlelink.svg" class="avatar" srcset="images/littlelink.svg 2x" alt="">
```

#### Title
```htmlembedded=
<!-- Title -->
<h1 role="heading">LittleLink</h1>
```

#### Bio
```htmlembedded=
<!-- Short Bio -->
<p>An open source DIY <a href="https://linktr.ee" target="_blank" rel="noopener" role="link">Linktree</a> alternative.</p>
```

#### Buttons
```htmlembedded=
!-- Default LittleLink -->
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/littlelink.svg" alt="">LittleLink</a><br>
```

#### Footer
```htmlembedded=
          <!-- 
            Footer:
            This includes a link to privacy.html page which can be setup for your Privacy Policy.
            This also includes a link to the LittleLink repository to make forking LittleLink easier.
            You can edit or remove anything here to make your own footer.
        -->
          <p>Copyright 2023 © Wei.</p>
        </div>
      </div>
    </div>

    <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  </body>
</html>
```

#### [7wei.xyz 的 repo](https://github.com/l7wei/7wei.xyz)

### Coding Time!

---

# 讓我們的網頁上雲吧！ - Cloudflare
![Cloudflare](https://upload.wikimedia.org/wikipedia/zh/thumb/a/a2/Cloudflare_logo.svg/1200px-Cloudflare_logo.svg.png)

## 蝦？雲火焰是啥？

[Cloudflare](https://www.cloudflare.com/zh-tw/) 是一家免費 CDN(內容傳遞網路)和 DNS(域名系統)服務商。它提供了許多功能,可以幫助你:

* 加速網頁載入速度:Cloudflare 有全球範圍的伺服器網路,可以快取你的靜態內容並將其傳遞給最接近使用者的伺服器。這可以大幅減少網頁載入時間。
* 增強網頁安全性:Cloudflare 提供 WAF(應用安全防火牆),可以防禦 DDoS 攻擊和惡意流量。它也提供免費 SSL 憑證,可以為你的網域啟用 HTTPS。
* 簡化網頁管理:Cloudflare 提供 DNS 服務,你只需要將 DNS 記錄指向 Cloudflare,就可以管理多個網域的 DNS 設定。它也提供 Pages 服務,可以直接在平台上建立靜態網頁。
* 分析網頁流量:Cloudflare 提供可視化的網頁分析,可以查看你網頁的瀏覽量、分析國家和設備使用量等等。
* 進階功能:Cloudflare 還提供 Argo 等內網服務,以及 Workers 等 Serverless 平台,可以實現更多功能。

> 欸但我們還是沒有要用到這麼多功能啦
> [name=林奇葦]

## 一些奇怪的名詞

### CDN
CDN 是內容傳遞網路(Content Delivery Network)的縮寫。它是一個包含多個伺服器和資料中心的分散式網路。CDN 的主要功能是將靜態內容(像圖片、視頻、資料夾等)分發並快取到最接近使用者的伺服器上。這樣可以:

* 減少網頁載入時間:因為內容已儲存在近端的伺服器上,不需要從遠端主機載入。
* 减轻主機壓力:由於大部分靜態內容都會在 CDN 上快取,主機只需要處理個別的請求。這可以減少對主機的流量壓力。
* 提高網頁安全性:CDN 也可以防禦 DDoS 攻擊並過濾惡意流量。
* 改善網頁可靠性:透過在不同地理位置部署多個伺服器,CDN 可以即使某個伺服器失效,也可以確保網頁正常運作。

### DNS
DNS 是域名系統(Domain Name System)的縮寫。它將人們容易記憶的域名對應到電腦可以理解的 IP 位址。例如,當你在瀏覽器中輸入 example.com 時,DNS 會將其對應到 93.184.216.34 這樣的 IP 位址。瀏覽器才可以根據 IP 位址找到 example.com 網站的伺服器。

- https://www.nthu.edu.tw/
- 140.114.69.135

## Cloudflare Page
Cloudflare Pages 是 Cloudflare 提供的一項服務,可以直接在平台上建立和部署靜態網頁。

使用 Cloudflare Pages,你的網頁可以直接部署在 Cloudflare 的全球 CDN 網路上,不需要自己購買和管理伺服器。透過 Pages 管理面板,你只需要關注網頁的內容創作,系統會自動完成構建和部署的流程。

### Demo
#### 在主選單打開 Workers 和 Pages 頁面
![](https://hackmd.io/_uploads/HyDckpsL3.png)
#### 建立一個應用程式
![](https://hackmd.io/_uploads/ByloJ6jUh.png)
#### 記得選 Pages
![](https://hackmd.io/_uploads/Hyyn1TsIn.png)
#### 上傳你的資產
![](https://hackmd.io/_uploads/ryD31aiLn.png)

## Step by step

一個網域需要 DNS 來指向伺服器,才可以讓使用者訪問。透過 Cloudflare,我們可以使用 Pages 服務直接建立網頁並將其部署,同時利用 Cloudflare CDN 提高載入速度和安全性。littlelink 則提供了簡單的界面來快速建立連結頁面。

以 https://wei.nthu.xyz 這個網域為例:

* 網域: wei.nthu.xyz 是一個二級域名,由 .xyz 頂級域名和 wei 二級域名組成。
* DNS: wei.nthu.xyz 這個域名需要指向一個 IP 位址或網頁伺服器,這是透過 DNS 記錄完成的。DNS 將 wei.nthu.xyz 對應到 Cloudflare 的 IP 位址。
* littlelink: littlelink 是一個開源的連結樹工具。在這個例子中,littlelink 被用來建立 wei.nthu.xyz 這個網頁的內容和界面。
* Cloudflare: Cloudflare 被用來作為 wei.nthu.xyz 的 CDN 和 DNS 服務。
* Cloudflare Pages: wei.nthu.xyz 是使用 Cloudflare Pages 服務直接建立並部署的。Cloudflare Pages 平台可以直接建立 littlelink 產生的靜態頁面,並自動與 Cloudflare CDN 整合,提供快速的網頁體驗。

## Bonus: _redirects

_redirect 文件是一個特殊文件。它可以定義網頁的重新導向規則。
_redirect 文件中的每行都代表一條重新導向規則,格式為:

### Example
```源路徑 目標路徑 轉址規則```

```
/ig  https://www.instagram.com/24.7wei/  301
/instagram  https://www.instagram.com/24.7wei/  301

/fb  https://www.facebook.com/24.7wei/  301
/facebook  https://www.facebook.com/24.7wei/  301
```

> 後面的數字 301 和 302 都是 HTTP 狀態碼,分別代表永久重定向和暫時重定向。
> [name=claude]