撰文動機 因為我是忘忘人所以做個筆記😀 安裝步驟 用 Vite 建立新專案 安裝 Vue Router & Pinia 安裝 Element plus 加載套件 開始實作 用 Vite 建立新專案 npm create vite@latest 接下來按照步驟建立專案就好 專案名稱 選擇框架 是否使用 Type Script Done 安裝 Vue Router & Pinia 請自己按需要增減 npm install pinia vue-router@4 --save 安裝 Element plus npm install element-plus --save 加載套件 建立 vue router 檔案 import {createRouter, createWebHistory} from 'vue-router' import HelloWorld from '@/components/HelloWorld.vue'; export const router = createRouter({ history: createWebHistory(), routes: [ {path: '/', component: HelloWorld}, ], }); 安裝完之後進到 main....

目的 在以前的版本中曾經使用過以 @ 代替 ./src 的語法，但是在新的版本突然不支援了，於是去查了一下該如何加到專案中。 方法 需要在兩個檔案中建立 alias，分別是 tsconfig.json 和 vite.config.ts。 // tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, // 省略... // 重點 "paths": { "@/*": [ "./src/*" ] } // 重點 } } // vite.config.ts export default defineConfig({ plugins: [vue()], // 重點 resolve: { alias: { '@': '/src' } } // 重點 }) 如何 import // ts file import {router} from "@/router.ts"; // component import App from '@/App....

前言 使用 Traefik 可以很簡單的建立反向代理伺服器，並且自動獲取 SSL 證書，所以嘗試記錄一下。 預備步驟 安裝 docker & docker-compose 在伺服器上。 步驟 建立 Docker 網路 準備好 Traefik 設定檔 建立 Docker compose file 設定反向代理 建立 Docker 網路 透過以下指令建立 docker network，在後面的 docker compose file 會用到。 docker network create <network-name> # docker network create traefik_network 準備 Traefik 設定檔 先寫好 Traefik 設定檔，檔名為 traefik.yaml，要放在 /etc/traefik 中，這裡的設定檔沒記錯應該有參考到網路上的某篇文章，知道是哪篇的或是作者再麻煩聯繫我，我會標注的 QQ。 api: # 關閉 Traefik 8080 port insecure: false # 啟用 Traefik 的 dashboard dashboard: true # 設定 Traefik 的 providers providers: docker: endpoint: "unix:///var/run/docker....

目的 紀錄建立一個 EC2 實體時的步驟，因為相較其他家 VPS 多了一些不一樣的設定，所以寫一點簡單的筆記。 名詞解釋 t2-micro: EC2 的其中一種類型，t 是類型，2 是第幾代，micro 是 size。 Security group: 用來設定資料的傳入以及傳出規則，基本上就是防火牆，只是可以套用多條到一個群組，在建立 Instance 的時候就可以直接套用多個群組。 步驟 輸入 EC2 名稱 選擇 Image or Application 選擇 Instance type 建立 / 選擇 Key pair for ssh login 建立 / 選擇 Security group 設定 Storage 其他進階設定 實作開始 輸入 EC2 名稱 基本上沒什麼問題，取個你認得名字就好。 選擇 Image or Application 這裡有一個專有名詞叫 AMI (Amazon Machine Image)，基本上和 OS 的 Image 是一樣的東西，有各種 Linux，也有 macOS 和 Windows，可以直接選擇 Amazon Linux 就好。...

前言 仔細看了一下 stack 這個主題還能加入什麼小工具，發現它支援很多不同的留言系統，在簡單比較之後決定使用 Utterances ，最簡單也可以整合到 GitHub 上。 步驟 建立一個 Public GitHub Repo 在 config.yaml or hugo.toml 中修改以下內容 params: comments: enabled: true provider: utterances utterances: repo: <github-username>/<github-repo-name> issueTerm: og:title theme: github-dark [params.comments] enabled = true provider = "utterances" [params.comments.utterances] repo = "<github-username>/<github-repo-name>" issueTerm = "og:title" theme = "github-dark" 參考資源 Utteranc 官方網站

前言 在我使用的 Stack Theme 中可以使用各種小工具，像是文章類別或是標籤雲等等，但是加入文章搜尋器需要多幾個步驟，稍微研究了一下，簡單記錄一下如何加入。 步驟 建立 content/page/search 的資料夾。 在 content/page/search 中建立 index.md 輸入以下內容 --- title: "Search" layout: "search" outputs: - html - json # 如果想在 sidebar 下面加上 search page link # 把下面這段取消註解 # menu: # main: # weight: -60 # params: # icon: search --- 修改 themes/hugo-theme-stack/config.yaml 如下 params: widgets: homepage: - type: search 最後重新開啟伺服器就可以看到小工具加成功了🎉

前言 原本以為設定檔只能在主題的 config.yaml 中設定，後來發現可以統一併到 hugo.toml 裡面，但是 stack 這個主題好像沒有提供 toml 語法的設定檔，所以我修改好了一份 toml 格式的設定檔。 範本 baseURL = "https://sample.base-url.com/" languageCode = "zh-tw" title = "sample title" theme = "hugo-theme-stack" [params] mainSections = ["posts"] featuredImageField = "image" rssFullContent = true [params.footer] since = 2023 [params.dateFormat] published = "2006-01-02" lastUpdated = "2006-01-02" [params.sidebar] compact = false emoji = "" subtitle = "" [params.sidebar.avatar] enabled = true local = true src = "images/avatar.png" [params.article] readingTime = true [params....

目的 只透過 notion 寫筆記好像沒辦法讓自己的筆記有人看到，所以想試試看用 hugo 會不會比較有動力 選擇 我參考的是這位大大提供的比較，由於只需要最簡單的 Markdown，也不需要其他多餘的功能，所以就選擇目前最多星星的 Hugo 了 步驟 先到 Hugo 的官網安裝好 hugo 和 git 痾.. 就這樣 😀 指令 建立新網站 hugo new site quickstart cd quickstart git init run local server 本來想說想打中文，但是”運行本地伺服器”實在太怪了 🤣 # run server without draft hugo server # run server with draft hugo server -D 新增主題 # sample command git submodule add <github-url> themes/<theme-name> echo "theme = '<theme-name>'" >> hugo.toml # sample git submodule add https://github....