在編輯器裡自由地寫。
純文字沒有語意。區塊式編輯器也很難表達語意。
Bloffy 的設計，是讓你能用 Markdown、HTML、CSS、JavaScript 精確表達你想要的語意。
<style>.highlight {background-image:linear-gradient(90deg,rgba(91,46,229,0.7),rgba(139,107,255,0.4));color:white;}</style>
## Bloffy 的編輯器真的很好寫。
左邊是編輯器，右邊是預覽，分割畫面一邊寫一邊看。很方便吧？
### 欸。就這樣？
不不不。Bloffy 另一個魅力，是把最佳化又最佳化了一遍。你的部落格以 [PSI 標準](https://developers.google.com/speed/docs/insights/v5/about) <strong class="highlight">在 Web Vitals 與效能、最佳做法、SEO、無障礙拿下 100 分為目標設計。</strong> 很快吧？ <small>當然，依部落格不同會有一點差異。</small> 只問你三件事。
```mermaid
flowchart LR
Q1([我想要一個自己的部落格。]) -->|是| Q2([自己架站維護太麻煩。])
Q1 -->|否| P[平台部落格就夠了]
Q2 -->|是| Q3([效能對我很重要。])
Q2 -->|否| W[自己架站]
Q3 -->|是| B[Bloffy]
style B fill:#5b2ee5,stroke:#8b6bff,color:#fff
```
三個都是「是」的話，Bloffy 值得試試看。
另外... 可以用自己的網域，可以用 CSS 自由裝扮部落格，可以用多種語言發布文章，可以透過 IndexNow 快速傳給搜尋引擎，有保護網域信譽的基礎建設，還可以替部落格新增成員 ... ~~就先講到這裡。~~
多樣的佈景主題
你想要什麼樣的部落格？
雜誌封面、文學季刊、電子報、照片拼貼 ...
挑一個喜歡的套用看看。
沒有剛好合意的嗎？
照你的品牌去調整。
只靠按鈕和下拉選單的介面，沒辦法調得細。
用 CSS 把部落格調到細節。
自訂 CSS
72 --color-surface-1: #ededea;
73 --color-surface-2: #e4e4e0;
74 --color-hairline: #dcdcd7;
75 --color-hairline-soft: #e6e6e1;
76 --color-ink: #1a1922; /* 16.2:1 */
77 --color-ink-muted: #55525f; /* 7.1:1 */
78 --color-accent-iris: #5b2ee5;
79 --color-accent-iris-deep: #4a23c4;
80 --color-accent-iris-bright: #6a3df5;
81 --color-link: #5b2ee5; /* 6.6:1 */
82 --color-link-hover: #4a23c4;
83 --color-focus: #5b2ee5;
84 --color-on-accent: #ffffff; /* 7.1:1 on an iris fill */
85 color-scheme: light;
86}
87
88/* Dark theme. Depth comes from lifting surfaces, not from borders. */
89:root[data-theme="dark"] {
90 --color-canvas: #0a0a0d;
91 --color-surface-1: #141318;
92 --color-surface-2: #1d1b23;
93 --color-hairline: #28252f;
94 --color-hairline-soft: #1b1921;
95 --color-ink: #f5f4f6; /* 18.0:1, off-white, to soften glare */
96 --color-ink-muted: #9b97a5; /* 6.9:1 */
97 --color-accent-iris: #5b2ee5;
98 --color-accent-iris-deep: #4a23c4;
99 --color-accent-iris-bright: #8b6bff;
100 --color-link: #8b6bff; /* 5.31:1, plain iris is only 2.79:1 on dark */
101 --color-link-hover: #a892ff;
102 --color-focus: #8b6bff;
103 --color-on-accent: #ffffff;
104 color-scheme: dark;
105}
106
107/* Follows the reader's system preference until a theme is chosen explicitly. */
108@media (prefers-color-scheme: dark) {
109 :root:not([data-theme]) {
110 --color-canvas: #0a0a0d;
111 --color-surface-1: #141318;
112 --color-surface-2: #1d1b23;
113 --color-hairline: #28252f;
114 --color-hairline-soft: #1b1921;
115 --color-ink: #f5f4f6;
116 --color-ink-muted: #9b97a5;
預覽
不用安裝，也不用 cookie
不使用 cookie、不保存 IP、不把資料交給第三方，所以 也不需要跳出 cookie 同意橫幅。 讀者的隱私擺在第一位。
部落格、工作區、使用者。
有彈性又有條理的結構
一個部落格可以有多位成員，你也可以同時經營多個部落格。 這些都在工作區裡完成。寫文章的權限和管理部落格的權限是分開的。
工作區
你的工作區
你的技術部落格部落格
你的生活部落格部落格
你的團隊部落格部落格
Kim
Miller
Cater工作區
其他工作區
你的公司部落格部落格
部落格
擁有者
成員
成員
成員
成員
你
寫部落格需要的一切
PostsOriginal 1, Translations 5
English
How to build a lightweight blog
Published1,284Español
Cómo crear un blog ligero
Published417Français
Comment créer un blog léger
Published236日本語
軽量なブログの作り方
Published188한국어
가벼운 블로그를 만드는 법
Published142繁體中文
如何打造輕量部落格
Draft-Localization一篇原文和它的翻譯版一起管理。
PageSpeed Insights
100Performance
100Accessibility
100Best Practices
100SEO
Web VitalsGood
FCP0.8s
LCP1.7s
TBT0ms
CLS0
Performance可以看到 PageSpeed Insights 四個項目與實驗室指標。
<html>
<head>
<meta charset="utf-8"> <title>...</title>
GA4gtag('config', 'G-XXXXXXX')
</head>
<body>
AdSense<script async src=".../adsbygoogle.js?client=ca-pub-XXXX">
<article> ... </article>
Empty
</body>
</html>
Code Injection把你要的程式碼直接放進 head 和 body。
Custom Domain每個部落格都能接上自己的網域。
384w
640w
828w
1200w
webp, avif
Image Optimization內文圖片會以各種寬度的候選和新格式發布。
Edge Cache發布的頁面由世界各地的節點送出。
maize.bloffy.blog › ja › how-to-build-a-lightweight-blog
maize.bloffy.blog › ko › how-to-build-a-lightweight-blog
maize.bloffy.blog › en › how-to-build-a-lightweight-blogHow to build a lightweight blogLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam.
hreflang x6sitemapJSON-LD
SEO各語言的網址、網站地圖和結構化資料會一起送出。