& Sageio 新手教室

新進行銷夥伴 · 用我們自己的專案來學

檔案、路徑、網址 —— 看懂它們,工作就順了

剛加入、對電腦上的「檔案」「路徑」「網址」這些名詞還不太熟?完全正常。這頁用 Sageio 專案裡真實的檔案和網址 帶你一次搞懂,最後有 50 題小測驗可以自己檢查。慢慢看,不趕。

模組 1

檔案與路徑

電腦裡的東西分兩種:資料夾(folder,用來裝東西的盒子)和 檔案(file,實際的內容)。資料夾裡可以再放資料夾,一層一層像俄羅斯娃娃。

主檔名 + 副檔名

一個檔案的名字通常長這樣,用最後一個「點」切成兩段:

best-meeting-translation-tools.mdx
主檔名(basename)— 這個檔叫什麼 副檔名(extension)— 這是哪種檔

副檔名(點後面那一小段)超重要 —— 它告訴電腦「這是哪一種檔」,也決定用什麼程式打開。改錯或刪掉副檔名,檔案就可能打不開。

.mdx我們部落格文章的檔(Markdown + 元件)。你翻譯/校對的文章就是這種。
.json結構化資料檔。各語言的翻譯字串(如 ja.jsonzh-TW.json)就放在這裡。
.mdMarkdown,一般是文件 / 規格檔(像 briefs、說明)。
.env隱藏檔,放密碼 / 金鑰 / 環境設定。極機密、絕不外傳、不進 Git。
.jpg .png圖檔。.png 可透明背景、.jpg 檔案較小適合照片。
.html網頁檔(就是這一頁的格式)。

隱藏檔(名字開頭是「.」)

檔名開頭就是一個點的檔(像 .env.gitignore)是「隱藏檔」,電腦預設不顯示,免得你誤刪重要設定。要看到它們:

記法:ls = list(列出);-a = all(全部,含隱藏)。

Finder 常用操作

絕對路徑 vs 相對路徑

「路徑」就是檔案的地址 —— 怎麼一層層找到它。有兩種寫法:

絕對路徑:從最頂端(/)開始寫全,像完整地址。放到任何地方都指同一個檔:

/Users/mingming.chen/dev/Projects/sageio-web/content/blog/best-meeting-translation-tools.mdx

相對路徑相對於你「現在所在的資料夾」來寫,像「從這裡往下走」。同一個檔,若你人在專案資料夾 sageio-web 裡,就只要寫:

content/blog/best-meeting-translation-tools.mdx
怎麼分辨? 開頭是 /(Mac)就是絕對;開頭直接是資料夾名(沒有 /)就是相對。Ming 給你的指令通常用絕對路徑,因為貼到哪都能用。

我們專案的資料夾長這樣

sageio-web/ ← 專案最外層資料夾 ├─ content/blog/ ← 部落格文章 │ ├─ best-meeting-translation-tools.mdx │ └─ japanese-english-meeting-translation.mdx ├─ i18n/messages/ ← 各語言翻譯字串 │ ├─ en.json zh-TW.json ja.json ├─ src/ ← 網站程式碼 └─ .env.local ← 隱藏檔(密碼/金鑰)

模組 2

網址與位址

網址(URL)也是一種「地址」—— 只是它指的是網路上的一個頁面。它一樣有結構,一段一段拆開看就懂:

https://sageio.net/blog/best-meeting-translation-tools
協定(scheme)— 用什麼方式連 網域 / 主機(host)— 連到哪個網站 路徑(path)— 那個網站裡的哪一頁

網域 vs IP 位址

電腦之間其實是用一串數字 IP 位址(像 76.76.21.21)找到彼此的。但數字難記,所以有網域名稱sageio.net)當「給人看的名字」,背後自動對應到那串 IP。網域 = 好記的名字;IP = 真正的門牌號碼。

localhost 和 port(埠)

有時你會看到這種網址:

http://localhost:8787
localhost — 你「自己這台電腦」 :8787 — 埠號(port)
你踩過的那個 bug 就是這個! 之前 Type app 一直連不上,原因是它去打 http://localhost:8787(=你自己電腦,什麼都沒有),而應該打正式伺服器 https://type-api.sageio.net。名字指錯地方,當然連不到。看懂這個,以後這類問題你一眼就認得出來。

網址的路徑,對應到檔案

還記得模組 1 那個 .mdx 檔嗎?網站上的網址路徑,其實就對應到 repo 裡的檔案:

網址: sageio.net/blog/best-meeting-translation-tools 檔案: content/blog/best-meeting-translation-tools.mdx

看到沒?網址最後那段,就是檔案的主檔名。改哪個檔,就會影響哪個網址的頁面 —— 這就是你的翻譯/校對會生效在哪裡。


模組 3

這些在你的工作裡長怎樣

把前面兩塊接回你實際會遇到的東西:

Ming 給你的指令 open -t "…"

open -t "/Users/mingming.chen/dev/Projects/sageio-web/content/blog/best-meeting-translation-tools.mdx"

open -t = 用文字編輯器打開後面那個檔。引號裡就是絕對路徑(模組 1 學過)。你把整行貼到終端機、按 Enter,那個檔就開了。

Issue 裡要你「檢查某個網址」

例如「確認 https://sageio.net/type200」。200 是網頁的狀態碼,代表頁面正常、載入成功;常見的還有 404(找不到頁面)、500(伺服器出錯)。看到 200 就是好消息。

你改翻譯,改的是哪個檔

你做 Type / 文章翻譯時,改的多半是 .json(翻譯字串)或 .mdx(文章)。改完透過 GitHub 開 PR,Claude 幫你檢查、Ming 核可後合併,網站就更新了。

一句話總結:檔案有「種類」(副檔名)和「地址」(路徑);網址也有「網站」(網域)和「哪一頁」(路徑);而網址的路徑,往往就對應到某個檔。看懂地址,就不會迷路。

模組 4

工程術語表

你在 issue、PR、跟工程師對話時會一直聽到這些英文詞。你不用會「做」,只要看到不心慌、知道大概在講什麼就夠了。都用我們的專案舉例。

A · 版本控制與協作(Git / GitHub)
repo 儲存庫 · repository
放一個專案所有程式碼+修改歷史的地方。我們的網站就是 sageio-web 這個 repo。
Git
底層那套「記錄每一次改了什麼」的版本控制工具。
GitHub
把 repo 放到雲端、大家一起協作+留歷史的平台。你開 issue、看 PR 都在這。
clone 複製
把雲端的 repo 完整抓一份到自己電腦上。
fork 分叉
把別人的 repo 複製成「你自己帳號底下」的一份,之後可以自由改。
branch 分支
從主線岔出的一條平行版本,讓你安心改東西不動到正式版;改好再合回去。
main / develop
常見的分支名。main 通常=正式上線的版本;develop=開發中。
commit 提交
一次「存檔+說明我改了什麼」。每個 commit 有訊息和一個代碼(hash)。
push / pull 推 / 拉
push=把本機的 commit 上傳到雲端;pull=把雲端最新的抓下來。
PR Pull Request · 拉取請求
「我改好了,請看能不能合併」的提案。你翻譯做完,就是開一個 PR。
merge 合併
把一條分支(例如你的 PR)併進另一條(例如 main)。
review / approve 審查 / 核可
合併前有人檢查、按「同意」。你的 PR 就是這樣被把關的。
issue 議題
GitHub 上一則「問題/待辦/提問」。你在 hub 發問就是開 issue。
monorepo 單一大倉
把多個相關專案放在同一個 repo 裡一起管理(相對於每個專案各一個 repo)。
.gitignore
一份清單,列出「不要放進 Git/不上傳」的檔,例如 .env 密碼檔。
diff 差異
兩個版本之間「改了哪幾行」的對照(紅色刪、綠色加)。
tag / release / version 版本
給某個版本貼一個名字,像 v1.2.0(數字越大通常越新)。
B · 上線與環境
deploy 部署
把改好的程式碼「送上伺服器、變成真的網站」。
build 建置
把原始碼打包成可以上線的成品;deploy 前會先 build。
production / prod 正式環境
真的用戶在用的線上版(sageio.net)。
staging 預備環境
跟正式很像、但給內部先測的環境;沒問題再上 prod。
rollback 回滾
上線後發現壞了,退回上一個正常的版本。
CI / CD
每次改動自動跑測試(CI)自動部署(CD)的機制。
C · 常聽到的一般術語
API
程式和程式之間「互相要資料/下指令」的介面。
endpoint 端點
API 的一個具體網址,像 type-api.sageio.net/v1/auth/exchange
environment variable 環境變數 · env
放在 .env 裡的設定值/密碼,程式執行時讀取。
token / API key 權杖 / 金鑰
一串代表「你有權限」的機密字串,極機密、不外流。
frontend / backend 前端 / 後端
前端=使用者看到的畫面;後端=背後處理資料的伺服器。
database 資料庫 · DB
有系統地儲存資料的地方,程式從這裡讀寫。
cache 快取
把常用的東西先存起來,下次更快拿到、不用重算。
SSO / OAuth 單一登入 / 授權
用一個帳號安全登入多個服務的機制(你測登入流程時遇到的)。
怎麼用這張表:不用背。看到某個詞想不起來,回來查一下就好。用久了自然記得。
小測驗

50 題 —— 檢查一下自己

點你覺得對的答案,會立刻告訴你對不對+為什麼。沒有時間限制,答錯也沒關係,看解釋就好。

分數 0 / 50