0606 個人專屬 Linktree 建置工作坊

--- 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="網頁標題" />  <meta property="og:description" content="網頁描述" />  <meta property="og:image" content="圖片網址" />  <meta property="og:url" content="網頁網址" />  <meta property="og:type" content="website" />  ``` 這些 ```<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>  <meta charset="utf-8"> <title>LittleLink</title> <meta name="description" content="https://littlelink.io"> <meta name="author" content="Seth Cottle">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="css/normalize.css">  <link rel="stylesheet" href="css/skeleton-auto.css">  <link rel="stylesheet" href="css/brands.css">  <link rel="icon" type="image/png" href="images/littlelink.png"> </head> ``` #### Image ```htmlembedded=  <img src="images/littlelink.svg" class="avatar" srcset="images/littlelink.svg 2x" alt=""> ``` #### Title ```htmlembedded=  <h1 role="heading">LittleLink</h1> ``` #### Bio ```htmlembedded=  <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=  <p>Copyright 2023 © Wei.</p> </div> </div> </div>  </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]