Ton blog, ton balisage.
Aucun serveur à gérer.
Écris en Markdown et en HTML, personnalise avec CSS et JavaScript, et publie sur ton propre domaine.
Écris librement dans l'éditeur.
Le texte brut n'a pas de sémantique. Les éditeurs par blocs la rendent difficile à exprimer.
Bloffy est conçu pour qu'avec du Markdown, du HTML, du CSS et du JavaScript tu puisses exprimer exactement la sémantique que tu veux.
<style>.highlight {background-image:linear-gradient(90deg,rgba(91,46,229,0.7),rgba(139,107,255,0.4));color:white;}</style>
## L'éditeur de Bloffy est un plaisir.
L'éditeur à gauche, l'aperçu à droite : un écran partagé dans lequel on écrit vraiment. Pratique, non ?
### Allez. C'est tout ?
Pas du tout. L'autre charme de Bloffy, c'est qu'il a optimisé jusqu'à ses propres optimisations. Ton blog est conçu pour atteindre, selon le [barème PSI](https://developers.google.com/speed/docs/insights/v5/about), <strong class="highlight">100 en Web Vitals et en performances, bonnes pratiques, SEO et accessibilité.</strong> Rapide, non ? <small>Cela peut varier un peu d'un blog à l'autre, bien sûr.</small> Je te pose seulement trois questions.
```mermaid
flowchart LR
Q1([Je veux un blog à moi.]) -->|Oui| Q2([L'auto-hébergement demande trop d'entretien.])
Q1 -->|Non| P[Un blog de plateforme suffit]
Q2 -->|Oui| Q3([La performance compte pour moi.])
Q2 -->|Non| W[Auto-hébergement]
Q3 -->|Oui| B[Bloffy]
style B fill:#5b2ee5,stroke:#8b6bff,color:#fff
```
Si c'est 'Oui' aux trois, Bloffy vaut le détour.
Et puis... tu peux utiliser ton propre domaine, habiller le blog librement en CSS, publier en plusieurs langues, atteindre vite les moteurs de recherche via IndexNow, t'appuyer sur l'infrastructure qui protège la réputation du domaine, ajouter des membres à ton blog et ... ~~je m'arrête là.~~
Des thèmes pour chaque style
Quel style de blog cherches-tu ?
Couverture de magazine, revue littéraire, newsletter, mosaïque de photos ...
Choisis celui qui te plaît et applique-le.
Aucun ne te convient vraiment ?
Donne-lui la forme de ta marque.
Avec des boutons et des menus déroulants, on n'atteint pas le détail.
Personnalise ton blog jusqu'au détail, en CSS.
CSS personnalisé
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;
Aperçu
Sans installation, sans cookies
Pas de cookies, pas d'IP conservée, rien de transmis à un tiers, donc pas besoin non plus d'afficher un bandeau cookies. La vie privée de tes lecteurs passe d'abord.
Blogs, espaces de travail, utilisateurs.
Une structure souple et ordonnée
Un blog peut avoir plusieurs membres, et tu peux mener plusieurs blogs. Tout cela se passe dans un espace de travail. Le droit d'écrire et le droit d'administrer le blog sont séparés.
Espace
Ton espace de travail
Ton blog techniqueBlog
Ton blog persoBlog
Le blog de ton équipeBlog
Kim
Miller
CaterEspace
Un autre espace de travail
Le blog de ton entrepriseBlog
Blog
Propriétaire
Membre
Membre
Membre
Membre
Toi
Tout ce qu'un blog demande
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-LocalizationUn original et ses traductions, gérés ensemble.
PageSpeed Insights
100Performance
100Accessibility
100Best Practices
100SEO
Web VitalsGood
FCP0.8s
LCP1.7s
TBT0ms
CLS0
PerformanceTu vois les quatre catégories de PageSpeed Insights et les métriques de labo.
<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 InjectionPlace ton propre code directement dans le head et le body.
Custom DomainRelie ton propre domaine à chaque blog.
384w
640w
828w
1200w
webp, avif
Image OptimizationLes images du corps partent avec des candidats par largeur et des formats récents.
Edge CacheLes pages publiées sont servies depuis des nœuds partout dans le monde.
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
SEOURL par langue, sitemap et données structurées partent avec chaque article.