雜工上線，花了四個晚上，調整網站

從0開始做出公司網站
(是不是應該要加薪XD)
一開始我先搜尋免費的空間來設立帳號
然後使用GPT提供資訊與我的版面想法
因為剛好有看到教學 【免費架設網站】使用GitHub建立網頁空間、發布

所以選用了GitHub

GitHub Pages 架設公司網站 = 0元，而且我要求響應式設計，這是目前網頁設計的基本配備💪

✅ 目前的狀態整理

• ✅ 有 GitHub 帳號
• ✅ 申請了 GitHub Pages 空間
• ✅ 想建置公司網站
• ✅ 要求網站具備「響應式設計」（可根據手機/平板/桌機自動調整版面）

請告訴我這些資訊，我就可以幫你產出 HTML + CSS：

1. 公司名稱/品牌名稱？
2. 網站需要的頁面：首頁／關於我們／聯絡我們／產品頁？
3. 網站風格偏好（簡約？科技？可愛？專業？）
4. 有沒有 Logo、品牌顏色或參考網站？

我提供了一個網站，解讀後
風格是：

• 簡約乾淨 ✅
• 全螢幕大圖片＋短句文案 ✅
• 滑動式分區導覽（One Page Style） ✅
• 行動裝置自動調整（響應式） ✅
• 固定導覽列＋平滑滾動 ✅

提供這些資料後，他就安排了
🔨 預計使用的技術：

• HTML + CSS（純靜態）
• Bootstrap 5（負責響應式）
• 平滑滾動（加點 JS）
• 可上傳至 GitHub Pages

🧪 DEMO 版網站預覽結構：

txt
複製編輯首頁區塊
└─ 大標語 + 背景圖（全螢幕）
關於我們
└─ 圖文左右區塊
服務項目
└─ 三欄式圖文介紹
聯絡我們
└─ 簡易表單 + 聯絡資訊
頁尾
└─ 公司名稱 + 社群 icon（選擇性）

這些真是槓槓的基本標配，但我不會寫程式，就先順著它的安排試著操作
然後我想到很重要的一點 就是要符合SEO (我其實不懂這些，但是之前的公司我負責管理官網，接洽的設計公司有提起過，於是我就請GPT也檢查了這部分)

📌 如果你未來想讓網站出現在 Google 搜尋

你需要做到：

• ✅ 網站結構清晰（heading 階層正確）
• ✅ 每一個主要區塊有 id 可定位
• ✅ meta tag + og 標籤（社群分享優化）
• ✅ 每頁一個明確的焦點關鍵字
• ✅ 圖片 alt 描述
• ✅ 加入 Google Search Console 驗證（GitHub Pages 也可）

然後 GPT有說明 GitHub 內建或支援的建站方式
🥇 方式一：使用 GitHub Pages + Jekyll（內建）

✅ 優點

• 官方支援，穩定性佳
• 有很多免費模板（主打部落格、個人簡介、文件網站）
• 支援 Markdown 編輯，不用會 HTML 也能寫網頁
• 可設定 SEO、Google Analytics、favicon 等

⚠️ 缺點

• 模板風格偏向「技術人、極簡風」
• 中文支援普通（但可調整）
• 若要改成公司形象頁，要改模板、CSS，有點技術門檻

💡 適合你嗎？

👉 適合喜歡簡單模板、內容導向的公司（像工程公司、顧問、設計師）

🥈 方式二：用 GitHub Pages + Hugo / Next.js / VitePress 等框架

這些框架可以配合 GitHub Pages 部署，但需要你本地建置、打包再上傳。

✅ 優點

• 風格自由、彈性大
• 很多免費漂亮主題（例如 Hugo 有商業主題）
• 可做成企業網站、Landing Page、部落格等

⚠️ 缺點

• 需要你電腦裝 Node.js / Git
• 打包、部署流程需要學習
• 開發時間比純模板久

💡 適合你嗎？

👉 適合有前端協助、或願意摸一點技術的人（你也可以叫我幫你建）

🥉 方式三：使用 GitHub 支援的 網站生成器服務

像是：

工具特點Stackbit拖拉式建站，直接連 GitHub Pages，自動部署Netlify + GitHub可接 Hugo、Jekyll，擴充性高Vercel + GitHubNext.js 官方推薦部署平台，速度快

這些都能直接連 GitHub，你的內容、網站變動會自動上傳、部署，非常適合懶得處理技術細節的人。

大家會怎麼選擇呢?
我以上三種都沒有使用，我看到一堆英文就頭大(翻譯頁面也很好用，但主要是不會操作)
所以我選擇 用GPT製作簡單的版面，並且要有英文語系
https://summerm12.github.io/mm/zh/index.html
於是我的 初稿 差不多就是這樣了
但 這僅是花了我一晚上，後續我覺得應該可以更進階(找死)，決定繼續研究調整版面
想讓他更美觀。

感謝您的收看，基本上線已完成。接下來續篇開啟我的挫敗之路(X)