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

SummerM

發佈於3默murmur

2025/08/03 更新2025/08/03 發佈閱讀 6 分鐘

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

所以選用了GitHub

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

✅ 目前的狀態整理

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

然後開啟了GPT教學模式 (雖然已經先看過影片操作，但是有教學可以再複習，後面就不截圖了，可以直接先看教學影片)
再來就到了資料設定的部分
🧰 如果你想要我幫你快速產出一個範例公司網站架構

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

公司名稱/品牌名稱？
網站需要的頁面：首頁／關於我們／聯絡我們／產品頁？
網站風格偏好（簡約？科技？可愛？專業？）
有沒有 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
於是我的初稿差不多就是這樣了
但這僅是花了我一晚上，後續我覺得應該可以更進階(找死)，決定繼續研究調整版面
想讓他更美觀。