Logo
發佈於

一小時打造個人部落格 - Vercel 架站教學

作者
  • avatar

這篇文章會分享如何使用 Vercel 和 Next.js 模板快速搭建個人部落格。只需要不到一小時，只要有基礎的程式開發能力就能完成！

事前準備

  1. 一顆想寫部落格及願意學習的心 ❤️
  2. 基礎的程式開發能力與英文閱讀能力
  3. 一個電子郵件帳號
  4. GitHub 帳號
  5. Vercel 帳號

步驟一：註冊 GitHub 帳號（免費方案）

  1. 前往 GitHub 官網
  2. 點擊右上角的 "Sign up" 按鈕
  3. 填寫：
    • 電子郵件
    • 密碼
    • 使用者名稱
  4. 完成電子郵件驗證

步驟二：註冊 Vercel 帳號（免費方案）

  1. 前往 Vercel 官網
  2. 點擊右上角的 "Sign Up"
  3. 選擇 "Continue with GitHub"
  4. 授權 Vercel 存取你的 GitHub 帳號

步驟三：選擇並部署部落格模板

  1. 前往 Vercel 並登入
  2. 點擊右上角 "Add New..." → "Project"
  3. 在 "Clone Template" 區塊中瀏覽部落格模板
在 Vercel 瀏覽模板
選擇喜歡的模板
部署模板
  1. 挑選喜歡的模板後，點擊 "Deploy" 按鈕開始部署
  2. Vercel 會自動幫你：
    • 將模板複製到你的 GitHub 帳號
    • 建立新專案
    • 開始部署流程
  3. 等待部署完成，這通常只需要 1-2 分鐘

步驟四：客製化你的部落格（以下以 Tailwind Nextjs Starter Blog 為例）

  1. 修改 data/siteMetadata.js：

    • 網站標題
    • 作者資訊
    • 社群媒體連結

  2. 更新 data/authors/default.md 的個人資料

  3. 在 data/blog 資料夾中新增文章

開始寫作！

恭喜你！現在你已經有了自己的部落格。要發布新文章很簡單，這裡提供兩種方式：

方法一：直接在 GitHub 網站上編輯

  1. 前往你的 GitHub 專案頁面
  2. 進入 data/blog 資料夾
  3. 點擊右上角的 "Add file" → "Create new file"
  4. 檔案名稱格式：YYYY-MM-DD-文章標題.mdx
  5. 複製以下範本到編輯器：
    ---
title: '文章標題'
date: '2024-03-01'
tags: ['分類標籤']
draft: false
summary: '文章摘要'
---

這是文章內容...
  6. 寫完後，滾動到頁面底部
  7. 填寫 commit message（例如：「新增文章：xxx」）
  8. 點擊 "Commit changes"
  9. 等待 1-2 分鐘，Vercel 會自動更新你的網站

要修改現有文章：

  1. 在 GitHub 上找到要修改的文件
  2. 點擊右上角的鉛筆圖示（Edit this file）
  3. 修改內容
  4. 點擊 "Commit changes"

方法二：使用 Git

如果你熟悉 Git 指令：

  1. 在 data/blog 建立新的 .mdx 檔案
  2. 加入文章的 frontmatter（標題、日期等資訊）
  3. 用 Markdown 格式寫作
  4. 使用以下指令推送到 GitHub：
    git add .
git commit -m "新增文章：xxx"
git push

無論使用哪種方式，Vercel 都會自動偵測變更並更新你的網站。

結語

完成以上步驟後，你的部落格就會部署在 xxx.vercel.app。 如果想要使用自己的網域（例如 www.myblog.com），可以參考下一篇文章。 現在你已經有了專屬的部落格，開始分享你的故事吧！