前言

現在你的網站還只能跑在你的電腦上,其他人是看不到的,那我們現在就來把他送上雲端吧!

1. 建立 GitHub Repository

  1. 用 GitHub 放你的網站程式碼,所以我們需要在 GitHub 建立 repo

    github-new-repo.png

    cyanSky 完成

    github-cyan-sky-repo.png

  2. 複製 repo origin https://github.com/chi811008/cyanSky.git

    github-cyan-sky-repo-origin.png

  3. 回到你本機的網站資料夾:打開終端機,進入你的網站資料夾

    cd cyanSky # cd <你的網站路徑>
    
  4. 準備把網站推上 GitHub 前,先添加 .gitignore 檔案,它可以讓你設定一些不想推上去 repo 的檔案

    echo "/public" >> .gitignore
    
  5. 把 GitHub 遠端的位置 https://github.com/chi811008/cyanSky.git 加入你地端的資料夾

    git remote add origin https://github.com/chi811008/cyanSky.git # 把 origin 後面換成你的 origin 唷!
    
    # 建立主分支 main branch
    git branch -M main
    
    # commit and push code to master branch
    git add .
    git commit -m "Initial commit"
    git branch --set-upstream-to=origin/main main
    g rebase origin/main
    git push -u origin main
    
  6. 這邊可能會叫你驗證,確認帳號對,登入就好囉!

    github-account-verify.png

  7. 成功推上去以後,再去 repo 看看你的檔案們應該都上去囉!

    github-cyan-sky-repo-files.png

Git Repo 完成

2. 用 CloudFlare Page 部署

  1. 登入 CloudFlare

  2. 在 Account Home 選 Workers & Pages > Pages > Connect to Git.

    cloudflare-pages-connect-to-git.png

  3. 連結 GitHub

    cloudflare-pages-connect-to-git-2.png

  4. 選擇網站 repo

    cloudflare-pages-connect-to-git-choose-repo.png

  5. 設定值 Framework > Build output directory > Variable name > Save and Deploy

    cloudflare-pages-deploy-setting.png

    Configuration optionValue
    Production branchmain
    Build commandhugo
    Build directorypublic

    PaperMod 需要設定 HUGO_VERSION = v0.140.1 不然會 build 失敗

  6. 部屬成功會看到下圖

    cloudflare-pages-deploy-success.png

  7. 回到 Workers & Pages 就可以看到你剛部署好的網站囉!

    cloudflare-pages-deploy-success-2.png

  8. Visit 點下去 https://skyaching.pages.dev/

    cloudflare-pages-deploy-success-website-preview.png

    當啷~你的網站就可以讓全世界都看到囉~

    P.S. 如果你點下去是 NOT FOUND,要等一下,約莫 10 分鐘後,網站才可以被訪問。讓子彈飛一會兒~

恭喜網站上雲端 🎉

下一篇 《手把手打造你的專屬部落格之三 — 讓網站有自定義的網域名稱》 來把網站名稱改成你專屬的名字吧!

Reference

  1. Host On CloudFlare Pages

  2. CloudFlare Guide

  3. Push your Hugo website to GitLab