主要關於資訊的心得與記錄。https://vrabe.tw/https://vrabe.tw/blog/arduino-hygrothermometer-part-1-dht-22-sensors/https://vrabe.tw/blog/arduino-hygrothermometer-part-1-dht-22-sensors/如標題所說，DHT22 是一個可以測量溫度及濕度的感測器。雖然精準度比 DHT11 好，不過價格也比 DHT11 還要高的多，為了使測量能夠更加精確，所以這次採用 DHT22 感測器。而且模組化使得安裝能夠更簡單，不需要自己加上電阻，也不需要自己焊接電子零件，因此 DHT22 感測模組相較之下是更好的選擇。 DHT11 與 DHT22 的比較 …Tue, 08 Aug 2017 23:00:26 GMThttps://vrabe.tw/blog/arduino-hygrothermometer-part-2-ethernet-shield/https://vrabe.tw/blog/arduino-hygrothermometer-part-2-ethernet-shield/在本系列的第一篇文中，我們用 Arduino Uno 接收 DHT22 模組傳來的溫溼度訊號，並經由 USB 將 Arduino 輸出的資料顯示在電腦的序列埠監控視窗中。雖然這對示範 DHT11 或 DHT22 這種溫溼度感測器的功能來說已經很夠用了，不過如果感測器測出來的溫度和濕度只能用 Arduino 的 IDE 上看的話，那就太不方便了。所以要把資料傳出去，讓我們能在之後使用…Tue, 15 Aug 2017 22:00:16 GMThttps://vrabe.tw/blog/cpp-connect-to-mysql-database/https://vrabe.tw/blog/cpp-connect-to-mysql-database/MySQL Connector/C++ 是 MySQL 官方開發，讓 C++ 程式能與 MySQL 資料庫進行溝通的函式庫。 其實官方的說明已經寫得很詳盡了，不過還是從網站中修改出幾個常見的情況的程式碼。 在使用前記得： include header #include <cppconn/driver.h> //如果有用 prepared statement 的話 #include…Tue, 22 Aug 2017 23:18:30 GMThttps://vrabe.tw/blog/using-libcurl-in-c-or-cpp-in-linux/https://vrabe.tw/blog/using-libcurl-in-c-or-cpp-in-linux/如果要在 Linux 從網路上下載檔案的話，可以使用 cURL。如果要在程式中使用的話，我們就需要它的函式庫版本－libcurl。 編譯與安裝 編譯需要的原始檔可以在官網下載。 其中一種下載方式是輸入指令： 下載：wget https://curl.haxx.se/download/curl-7.54.1.tar.gz 解壓縮：tar zxvf curl-7.54.1.tar.gz 在…Tue, 01 Aug 2017 12:00:34 GMThttps://vrabe.tw/blog/banks-supporting-linking-triple-stimulus-vouchers-to-debit-cards/https://vrabe.tw/blog/banks-supporting-linking-triple-stimulus-vouchers-to-debit-cards/振興五倍券 振興五倍券是台灣在 2021 年發行的票券。國民可選擇領取價值 5000 元的實體券，或是綁定支付工具消費 5000 元後獲得 5000 元回饋。以下列出可用簽帳金融卡（Debit 卡）綁定五倍券的銀行： 有標明可用簽帳金融卡綁定的銀行： 國泰世華銀行 台新國際商業銀行 華南銀行 陽信商業銀行 台中商業銀行 彰化商業銀行 中國信託商業銀行 中華郵政 第一商業銀行 臺灣中小企業銀行 …Fri, 03 Jul 2020 02:31:16 GMThttps://vrabe.tw/blog/install-ubuntu-20-04-in-512-mb-memory-server/https://vrabe.tw/blog/install-ubuntu-20-04-in-512-mb-memory-server/如果要在記憶體只有 512MB 的機器上裝 Ubuntu 19.10 或以上的版本，要使用傳統的安裝程式安裝。 最近為了模擬 VPS，在自己的電腦上開了一台 CPU 一核心、記憶體只有 512MB 的虛擬機。 準備安裝 Ubuntu，掛載 ISO 檔之後，在開機時出現下面的錯誤： [ 0.995337] Initramfs unpacking failed: write error [ …Wed, 06 May 2020 21:10:56 GMThttps://vrabe.tw/blog/leetcode-518-coin-change-2/https://vrabe.tw/blog/leetcode-518-coin-change-2/這是 June LeetCoding Challenge 6/7 的題目。 問題 全文：https://leetcode.com/problems/coin-change-2/ 給你不同面額的硬幣與錢的總額，計算有多少種組合的硬幣可以湊出那筆錢的金額。可以假設每種硬幣都有無限多個。 手算 如果不知道怎麽解的話，可以試著代數字看看，下面用範例一的數字說明，也就是： 用 1 元、2 元及 5…Wed, 17 Jun 2020 23:17:34 GMThttps://vrabe.tw/blog/mariadb-and-depends-on-in-docker-compose/https://vrabe.tw/blog/mariadb-and-depends-on-in-docker-compose/我先講結論：Docker Compose 的 depends_on 只能控制容器的執行順序，開完一個容器就會開下一個，不會等到容器正常執行才開下一個容器。導致單純使用 depends_on 時，就好像蒙面走鋼索。假設 B 容器相依於 A 容器提供的服務，要是 B 容器在 A 容器還沒執行正常時就開始，B 容器就無法正確初始化。 前幾天，我要用 Docker Compose 裝 Bookstack…Wed, 27 May 2020 23:58:23 GMThttps://vrabe.tw/blog/use-netlify-cms-in-local-machine/https://vrabe.tw/blog/use-netlify-cms-in-local-machine/因為 Gatsby Advanced Starter 最近開始支援 Netlify CMS，所以就研究了一下這個東西。原本以為只有在 Netlify 才能用，但是後來發現其實在很多種環境中都能用。 原本的使用方式是 Netlify CMS 隨著靜態網站上傳至 Netlify、Github Pages 或 Vercel（前 ZEIT、Now.sh）之類的空間，在 Netlify CMS…Wed, 13 May 2020 23:58:09 GMThttps://vrabe.tw/blog/use-ubuntu-cloud-images-with-qemu/https://vrabe.tw/blog/use-ubuntu-cloud-images-with-qemu/Cloud Image 是已經預先裝好作業系統的磁碟映像，常常被用來部署作業系統至雲端伺服器。在這篇文章中，我們要用它在虛擬機器中安裝作業系統。 這次我們要在 QEMU-KVM 中裝 Ubuntu 20.04。 為了在雲端部署的方便，一些 Cloud Image 像是 Ubuntu Cloud Image 會在初始化時執行 cloud-init。如果不設定，只照預設值的話，就算知道帳號還是無法登入…Sat, 23 May 2020 23:44:15 GMThttps://vrabe.tw/blog/vultr-started-issuing-uniform-invoices/https://vrabe.tw/blog/vultr-started-issuing-uniform-invoices/Vultr 從 2018 年 7 月開始對台灣的用戶加收營業稅，到上個月為止都沒有開發票。終於在收了一年半的稅後，開始開發票了。 依據中華民國 107 年 7 月 16 日修正發布的統一發票使用辦法，境外電商營業人應該從 2019 年元旦起開立雲端發票。不過根據台財稅字第 10704607091 號令，就算沒開發票，在 2019 年年底前也不用被罰。所以他們很多都拖到免罰期快結束才開始開發票…Mon, 03 Feb 2020 21:21:00 GMThttps://vrabe.tw/blog/convert-big5-data-to-utf8/https://vrabe.tw/blog/convert-big5-data-to-utf8/要在 javascript 將 Big5 編碼的資料轉為 UTF-8，比較常用的選擇是用 node-iconv 或是 iconv-lite。不過最近發現還有一個內建的 TextDecoder 可以用。 TextDecoder 是 WHATWG Encoding Living Standard 中定義的一個 API。在比較新版本的瀏覽器與 Node.js 都可以使用。 使用的方法很簡單，要將…Fri, 09 Sep 2022 02:41:02 GMThttps://vrabe.tw/blog/mask-map/https://vrabe.tw/blog/mask-map/2022 年 5 月起口罩實名制 1.0 開始第二階段，實名制口罩只剩下 145 間藥局在販售。多數的口罩地圖不是聲明停止更新，不然就是沒有更新到只剩 145 間的狀態。所以我簡單用 umap 根據食藥署的資料做了一個實名制口罩地圖。 「健保特約機構口罩剩餘數量明細清單」已不再提供，所以這個地圖只顯示現在還有提供實名制口罩的藥局的基本資料。 資料來源：https://www.fda…Tue, 03 May 2022 02:02:51 GMThttps://vrabe.tw/blog/archlinux-update-note/https://vrabe.tw/blog/archlinux-update-note/Arch Linux 做為一個滾動式更新的 Linux 發行版，因為追求幾乎最新版本的軟體，在更新的時候偶爾會出現一點問題。除了少部分 Arch Linux 官網公告需要額外處理以外，大部分我都用下面兩個解法： 降級到最後可以正常執行的版本 過一段時間後升級看看有沒有修好 降級的方法在 ArchWiki 上有記載。如果快取沒有常清的話，在 /var/cache/pacman/pkg/ 會有先前…Fri, 07 Jul 2023 00:01:31 GMThttps://vrabe.tw/blog/blog-renew-log/https://vrabe.tw/blog/blog-renew-log/去年 7 月，本部落格使用的程式更新了。原因是 Gatsby 的 remark transformer gatsby-transformer-remark 更新上游的 remark 版本到 13，導致一些我有在用的舊版 remark plugin 因為不是用 micromark 寫成的所以不能使用。正好當時 Gatsby 正在開發以 MDX 2 為基礎的 gatsby-plugin-mdx v4…Sun, 10 Sep 2023 23:33:09 GMThttps://vrabe.tw/blog/classicpress-gutenberg-not-included/https://vrabe.tw/blog/classicpress-gutenberg-not-included/ClassicPress 是 WordPress 的 fork。雖然已經存在很久了，但是我最近才發現有 ClassicPress 這個東西。 ClassicPress 官網是這樣介紹 ClassicPress 的： 輕量、穩定、馬上就能上手的免費開源內容管理系統。以不含區塊編輯器（Gutenberg）的 WordPress 為基礎。 為什麼在最後註明不含區塊編輯器呢？在 2018 年…Sun, 06 Aug 2023 00:09:46 GMThttps://vrabe.tw/blog/continuation-of-netlify-cms/https://vrabe.tw/blog/continuation-of-netlify-cms/Netlify CMS 是搭配靜態網站產生器使用的內容管理系統。 在之前的文章裡我有提到過 Netlify CMS，我還是喜歡它可以在本地使用這點。可惜因為 bug 不能用輸入法在 Netlify CMS 的 markdown 編輯器打字，讓它根本不能使用。更糟的是這兩年來都沒有什麼維護，這個 bug 也就這樣留了兩年。 有熱心網友看 Netlify CMS 不太可能繼續開發了，就建立了分叉「St…Sun, 21 May 2023 23:25:44 GMThttps://vrabe.tw/blog/free-gandi-mail-service-ended/https://vrabe.tw/blog/free-gandi-mail-service-ended/2023 年 6 月 14 日收到 Gandi 寄的信，信中要通知的事情大概是： 2023 年 7 月 13 日起調漲域名價格 2023 年 11 月 30 日後不再提供免費的 GandiMail 服務 域名價格調漲 列舉一些 TLD 續約的價格（下面除了有特別註明是含稅價格外都是指未稅價）： TLD 漲價前 漲價後.com 53…Sun, 18 Jun 2023 22:17:43 GMThttps://vrabe.tw/blog/hacktoberfest-no-shirts/https://vrabe.tw/blog/hacktoberfest-no-shirts/Hacktoberfest 是一個鼓勵對開放原始碼專案做出貢獻的一個活動，在每年的十月舉行。往年只要在 GitHub 或 GitLab 對開放原始碼專案做出四個 Pull Request（GitLab 叫做 Merge Request，下稱 PR）被合併，就能領取活動 t-shirt。 在 Hacktoberfest 的第十年，主辦 Hacktoberfest 的 DigitalOcean…Sun, 08 Oct 2023 23:47:49 GMThttps://vrabe.tw/blog/rehype-autolink-headings-not-working-in-astro/https://vrabe.tw/blog/rehype-autolink-headings-not-working-in-astro/在 Node.js 下要在 Markdown/MDX 文件的標題加上可以連到自身的連結的套件是 rehype-autolink-headings。我在 Astro 想要加上這個 Rehype plugin，該改的程式都改好了卻沒有變化。 後來 Google 到 Astro Repository 上的 issue，才知道還要加上 rehype-slug 套件。 我查閱 Astro 文件時有翻到…Tue, 07 Nov 2023 01:00:56 GMThttps://vrabe.tw/blog/sugushinu-game/https://vrabe.tw/blog/sugushinu-game/吸血鬼馬上死 遊戲館（吸血鬼すぐ死ぬ ゲームの館）這款遊戲是由 Paradigm Shift 公司製作，以動畫「吸血鬼馬上死」為題材的 hypercasual game。裡面有幾個小遊戲可以玩，小遊戲每玩一次可以得到 50 金幣，賺到的金幣可以用來購買物品佈置事務所的樣子？佈置事務所的功能還沒實裝，所以只能這樣猜測。 下載連結 ⚠️Android：https://play.google…Sun, 20 Aug 2023 23:48:29 GMThttps://vrabe.tw/blog/yarn-and-github-url/https://vrabe.tw/blog/yarn-and-github-url/2022 年 11 月，我用 Yarn v1 更新我一個有用到 GitHub private repository 的專案時出了錯。經過調查發現是 Node.js v19.1.0 的改動造成了這個錯誤。 在 GitHub 要 clone repository 時複製的 SSH 地址是長這樣：git@github.com:vrabe/repo.git。如果要在專案使用這個 repository…Sun, 04 Jun 2023 21:23:32 GMThttps://vrabe.tw/blog/adsense-approved/https://vrabe.tw/blog/adsense-approved/九月的時候，我看到一篇記錄 Adsense 申請過程的文章。在那篇文章中，作者 Liudon 花了半年的時間申請了八次才審核通過。其中還有一次被拒絕後，作者被通知因為審核次數太多，必須晚一點才能再申請。 我從以前就想申請了，不過網站一直沒有什麼內容，想說申請了也不會過吧，所以一直沒有申請。我看了那篇文章之後想既然他的網站能審核通過，我的網站也有一點內容了，就來申請看看吧，看看會不會通過。 我原本以…Tue, 26 Nov 2024 05:21:11 GMThttps://vrabe.tw/blog/astro-content-layer/https://vrabe.tw/blog/astro-content-layer/Astro 4.14 引進了新的功能：Content Layer，加強了原有的 Content Collection。原本的 Content Collection 資料只能放在 src/content 資料夾裡面，新的 Content Layer 則是沒有這個限制了，可以想放在哪個路徑就放在哪個路徑，即使資料來源在網路上也 OK。我們接下來就看看它的用法吧。 啟用 Content Layer 首先…Tue, 20 Aug 2024 01:29:35 GMThttps://vrabe.tw/blog/astro-pagination-function/https://vrabe.tw/blog/astro-pagination-function/分頁（pagination）就是把一些資料每幾筆資料分成一組放在同一頁，產生若干頁的頁面。比方說現在有 100 筆資料，每頁放 7 筆資料，經過分頁就會產生 15 個頁面，在最後的第 15 頁只會有最後的 2 筆資料。 Astro 的 paginate() 函式 Astro 有內建 paginate() 函式可以做到分頁功能。下面就用稍微修改過的官方文件的例子來說明這個函式： --- export…Tue, 06 Aug 2024 04:01:57 GMThttps://vrabe.tw/blog/big-integer-addition-in-excel/https://vrabe.tw/blog/big-integer-addition-in-excel/吸血鬼馬上死在 2020 年曾經舉辦過一次人氣投票，該次人氣投票採用「自我申告」制度，只要在明信片上註明角色名字與想要給的票數，你就可以給角色投明信片上記載的票數。 最後結果的總得票數是： 20 澗 2 溝 400 億 3187 萬 2259 無量大數 1158 不可思議 9994 那由他 7923 阿僧祇 5925 恆河沙 3394 極 17 載 227 正 5013 澗 7636 溝 3129…Tue, 17 Sep 2024 02:22:48 GMThttps://vrabe.tw/blog/blog-renew-log-2/https://vrabe.tw/blog/blog-renew-log-2/上次決定開始考慮再次更新部落格，改用 Astro 之後，真的改用 Astro 了。 主題最開始是用目錄中排在前面的 Astro Paper，改造成符合自己需求的樣子之後，也在年初的時候上線了。 之後過了大概半年，越用越覺得這個主題寫的不是很好。明明用了 Tailwind Typography 可以在 Tailwind CSS 的設定檔那邊改 prose 的樣式就好，可是這個主題卻是另外在 base…Tue, 19 Nov 2024 01:26:51 GMThttps://vrabe.tw/blog/callout-in-remark/https://vrabe.tw/blog/callout-in-remark/在程式文件或部落格中偶爾會出現一些文字方塊，這些文字方塊可能會有邊框、圖示、或是不同的背景顏色，補充本文沒提到的東西，或是凸顯跟其他內容的不同，讓讀者可以注意到。 它們似乎沒有一個統一的名稱。我看過有人這樣稱呼它們：admonition、alert、callout，中文的名稱又更分散了。為了方便起見，下面我就叫它們 callout 吧。 在 Markdown 中也是沒有統一的語法表示…Tue, 22 Oct 2024 04:19:02 GMThttps://vrabe.tw/blog/cheap-xyz-domains/https://vrabe.tw/blog/cheap-xyz-domains/今天要介紹的是很便宜的域名：1.111B 級 .xyz 域名。 在 2017 年，.xyz 域名的註冊管理局宣佈，只要是 6-9 位純數字域名，一年註冊費用只要 0.99 美元。這些域名總共有 11.11 億個，所以註冊管理局稱這些域名是 1.111B 級域名。 如何註冊 註冊方法跟註冊其他域名一樣。不過有的域名註冊商可能不支援註冊這種域名，如果註冊過程卡住無法繼續，或是發現價格跟 0.99…Tue, 31 Dec 2024 02:04:43 GMThttps://vrabe.tw/blog/coldness-today/https://vrabe.tw/blog/coldness-today/時序又到了冬季。在這個季節，氣象預報常常會出現這幾個名詞：寒流、大陸冷氣團、東北季風。這些名詞代表的都是從北方來的冷空氣，差別在於強度不一樣。區分的標準是臺北測站（中央氣象署本部）觀測到的氣溫。下面是各個冷空氣等級的現行標準： t \le {10.4}^\circ C：寒流 {10.4}^\circ C < t \le {12.4}^\circ C：強烈大陸冷氣團 {12.4}^\circ C …Tue, 17 Dec 2024 06:03:09 GMThttps://vrabe.tw/blog/get-excerpt-in-astro/https://vrabe.tw/blog/get-excerpt-in-astro/我們常常被要求在 HTML 的 meta description 還有 Open Graph 之類的 metadata 填入一個頁面的描述，常見達成的方法大概有這三個： 直接沿用網站的描述 在 frontmatter 加一個 description 欄位，自己寫描述 從內文中取前幾十字的摘要做描述 方法 1 是最簡單的，不過網站描述通常與文章內容沒什麼關係，所以不太能做為頁面的描述…Tue, 13 Aug 2024 02:43:09 GMThttps://vrabe.tw/blog/glob-loader-and-how-to-customize-id/https://vrabe.tw/blog/glob-loader-and-how-to-customize-id/之前我介紹了 Astro 的 Content Layer，有提到有兩個內建的 loader，這次要單獨介紹兩個中其中一個的 glob loader。 glob loader 可以存取本地的 Markdown、MDX、Markdoc 或 JSON 檔案。用法是放在 defineCollection() 裡 loader 這個 property 中： import { glob } from…Tue, 24 Sep 2024 04:57:48 GMThttps://vrabe.tw/blog/january-2024-jcb-easycard-autoload-campaign/https://vrabe.tw/blog/january-2024-jcb-easycard-autoload-campaign/獨享禮遇 JCB 晶緻等級以上（含極緻）悠遊卡自動加值 10% 現金回饋優惠活動是一個歷史悠久的活動。在每個月的第一天早上九點開始，只要登錄成功並且在當月自動加值 500 元，就可以得到 50 元的回饋金。因為名額只有 37000 個，而且一個人可以登錄複數張卡，所以每次開放登錄通常在十分鐘之內就會額滿，非常搶手。 就在今年元旦，大家搶著要登錄的時候，發現「確認送出」這個按鈕再怎麽按都沒有反應…Tue, 03 Sep 2024 16:50:42 GMThttps://vrabe.tw/blog/jcb-easycard-autoload-campaign-recap/https://vrabe.tw/blog/jcb-easycard-autoload-campaign-recap/獨享禮遇 JCB 晶緻等級以上（含極緻）悠遊卡自動加值 10% 現金回饋優惠活動是一個歷史悠久的活動，正如我先前有提到的，居然有十年歷史了。只要持有 JCB 極緻悠遊聯名卡、JCB 晶緻悠遊聯名卡、JCB 晶緻悠遊 Debit 卡，都可以在每月一日早上九點搶登錄，以獲得自動加值的 10% 回饋。 PTT 信用卡板有很完整的記錄，讓我可以列出歷年的回饋上限與限量卡數： …Tue, 12 Nov 2024 01:08:51 GMThttps://vrabe.tw/blog/manage-multi-containers-in-podman/https://vrabe.tw/blog/manage-multi-containers-in-podman/不論是在 Docker 還是 Podman，要讓多個 container 一起運作的話，不太可能為每個 container 分別下指令。如果可以預先設定好每個 container 的參數，然後下一個指令就能同時執行這些 container 就好了。所以在 Docker 有 Docker Compose 這個工具，同樣在 Podman 也有類似用途的工具。這篇文章要介紹的就是在 Podman…Tue, 05 Nov 2024 04:31:02 GMThttps://vrabe.tw/blog/move-arch-linux-to-another-disk/https://vrabe.tw/blog/move-arch-linux-to-another-disk/硬碟空間不夠了，所以我跑去買了新硬碟。買完之後就要把原先在舊硬碟的 Arch Linux 系統搬到新硬碟。舊硬碟有兩個磁區（分割區），一個是開機磁區，另一個是存放 Arch Linux 系統與資料的資料磁區。資料磁區就直接移過去就好，沒什麼好說的。開機磁區也是可以直接複製過去，不過我選擇重建開機磁區。 重建開機磁區 要重建開機磁區，可以參考安裝指南，要做的是這兩個步驟：建立 initramfs…Tue, 10 Sep 2024 04:05:06 GMThttps://vrabe.tw/blog/podman-auto-update/https://vrabe.tw/blog/podman-auto-update/Podman 有內建自動更新 container image 的功能，這個功能是利用 podman auto-update 指令達成的，執行這個指令會更新有標註要自動更新的 container 的 image。 要如何標註這個 container 要自動更新呢？ 可以為 container 加上 io.containers.autoupdate label。如果 container 是用…Tue, 15 Oct 2024 04:11:48 GMThttps://vrabe.tw/blog/porkbun-offers-dot-taipei-domain/https://vrabe.tw/blog/porkbun-offers-dot-taipei-domain/最近逛 Porkbun 網站發現居然有提供 .taipei 域名！ 我看 .taipei 的註冊商列表，在 5 月的時候還沒有 Porkbun，所以應該是最近這幾個月才開放的。連一則新聞都沒有發佈，就這樣靜悄悄的開放了。 註冊與轉入價格是一年 14.98 美元，續約價格是一年 18.94 美元，價格看起來還算是便宜。 或許可以期待 Porkbun 像其他 TLD 一樣出以台北為主題的吉祥物插圖…Fri, 30 Aug 2024 21:54:18 GMThttps://vrabe.tw/blog/pure-html-tooltip-with-title-attribute/https://vrabe.tw/blog/pure-html-tooltip-with-title-attribute/tooltip 就是當你滑鼠移到一個網頁中的元素上面的時候，會浮現出某些訊息的一個 component。我隨便找了 Bootstrap 的 tooltip 文件，大家可以進去體驗一下。 很多 component library 都有提供 tooltip component，網路上也有很多教學教你做出純 CSS 的 tooltip。但是如果只需要可以顯示訊息，不需要任何其他花樣的話，其實只需要純…Tue, 08 Oct 2024 04:16:48 GMThttps://vrabe.tw/blog/sharp-no-longer-support-yarn-v1/https://vrabe.tw/blog/sharp-no-longer-support-yarn-v1/一月時，我更新部落格，把 Astro 升級到 4.0.8，然後 Yarn 出現了類似下面的警告： warning sharp@0.33.1: The engine "libvips" appears to be invalid. 其實有很多行，我只列出第一行。 然後執行 local 測試環境時，如果開到有圖片的頁面，會出現下面的錯誤： Could not process image…Sun, 11 Feb 2024 23:52:46 GMThttps://vrabe.tw/blog/sugushinu-game-update-2403/https://vrabe.tw/blog/sugushinu-game-update-2403/之前介紹過的吸血鬼馬上死 遊戲館（吸血鬼すぐ死ぬ ゲームの館）在三月下旬更新了。這次更新包含四個小遊戲的更新，還有實裝佈置事務所的功能。 下載連結 ⚠️Android：https://play.google.com/store/apps/details?id=jp.ps.vampire ⚠️iOS：https://apps.apple.com/app/id6449486380 兩個版本都…Thu, 18 Apr 2024 19:02:18 GMThttps://vrabe.tw/blog/svg-components-in-astro/https://vrabe.tw/blog/svg-components-in-astro/這篇文章要介紹的是 Astro v5 的其中一個新功能，在 Astro import SVG 的新方法：SVG 元件。 以前的方法 原本在 Astro 並沒有辦法直接 import SVG 圖片。要 import SVG 圖片大概有兩種方法： import 成字串再塞進去 set:html directive： --- import logo from "./logo.svg?raw"; --- …Tue, 03 Dec 2024 03:17:13 GMThttps://vrabe.tw/blog/use-ublock-origin-as-ptt-web-blacklist/https://vrabe.tw/blog/use-ublock-origin-as-ptt-web-blacklist/uBlock Origin 除了可以擋廣告外，它其實可以擋網頁上的任何元素，只要過濾規則寫好。最近我想到 uBlock Origin 應該也能擋特定 ID 的推文跟文章，只要過濾規則寫好吧？所以就有了這篇文章。 開啟 uBlock Origin 的控制台，到「自訂靜態過濾規則」分頁這邊，會看到一個編輯器，這邊就是加規則的地方。 要擋文章列表中特定 ID 發的文章可以加入： ptt.cc##.r…Fri, 29 Nov 2024 19:19:09 GMThttps://vrabe.tw/blog/useful-commands-about-systemd/https://vrabe.tw/blog/useful-commands-about-systemd/systemd 是一個 Linux 中的服務管理員。雖然它管的不只有服務，但是在這篇文章中，我只想記錄關於服務的部分，有關服務的常用指令。 Note 下面的 <service> 代表服務的名稱，例如 nginx.service。如果沒有後綴的話，systemd 會假設是 .service，也就是 nginx 跟 nginx.service 會指同一個服務。 Start / Stop 啟動一個服…Tue, 24 Dec 2024 21:16:31 GMThttps://vrabe.tw/blog/vultr-controversial-tos-update/https://vrabe.tw/blog/vultr-controversial-tos-update/最近 Vultr 的服務條款修訂引發 Reddit r/selfhosted 板的討論。在修訂中，使用者幾乎將他們在 Vultr 上存放的內容的著作權完全授權給 Vultr。 全文在現行服務條款的 12.1(a)： …You hereby grant to Vultr a non-exclusive, perpetual, irrevocable, royalty-free, fully…Thu, 28 Mar 2024 01:44:14 GMThttps://vrabe.tw/blog/wavemon-wifi-monitor-for-linux/https://vrabe.tw/blog/wavemon-wifi-monitor-for-linux/wavemon 是一個很小巧簡單的程式，可以讓你監控 Wi-Fi 的狀況。它是以 ncurses 為基礎開發而成的，代表它是執行在終端機上的程式，有類似圖形化介面的介面，但沒有真正的圖形化介面。 安裝 各大發行版大致都有收錄 wavemon，所以可以直接安裝。像 Arch Linux 的安裝指令是： sudo pacman -S wavemon 使用 要使用 wavemon 需要輸入指令： wa…Tue, 01 Oct 2024 03:14:48 GMThttps://vrabe.tw/blog/what-i-use-to-write-a-blog-post/https://vrabe.tw/blog/what-i-use-to-write-a-blog-post/我一直在嘗試寫部落格文章的流程要怎樣才會比較順暢。不是關於文章的內容要怎麽寫，而是用什麼程式寫部落格文章。因為這個部落格不只有使用原始的 Markdown 語法，還有用 Remark plugin 擴充語法，所以要找到合適的編輯器不太容易。 直接用 Visual Studio Code 編輯的相容性最高，但這個相容性不包括它內建的預覽，單純是以它做為程式碼編輯器考慮的。要預覽的話，開部落格的…Tue, 10 Dec 2024 03:55:52 GMThttps://vrabe.tw/blog/wordpress-dot-com-vs-dot-org/https://vrabe.tw/blog/wordpress-dot-com-vs-dot-org/第一次聽到這兩個詞的時候我覺得很神奇，WordPress 就 WordPress，為什麼還要有 .com 跟 .org？ 在繼續之前，我應該先介紹一下什麼是 WordPress.com？什麼是 WordPress.org？ 據我所知，這似乎是以網址分的。WordPress.org 就是 WordPress，一個開源可自架的部落格軟體。WordPress.com 是 WordPress 的託管版本…Tue, 27 Aug 2024 02:23:58 GMThttps://vrabe.tw/blog/7-interesting-astro-loaders/https://vrabe.tw/blog/7-interesting-astro-loaders/Astro 的 Content Layer 功能帶來最大的好處是我們可以用 loader 從不只是 content 資料夾的其他位置，甚至是從網路上取得資料。我們也可以自己做 loader 在 Astro 上使用不同種類的資料，然後把自己做的 loader 做成 npm package 給大家使用。 在這篇文章我們要看看在 Content Layer 推出四個月後，有沒有什麼有趣或實用的…Tue, 07 Jan 2025 04:17:26 GMThttps://vrabe.tw/blog/adsense-steps-to-get-paid-card/https://vrabe.tw/blog/adsense-steps-to-get-paid-card/今天打開 Adsense 看到了一個新的卡片——收款步驟。基本上就是將要完成什麼事情才能收款用比較淺顯易懂的方式列在上面。 上面寫著首先要達到最低收益 10 美元。接著它提示我們可以建立更多廣告增加收益獲得的速度，或是在還沒收到錢之前就填寫稅務資訊（只有美國的稅務表格可以填）。 達到最低收益後要做這兩件事情： 身份驗證 新增付款方式 身份驗證就是要提交身份證件的照片，然後等收實體 PIN…Fri, 12 Dec 2025 12:41:37 GMThttps://vrabe.tw/blog/aws-cloudfront-new-price-plan-for-free-usage/https://vrabe.tw/blog/aws-cloudfront-new-price-plan-for-free-usage/最近 AWS 推出了新的 CloudFront 計費方案。以前使用 CloudFront 都是用多少就付多少錢，這次新方案則是固定價格，分成 Free、Pro、Business、Premium 四種，每種都有各自的用量上限，超過用量不會被多收錢，但服務水準可能下降，也可能會要求你升級到更貴的方案。 因為我自己也是用免費的，所以在這篇文章我想先介紹這個新的固定價格方案（flat-rate…Tue, 09 Dec 2025 23:13:32 GMThttps://vrabe.tw/blog/aws-new-free-tier-to-replace-12-months-trials/https://vrabe.tw/blog/aws-new-free-tier-to-replace-12-months-trials/原先 AWS 的優惠分三種：免費試用、12 個月免費、永遠免費，但現在 12 個月免費部分的優惠將被免費點數（抵用金）取代。 從 2025 年 7 月 15 日起，新註冊的 AWS 用戶可以獲得 100 美元點數，完成指定任務最高可以再獲得 100 美元點數，點數的有效期限是註冊後 12 個月內，任務的有效期限是註冊後 6 個月內。 新用戶可以選擇保證不會付到錢但有些服務不能用的免費方案（free…Thu, 17 Jul 2025 03:16:24 GMThttps://vrabe.tw/blog/change-favicon-and-title-when-page-visibility-changes/https://vrabe.tw/blog/change-favicon-and-title-when-page-visibility-changes/有些網站在你切換到其他分頁的時候，在分頁工具列顯示的圖示或標題跟你沒切換時是不一樣的。像是 Astro 的網站的圖示就是這樣，這個是正在使用這個分頁時的樣子： 這個則是正在使用其他分頁時這個分頁的樣子： 分頁的圖示發生了改變。這個有趣的行為是怎麽做到的呢？ 翻了這個網站的程式碼，我發現又是用 JavaScript 做到的。程式碼如下： const favicon = document…Tue, 16 Sep 2025 02:18:48 GMThttps://vrabe.tw/blog/cjk-count/https://vrabe.tw/blog/cjk-count/之前寫了一篇文章，說 Obsidian 沒有中文字數統計很不方便。所以我就試著寫寫看外掛程式，結果只花一天就給我寫出來了！ CJK Count GitHub: https://github.com/vrabe/obsidian-cjk-count 外掛程式已經 Obsidian 官方審查通過！你可以在 Obsidian 的設定裡，進入「第三方外掛程式」，點選社群外掛程式的「瀏覽」按鈕，搜尋…Tue, 27 May 2025 04:24:10 GMThttps://vrabe.tw/blog/debug-safari-in-iphone-from-linux/https://vrabe.tw/blog/debug-safari-in-iphone-from-linux/因為上一篇文章的問題，我在網路上搜尋如何從 Linux 對 iPhone 手機上的 Safari 瀏覽器進行除錯，找到了參考資料的這篇文章，試了有效，所以分享出來。 蘋果官方只支援用 Mac 對 iPhone 上的 Safari 除錯，如果要在其他作業系統的電腦上除錯的話，要使用 ios-safari-remote-debug-kit。 在開始之前，要先確定 usbmuxd 跟 ios…Tue, 01 Apr 2025 23:47:51 GMThttps://vrabe.tw/blog/elements-outside-html-tag-when-using-astro/https://vrabe.tw/blog/elements-outside-html-tag-when-using-astro/Astro script 文件的範例中，都把 <script> 放最外層，例如這個： <h1>Welcome, world!</h1> <script> console.log("Welcome, browser console!"); </script> 然而如果這個 .astro 檔案包含 <html> 的話，這麼做會讓 <script> 在 <html> 外面： <html…Tue, 06 May 2025 02:31:48 GMThttps://vrabe.tw/blog/expensive-cloudways/https://vrabe.tw/blog/expensive-cloudways/最近這幾年網路上很多人推 Cloudways。Cloudways 是雲端主機商與使用者之間的中介，讓使用者可以使用雲端主機商的 VPS，卻又不用自己管理，然而價格太貴了，令人望之卻步。在這篇文章我要介紹 Cloudways，但不會涉及註冊與使用教學。 一般要架設傳統有後端的網站有兩種選擇：虛擬主機（shared host）跟 VPS。虛擬主機是多個使用者共用同一台伺服器，VPS 雖然也是…Tue, 08 Apr 2025 23:33:18 GMThttps://vrabe.tw/blog/hacktoberfest-is-difficult-after-2020-change/https://vrabe.tw/blog/hacktoberfest-is-difficult-after-2020-change/Hacktoberfest 是一個鼓勵對開放原始碼專案做出貢獻的一個活動，在每年的十月舉行。雖然 Hacktoberfest 是鼓勵新手投入開源的活動，不過我覺得 Hacktoberfest 其實對新手不是那麼友善。 我一共完成過兩次，一次在 2020 年，另一次在 2022 年。在我第一次參加 Hacktoberfest 時，就在我送第一個 pull request 前，出現了大量的廢 pull…Tue, 11 Mar 2025 17:15:26 GMThttps://vrabe.tw/blog/how-to-make-a-systemd-service/https://vrabe.tw/blog/how-to-make-a-systemd-service/先前我有介紹過 systemd 的常用指令。接著在這篇文章，我要介紹怎麽寫出一個服務檔案。首先我會介紹服務檔案大概長怎樣，接著介紹常用的設定選項，最後列出一個範例做結尾。 架構 服務檔案由 section 組成，類似這樣： # A section [SectionA] Key1=val1 # Another section [SectionB] Key2=val2 Key3=val3 sect…Tue, 14 Jan 2025 17:11:22 GMThttps://vrabe.tw/blog/install-wakapi-in-pc-to-use-wakatime/https://vrabe.tw/blog/install-wakapi-in-pc-to-use-wakatime/最近開始想要記錄自己寫程式或文章的時間，所以我從網路搜尋到 WakaTime 這個服務，只要註冊他們的帳號、在編輯器安裝對應的外掛程式，在你使用編輯器的時候，外掛程式就會自動上傳資訊，讓你可以看看自己對編輯器的使用情況，例如本週在某個專案花了多少時間之類的。 可是我覺得這種記錄根本不需要上傳到雲端平台，而且還要付費才能看到比較久的記錄。所以我又找到可以自己架設，又與 WakaTime API…Tue, 18 Feb 2025 21:34:59 GMThttps://vrabe.tw/blog/install-yay-in-archlinux/https://vrabe.tw/blog/install-yay-in-archlinux/這篇文章就來介紹如何在 Arch Linux 安裝 yay 吧。yay 是一個 AUR Helper，就是讓安裝 AUR 套件的流程更簡單的工具。而 AUR 是 Arch User Repository 的簡稱，任何人都可以在 AUR 上提交套件的 PKGBUILD 檔，讓有需要的人用 PKGBUILD 建置並安裝套件。從 AUR 可以得到官方沒提供的套件這點也是 Arch Linux 的優點之一…Tue, 25 Feb 2025 04:02:36 GMThttps://vrabe.tw/blog/not-upgrade-to-tailwindcss-v4-early/https://vrabe.tw/blog/not-upgrade-to-tailwindcss-v4-early/Tailwind CSS v4 在農曆年前出了正式版。雖然看到很多人急著將專案中的 Tailwind CSS v3 升級到 v4，但是我覺得還是再觀望一下比較好。 相較於 Astro v4 到 v5 的改動，Tailwind CSS v3 到 v4 的改動是非常大的，不是只有 class 名稱更改而已，Tailwind CSS 直接從一個 PostCSS Plugin 變成了 Vite…Tue, 04 Feb 2025 04:44:02 GMThttps://vrabe.tw/blog/note-about-deploying-astro-sites-to-github-pages/https://vrabe.tw/blog/note-about-deploying-astro-sites-to-github-pages/之前在 Astro 的 repository 看到一個 issue，問題大致上是他的網站放在 GitHub Pages 上，載入 /_astro/ 下的檔案卻出現 404 錯誤。 我看到第一個想法是這應該是路徑的問題。因為 GitHub Pages 是放在 https://<user>.github.io/<repository> 這個網址上，放在 <repository> 這個…Tue, 28 Jan 2025 02:07:04 GMThttps://vrabe.tw/blog/optimize-images-in-markdown-in-astro-54/https://vrabe.tw/blog/optimize-images-in-markdown-in-astro-54/在上星期發佈的 Astro 5.4，剛好有兩個關於 Markdown 中圖片的新功能，都是 PolyWolf 做出來的，分別是： Markdown 中外部圖片的最佳化 Markdown 中的響應式圖片支援 這次我要介紹的就是 Astro 5.4 更新項目中的這兩項。 Markdown 中外部圖片的最佳化 Astro 中的圖片最佳化就是把圖片原始檔做壓縮，讓大小變小，讀取會比較快…Tue, 04 Mar 2025 23:16:14 GMThttps://vrabe.tw/blog/porkbun-offers-dot-tw-domain/https://vrabe.tw/blog/porkbun-offers-dot-tw-domain/之前我有為 Porkbun 開放 .taipei 域名註冊寫一篇文章，在文章的最後我期待 Porkbun 開放 .tw 域名註冊。我今天定期到它們網站看的時候，發現 Porkbun 居然真的開放 .tw 域名註冊了！ 我查了 Internet Archives 的 Wayback Machine，Porkbun 應該是在 9 月 5 日到 12 日中間的某個時間放上去的，所以我其實快 lag…Thu, 02 Oct 2025 02:20:38 GMThttps://vrabe.tw/blog/start-codebuild-once-in-a-period-by-eventbridge-scheduler/https://vrabe.tw/blog/start-codebuild-once-in-a-period-by-eventbridge-scheduler/延續上次的文章，我後來選擇使用 lambda function URL 來讓 webhook 觸發 CodeBuild 建置。不過如果直接讓 lambda function 觸發的話，每次 commit push 都會觸發一次建置，這樣會讓免費時數消耗的有點快，所以我想讓時間相近的 commit push 只觸發一次建置。 我找到最簡單的方法是用 EventBridge Scheduler： A…Tue, 10 Jun 2025 22:49:57 GMThttps://vrabe.tw/blog/start-https-dev-server-in-vite-or-astro/https://vrabe.tw/blog/start-https-dev-server-in-vite-or-astro/一般開發用的本地伺服器只要沒加密連線的 HTTP 就夠用了，不過有時候會遇到瀏覽器要求要 HTTPS 才能用的功能。所以這篇文章要示範如何在 Vite 開啟 HTTPS 的開發伺服器。因為 Astro 的底層是用 Vite，所以在介紹完 Vite 的設定方法後，我也會介紹如何用相同的方法在 Astro 開啟 HTTPS 的開發伺服器。 Vite 因為我們只要最簡單的 HTTPS 伺服器就好…Tue, 21 Jan 2025 03:39:56 GMThttps://vrabe.tw/blog/systemd-timer/https://vrabe.tw/blog/systemd-timer/先前我有介紹過怎麽做出一個 systemd 的服務。接著在這篇文章，我要介紹怎麽寫出一個 timer，讓服務在指定的時間啟動。 Timer 範例 先直接從一個範例看起，這個是 Podman 自動更新的 timer 本體： [Unit] Description=Podman auto-update timer [Timer] OnCalendar=daily RandomizedDelaySec…Tue, 11 Feb 2025 22:35:07 GMThttps://vrabe.tw/blog/transfer-dot-tw-domain-to-hinet/https://vrabe.tw/blog/transfer-dot-tw-domain-to-hinet/自從 Gandi 取消免費信箱和漲價之後，我就決定要搬到其他域名註冊商了。雖然之後有把價格調回第二次漲價前的水準，我的決定依然沒有改變。 既然都要移走了，就先選一個台灣本地的域名註冊商吧，所以我就選了中華電信的 Hinet 域名。價格是公定價，轉入轉出都可以線上操作。雖然價格沒有吸引力，但做為第一次還是可以嚐鮮看看。 轉入過程 首先在原本的域名註冊商解鎖域名，並取得移轉密碼。然後到「域名轉入申請」…Tue, 29 Jul 2025 23:52:33 GMThttps://vrabe.tw/blog/trigger-codebuild-by-webhooks-from-repositories/https://vrabe.tw/blog/trigger-codebuild-by-webhooks-from-repositories/上篇我說這個部落格要用 CI/CD 建置有點複雜，所以實際上的設定跟那篇描述的有一些不同，其中一個不同點是我的原始碼來自兩個儲存庫。在這種情況下要如何修改前篇的配置呢？ 只用 CodeBuild CodeBuild 在設定的時候只要在來源這邊點選「新增來源」的按鈕就可以再增加一個來源的儲存庫。 不過問題出在只有對主要來源儲存庫的 push 才會觸發建置，對於其他來源的 push CodeBuild…Tue, 20 May 2025 15:31:17 GMThttps://vrabe.tw/blog/use-codebuild-to-build-a-astro-site/https://vrabe.tw/blog/use-codebuild-to-build-a-astro-site/對於這個部落格，以往我都是在自己的電腦建置再上傳上去，這次試試看讓 AWS 的 CodeBuild 自動建置。因為我實際建置的方法比較複雜，所以我下面介紹的是一般的 Astro 網站如何經過 CodeBuild 建置，然後放到 S3 上。 可能費用 用 AWS 的服務前為了避免付意料外的錢，一定要先算過費用。CodeBuild 的定價跟運算執行個體類型有關，X86 最便宜的類型 general1…Tue, 13 May 2025 23:37:39 GMThttps://vrabe.tw/blog/use-ublock-origin-to-hide-ads-in-astro-docs/https://vrabe.tw/blog/use-ublock-origin-to-hide-ads-in-astro-docs/最近 Astro 文件的右下角開始投放賣課程的廣告： 我越看越不順眼，所以我研究出來阻擋這個廣告的規則： docs.astro.build##div.right-sidebar-panel > .sl-container:not(:first-of-type) 要加入規則，請開啟 uBlock Origin 的控制台，到「自訂靜態過濾規則」分頁這邊，會看到一個編輯器。複製上面的規則，在這邊貼上…Tue, 17 Jun 2025 04:05:11 GMThttps://vrabe.tw/blog/using-github-api-to-sync-fork/https://vrabe.tw/blog/using-github-api-to-sync-fork/有時候我們會需要同步來源 repository 的變更到自己的 fork 上。同步的方法有很多種，在這篇文章中，我要介紹怎麽使用 GitHub 的 API 做同步。 取得 personal access token 要使用 GitHub 的 API 對 repository 做更動需要有 personal access token，所以要先產生一個 personal access token。 首…Tue, 15 Apr 2025 16:00:59 GMThttps://vrabe.tw/blog/view-diff-in-vscode/https://vrabe.tw/blog/view-diff-in-vscode/比較兩個檔案的差異是很常會遇到的事情，要在 VS Code 做這件事很簡單。 在左側的 Explorer 先對第一個檔案按右鍵，選擇「選取用以比較」，然後再對第二個檔案按右鍵，選擇「與選取的比較」。這樣就可以看到以第一個檔案為基底，跟第二個檔案的差異。 在編輯器沒分割的情況下，差異會以兩欄呈現，左邊是第一個檔案，右邊是第二個檔案。有分割則會在同一欄顯示差異： VS Code…Tue, 22 Apr 2025 23:20:50 GMThttps://vrabe.tw/blog/which-vessel-ships-my-taobao-package/https://vrabe.tw/blog/which-vessel-ships-my-taobao-package/不只是淘寶包裹，很多從中國來的海運（或海快）包裹，我們都難以得知它的運輸細節，在這篇文章我要介紹一個方法來找出包裹是哪艘船送過來的。 取得主提單號碼 查詢主提單號碼的方法在 Dcard 上已經有人寫了詳盡的教學： #攻略 關於國際包裹的進度查詢 (2023 最新版) - 網路購物板 | Dcard 所以我在這裡就不贅述了。 查詢航班 空運貨物的航班可以由關貿的空運業界自動化服務系統查詢…Tue, 08 Jul 2025 04:11:07 GMThttps://vrabe.tw/blog/why-i-am-routed-to-the-wrong-edge-location/https://vrabe.tw/blog/why-i-am-routed-to-the-wrong-edge-location/我最近發現我自己瀏覽本站的時候，連接的 CDN 節點不是 TPE（台北）而是 KIX（大阪），覺得奇怪，所以就來找找可能的原因。 我先稍微介紹一下本站與我自己使用的環境： 本站使用 AWS 的 CloudFront CDN 本站域名的 DNS 託管在 CloudFlare 上 我使用的 DNS 是 Quad9 的 DNS over HTTPS 我使用的網路是中華電信的 Hinet 先確認一下問…Wed, 25 Jun 2025 02:51:33 GMThttps://vrabe.tw/blog/why-my-phone-cant-open-daisyui-modal/https://vrabe.tw/blog/why-my-phone-cant-open-daisyui-modal/最近寫程式的時候，用了 daisyUI 的 modal，在手機（iPhone 7）用開發伺服器開啟網頁的時候卻發現 modal 開不了。到底是為什麼呢？ 我原本猜測是因為手機瀏覽器太舊了，不支援 daisyUI 用的 CSS 語法，不過奇怪的是 daisyUI 官網的 modal 範例卻是正常的。如果是同一套程式碼應該不會有這樣的差別？ 既然唯獨只有在手機用開發伺服器開啟網頁開不了 modal…Tue, 18 Mar 2025 01:10:29 GMThttps://vrabe.tw/blog/word-count-in-obsidian/https://vrabe.tw/blog/word-count-in-obsidian/在持續照著這篇文章的方式寫部落格文章一段時間後，我發現了一個關於字數統計的問題。 為了不讓文章看起來太短，我內心對文章的字數有一個寬鬆的標準。因此我在 VS Code 上安裝了字數統計的延伸模組：Word Count CJK。Obsidian 有內建的字數統計外掛程式，所以就不另外安裝了。 然而兩邊統計的字數卻是不同的，Obsidian 會比 VS Code 統計的字數還要多。簡單試了一下…Tue, 29 Apr 2025 05:09:49 GMThttps://vrabe.tw/blog/anonymous-animals-in-google-docs/https://vrabe.tw/blog/anonymous-animals-in-google-docs/在使用 Google 文件時，有時候會看到右上方有動物（？）圖示出現，每個圖示都代表有一個匿名使用者正在跟你一起使用這個文件。 這樣的匿名動物圖示有多少呢？有網友統計過已知有 81 種。我為了驗證和收集它們的中文譯名，實際到了 Google 上公開的 Google 文件尋找。不過我只找到其中的 78 種，其餘的 3 種沒有找到。這 3 種分別是猴子、紅毛猩猩與卓柏卡布拉…Tue, 20 Jan 2026 23:28:06 GMThttps://vrabe.tw/blog/cloud-invoices-backup/https://vrabe.tw/blog/cloud-invoices-backup/雖然雲端發票（無實體電子發票）讓我們可以更容易存取發票的資訊，但這些發票資料始終不是存在自己手上，使得調閱很久以前的發票變得困難。電子發票整合服務平台（因為名字太長了所以下稱大平台）只能查詢最遠九個月前的發票，想要查詢更久以前的發票資料只能打電話問客服、索取申請書、填寫後寄過去來獲得發票資料，得到的資料也不好運用。 以前可以用電子發票 API 下載手機條碼內的發票，可惜因為電子發票應用程式介面使用…Tue, 03 Feb 2026 23:09:35 GMThttps://vrabe.tw/blog/how-to-modify-internal-links-correctly-when-translating-astro-docs/https://vrabe.tw/blog/how-to-modify-internal-links-correctly-when-translating-astro-docs/如果你在 Astro 文件的 repository 提交有關翻譯的 pull request，偶爾會遇到 CI 在這邊發生錯誤：CI / Check Links (pull_request)，點進去看錯誤訊息通常是： Error: Broken fragment link in src/content/docs/zh-tw/<...>.mdx, line <...>: The linked…Tue, 24 Mar 2026 23:41:27 GMThttps://vrabe.tw/blog/open-ports-for-oracle-cloud-vm-using-ubuntu/https://vrabe.tw/blog/open-ports-for-oracle-cloud-vm-using-ubuntu/Oracle Cloud 的 Compute VM 在建立之後只能用 ssh 連進去，安裝像 nginx 的伺服器後是沒辦法用瀏覽器連上的。這是因為防火牆把來自幾乎全部連接埠（port）的連線擋掉了，只留下 22 連接埠讓我們可以用 ssh 連進去。所以我們要開放 80（HTTP）和 443（HTTPS）連接埠才能讓瀏覽器連上 Compute VM 上的網頁伺服器。 要開放連接埠，除了要修改 VM…Tue, 13 Jan 2026 23:55:56 GMThttps://vrabe.tw/blog/transfer-dot-xyz-domain-to-spaceship/https://vrabe.tw/blog/transfer-dot-xyz-domain-to-spaceship/之前有介紹過 6-9 位數字 .xyz 域名很便宜，適合自用，在 Cloudflare 一年含稅只要 0.87 美元。但是因為 Spaceship 這家域名註冊商的數字 .xyz 域名比 Cloudflare 還要便宜，一年只要 0.67 美元，所以這次我就決定把我之前註冊的 .xyz 域名移轉到 Spaceship 了。 域名移轉流程大同小異，你可以拿之前記錄移轉這個域名到中華電信的文章對照看看…Tue, 10 Feb 2026 04:07:10 GMThttps://vrabe.tw/blog/why-eleventy-plugin-remark-can-keep-template-engine-preprocessing/https://vrabe.tw/blog/why-eleventy-plugin-remark-can-keep-template-engine-preprocessing/Eleventy 預設是由 markdown-it 處理 Markdown 內容的，在 markdown-it 處理前，會先使用 Liquid 或你設定的樣板引擎進行前處理，至於其他使用 eleventyConfig.addExtension("md", ...) 替換的 Markdown 函式庫則不會做前處理。不過 @fec/eleventy-plugin-remark 這個 Eleventy…Tue, 24 Feb 2026 23:38:49 GMThttps://vrabe.tw/blog/trying-openai-platform/https://vrabe.tw/blog/trying-openai-platform/最近嘗試了 OpenAI Platform，就是做出 ChatGPT 的 OpenAI 公司的 API 平台，以下是我的心得： 儲值後才能用 相較與 ChatGPT 只要註冊就有免費版可以用，OpenAI Platform 要帳戶裡有 credit 才能使用。好像首次登入有免費 credit，不確定現在還有沒有，但我登入的時候已經是免費 credit 已過期的狀態，所以只能儲值了。 儲值有收營業稅…Tue, 09 Jun 2026 22:57:28 GMThttps://vrabe.tw/blog/blog-renew-log-3/https://vrabe.tw/blog/blog-renew-log-3/最近 Cloudflare 買了很多公司。2026 年 1 月 16 日買了做 Astro 的 The Astro Technology Company，過沒幾個月，在 2026 年 6 月 4 日買了做 Vite、Vitest、Rolldown 等的 VoidZero。 對於用過 Gatsby 的我來說，這是個警訊。Netlify 買了 Gatsby 後，更新頻率驟降，不再開發新功能…Tue, 16 Jun 2026 22:59:37 GMT