Firebase - Hosting 建立自己的簡易網站 By GitHub

各位大大想如果有網頁開發基礎( Html JavaScript Css )
但是不太懂要如何買伺服器去架設
那 Firebase Hosting 是你的好選擇
但是要注意會有容量限制請自行注意

為什麼要有 GItHub 的存在
因為 Firebase 部署上去
是無法把所有的資源下載檔案( 壓縮檔 )下來的
除非自己線上一個一個抓
所以過了一段時間自己電腦程式碼遺失就容易造成無法挽回悲劇

前置準備

• 本地端要有 Node、Firebase-Tool 工作環境
• Firebase 帳號
• Github 帳號

操作步驟

1. Firebase 建立( 新 )專案( hosting-deploy-by-github )
   
   
   
2. Github 建立 Firebase 對應的專案 Repository( hosting-deploy-by-github )
   
   
   
3. 從 Github Clone Repostory 到本地端
   
   
   
   
4. 開啟命令提示字元
   
   
5. 登入 Firebase
   PS: 要先登出的原因在於避免暫存影響到後續操作
   firebase logout
   firebase login
   firebase init
   
   
6. 選擇建立好的專案項目
   
   
   
   
7. 是否建立對外公用資料夾及是否建立首頁
   
   
   
8. 是否使用 GitHub 設定自動建置和部署？
   
   
   
9. 輸入對應的 Repository 名稱 ( AAA/hosting-deploy-by-github )
   
   
   
   
10. 啟動工作時候是否要執行 Script? No( 常用於 Vue、Angular 等專案前置作業)
    
    
    
    
11. 是否設定提出 PR 合併後自動部署並確認對應分支名稱
    PS: 此分支是直接上正式環境，如要模擬請開分支於本機驗證
    
    
    
12. 最後只要對此 Github Reporsitory 進行操作的部署即可
    PS: 必須對應到您設定的監聽分支為主
    git add .
    git commit
    git push
    
    
13. 登入 Github Action 確認分支完成後狀態是否為綠色打勾
    
    
    
    
14. 登入 Firebase Hosting 建立網站網址內容是否已經更新，如果有就代表成功囉
    
    
    
    

PS: 設定 firebase.json

參考資源：

Deploying Your Website to Firebase Hosting from GitHub

[ 筆記 ] Firebase Deploy (Hosting) Part 2: GitHub Actions

開箱28:新手搭建～Vue+Vite+GitHub部署到Firebase Hosting

歡迎轉載，請註明出處。

Html - Padding 和 Margin 有什麼差異 What's different Padding and Margin ?

目的

在開發前端頁面時候，我們常常會遇到 Padding 或是 Merge，功能都是間距不是嗎？
為了能夠讓各位能夠理解這兩個屬性我們就來分析吧

分析表

Feature	Padding (內邊距)	Margin (外邊距)
功能	控制 內容 與 邊框 之間的距離	控制 元素 與 其他元素 之間的距離
位置	在邊框內部，包圍內容	在邊框外部，包圍整個元素
影響背景顏色	會繼承元素的背景顏色	不影響（完全透明）
是否改變元素尺寸	是，會讓元素變大	否，不會改變元素本身的尺寸
應用範例	加文字與邊框的間距，避免內容擁擠	增加元素之間的距離，讓佈局更整齊
CSS 語法範例	padding: 20px;	margin: 10px;
影響其他元素布局	不會影響周圍元素	會影響相鄰元素的距離

結論

Padding：對內間距

Margin：對外間距

歡迎轉載，請註明出處。

Git - Git 和 GitHub 有什麼差異 What's different Git and GitHub - 2?

目的

我們常常聽到 Git 和 GitHub 在我們的工作環境，但這兩個時常讓我們搞不清楚各個功用到底是什麼？就像是 Java 和 JavaScript 有什麼關係，這是一樣的嗎？以下就讓我們了解其中的差異吧！

分析表

名詞說明

本機：個人電腦主機

雲端平台：線上硬碟( Google Drive、DropBox... etc )

協作：同時多人對同一個專案開發

特性	Git	GitHub
基本概念	版本控制系統 用來跟蹤和管理程式碼的變更	雲端平台 用來存放和分享使用 Git 管理的程式碼庫
功能	基本功能 提交、分支、合併和回退等操作	除了 Git 的基本功能外 還有遠端操作項目管理工具
範圍	本機安裝的軟件 管理本機程式碼	雲端平台 可以在任何地方通過網絡訪問和管理倉庫
協作方式	本機版本控制 通過本機網絡協作	提供網絡上的協作功能，如 pull requests、code reviews 和 issues
例子	小明在自己的電腦上使用 Git 來管理程式碼	小明和小紅通過 GitHub 在不同地方一起開發項目

總結

• Git：是一個版本控制工具，幫助開發者在本機管理程式碼的變更。
• GitHub：是一個基於 Git 的雲端平台，提供協作和項目管理功能，使得團隊開發更加方便。

歡迎轉載，請註明出處。

Git - 為什麼要用 Git 進行版控 Why use to Git by Source Code control - 1?

目的

因為各軟體公司都把 Git 的使用都列為加分的依據，但是與其說加分，倒不如說這是在開發上的良藥，對開發者來說是有益的。

所以利用這機會寫下自己對 Git 的想法，能有機會讓分享給各位也是一個福音。

用途

在開發過程因為有可能會遇到多人共同維護同一個專案，檔案內容會因為需求、拋錯...等很多種情況而異動程式碼，但是但是，如果遇到以下的窘境，你們該怎麼做？

1. 開發完成一個需求後，過半年後，要如何和新的程式碼哪裡有差異？

2. 同一個專案有多個需求要開發，但是要分批在不同的時間上線？

3. 有問題的程式碼是誰開發的，怎麼追蹤開發紀錄？

4. 我這次開發的內容和已經上線的差異？和不同環境的程式碼差異？

5. 我和其他兩位共同開發同一份程式碼，我要如何確認對方寫的如何和我的沒衝突？

以上當然只是比較常見的案例，其實還有很多例外可循。

你 / 妳也是用檔案複製和貼上進行保存等動作嗎？其實也可以用以上的範例進行測試，看能不能是用以上的情境。

所以我們就會有一個版控工具，讓我們在開發上更加的有利也能掌握狀態。

歡迎轉載，請註明出處。

Css-基本認知( 四 )_佈局方法

我們在上一篇有介紹 : 基本樣式

接下來要如何去佈局您的畫面
通常我們比較常拿 Div ( 塊狀模型 ) 來做區塊
然後再去排 Div 的位置與大小
如下圖 :

什麼是 Div ( 塊狀模型 ) ?
通常我們用來做不同的區塊特性
通常 Div 預設是直接佔用一整行

在網頁中，我們有幾種佈局的方法 ;

• 流動模型 ( Flow )
• 浮動模型 ( Float )
• 層次模型 ( Layout )

浮動模型

剛剛有提到 Div 是直接佔用一整行

那如果我們要呈現像上方的圖( 樣式 )就可以用浮動模型 ( Float )

( * 如果有兩個以上的塊狀，要被調整的前一個塊狀要設定 )
例如上圖 : Div_2 要靠 Div_1 右邊，所以要對 Div_1 設置

用法	說明	備註
float:left;	調整 Div 區塊對應位置	left ( 靠左 )、right ( 靠右 )

層次模型

模型層	用法	說明
絕對位置	position:absolute;	模塊移動到對應的座標位置
相對位置	position:relative;	模塊移動到對應的座標位置 但實際是占用到原本的空間
固定位置	position:fixed;	模塊移動到對應的座標位置 但不隨網頁的滾動產生移動

<!DOCTYPE html>
<html>
<style>
#box1{
    width:150px;
    height:150px;
    border:2px red solid;
    position:absolute; // 可更改參數看這三種的差異
    left:50px;
    top:50px;
}
</style>
<body>
    <div id="box1"></div>
    <div>Hello world !!!</div> 
</body>
</html>

歡迎轉載，請註明出處。

Css-基本認知( 三 )_基本樣式

前幾篇我們有介紹甚麼是 Css 、宣告樣式

這一篇最主要是最常用到的樣式
比如說是 : 文字、粗細、顏色...等。

List :

• 文字
• 邊框
• 填充 ( Padding )
• 邊界 ( Margin )
• 填充和邊界的差異 ?

1 . 常用於文字系列

用法	說明	備註
font-family:"Microsoft Yahei";	文字字體
font-size:"12px";	文字大小
color:"#555";	文字顏色
font-weight:bold;	粗體字
font-style:italic;	斜體字
text-decoration:underline;	底線
text-decoration:line-through;	刪除線
text-indent:2em;	字句空兩字
line-height:2em;	上下行間距
letter-spacing:20px;	文字間距
text-align:center;	對齊方式	felt、right、center 模塊也適用

2 . 邊框系列

用法	說明	備註
border-width:3px;	線寬
border-style:solid;	邊框形狀	dashed( 虛線 )、 dotted( 點線 ) solid( 實線 )
border-color:yellow;	邊框顏色

一般邊框

div{
    border : 3px solid yellow;
}
等於
div{
    border-width:3px;
    border-style:solid;
    border-color:yellow;
}

特殊邊框

border-top:1px solid red; // 上方
border-right:1px solid red; // 置右
border-left:1px solid red; // 置左

3 . 填充

上右下左
div{padding:10px;}

上下 、 左右
div{padding:10px 20px;}

上右下左( 順時針 )
div{padding:20px 10px 15px 30px;}
等於
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

4 . 邊界

上右下左
div{margin:10px;}

上下 、 左右
div{margin:10px 20px;}

上右下左( 順時針 )
div{margin:20px 10px 15px 30px;}
等於
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

5 . 填充和邊界的差異

padding 和 margin 最大的差別是 :
padding : 在邊框內。
margin : 在邊框外。


歡迎轉載，請註明出處。

Css-基本認知( 二 )_樣式宣告、選擇器

前一篇 :

那我們要如何去宣告 ?
那宣告的格式為何 ?

1 . 宣告樣式方法

選擇器 {
    <!-- 屬性 : 參數 ; -->
    樣式
}

2 . 我們知道公式後，要怎麼套用 ?

選擇器 : 簡單來說，我要把這樣式套用在哪裡。
樣式 : 字體大小、顏色...等。

接下來這篇介紹選擇器 :

• Html 標籤
• 物件名稱
• ID 名稱
• 子項選擇器
• 後代選擇器
• 通用選擇器
• 多組選擇器

1 ) Html 標籤

p{
   color:red;
}

2 ) 物件名稱 : 選擇器前面有加 "."

.setColor{
   color:red;
}
<span class="setColor">Tom</span>

3 ) ID 名稱 : 選擇器前面有加 "#"，但是 ID 多用於辨識元件或讀取參數

#setColor{
    <!-- 屬性 : 參數 ; -->
   color:red;
}
<span id="setColor">Tom</span>

4 ) 子項選擇器 : 某元件底下一層的元件 ( 只對一層 )，中間會用 : >

.ttable>li {
    <!-- 屬性 : 參數 ; -->
   border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

5 )  後代選擇器 : 某元件底下所有被選擇到的元件 : 中間會用 : _ ( 空白 )

.ttable li {
    border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

為了讓大家更能了解到 4 、 5 的差異

6 ) 通用選擇器 : 全部的標籤都會被套用到樣式，會使用 : *

*{
    border:1px solid red;
}

<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

7 ) 多組選擇器 : 共用相同的樣式，減少重複的風格樣式，會使用 : ，

h1,span{color:red;}

3 . 樣式權重

p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

同選擇器具權重 : 標籤遠近

<style>
p{color:red;}
p{color:green;} V
</style>

最重要 !important

<style>
p{color:red!important;} V
p{color:green;} 
</style>

歡迎轉載，請註明出處。

Css-基本認知( 一 )_CSS?

建議 : 此篇要有一些些 Html 的基礎會比較容易懂。

CSS 在網頁的角色定位 ?

可以參考此篇 : Html、Css、JavaScript是什麼關係?

回歸正題，我們在這裡就先統稱"樣式"

CSS 最大的功用是來幫我們網頁添加色彩

有時候也可以幫我們解決客戶一些奇怪的需求

( 咳咳... )

首先，我們要在哪裡宣告 ? ( 哪裡放置我們的樣式? )
有三種方式可用( 三選一；也可三種一起宣告同名，但會受到優先權影響 )

1 . 直接在標籤內宣告，要添加 : "" 和 ; ，

<p style="font-size:12px; color:red;">大家好...</p>

2 . 在 Style 區塊宣告

</head>
<style type="text/css">
p{
   font-size:12px;
   color:red;
   font-weight:bold;
}
</style>
<body>

3 . 外部文件 : 指定檔案位置 ( .css )

<head>
    .
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

剛剛有提到，如果標籤 <p></p> 三種宣告方法都有設定樣式怎辦 ?
他會依照優先權 : 標籤內 > Style 區塊 > 外部文件

歡迎轉載，請註明出處。