Tu blog, tu marcado.
Sin servidores que gestionar.
Escribe en Markdown y HTML, personaliza con CSS y JavaScript y publica en tu propio dominio.
Escribe con libertad en el editor.
El texto plano no tiene semántica. Los editores por bloques la hacen difícil de expresar.
Bloffy está diseñado para que con Markdown, HTML, CSS y JavaScript expreses exactamente la semántica que quieres.
<style>.highlight {background-image:linear-gradient(90deg,rgba(91,46,229,0.7),rgba(139,107,255,0.4));color:white;}</style>
## El editor de Bloffy da gusto.
El editor a la izquierda, la vista previa a la derecha: una pantalla partida en la que se escribe de verdad. Cómodo, ¿no?
### Venga. ¿Y ya está?
Qué va. El otro encanto de Bloffy es que optimizó hasta sus propias optimizaciones. Tu blog está diseñado para llegar, según el [criterio de PSI](https://developers.google.com/speed/docs/insights/v5/about), a <strong class="highlight">100 en Web Vitals y rendimiento, prácticas recomendadas, SEO y accesibilidad.</strong> Rápido, ¿verdad? <small>Claro que puede variar un poco según el blog.</small> Solo te pregunto tres cosas.
```mermaid
flowchart LR
Q1([Quiero un blog propio.]) -->|Sí| Q2([Alojarlo yo da demasiado mantenimiento.])
Q1 -->|No| P[Con un blog de plataforma basta]
Q2 -->|Sí| Q3([El rendimiento me importa.])
Q2 -->|No| W[Alojarlo yo]
Q3 -->|Sí| B[Bloffy]
style B fill:#5b2ee5,stroke:#8b6bff,color:#fff
```
Si las tres son 'Sí', merece la pena probar Bloffy.
Además... puedes usar tu propio dominio, vestir el blog a tu gusto con CSS, publicar en varios idiomas, llegar antes a los buscadores con IndexNow, apoyarte en la infraestructura que protege la reputación del dominio, añadir miembros a tu blog y ... ~~lo dejo aquí.~~
Temas para cada estilo
¿Qué estilo de blog buscas?
Portada de revista, revista literaria, boletín, mosaico de fotos ...
Elige el que te guste y aplícalo.
¿No hay ninguno que te encaje?
Dale la forma de tu marca.
Con botones y desplegables no se llega al detalle.
Personaliza tu blog hasta el detalle, con CSS.
CSS propio
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;
Vista previa
Sin instalar nada, sin cookies
Sin cookies, sin guardar IP y sin entregar datos a terceros, así que tampoco hace falta sacar un aviso de cookies. La privacidad de quien te lee va primero.
Blogs, espacios de trabajo, usuarios.
Una estructura flexible y ordenada
Un blog puede tener varios miembros, y tú puedes llevar varios blogs. Todo ello ocurre dentro de un espacio de trabajo. El permiso para escribir y el permiso para administrar el blog están separados.
Espacio
Tu espacio de trabajo
Tu blog técnicoBlog
Tu blog personalBlog
El blog de tu equipoBlog
Kim
Miller
CaterEspacio
Otro espacio de trabajo
El blog de tu empresaBlog
Blog
Propietario
Miembro
Miembro
Miembro
Miembro
Tú
Todo lo que un blog necesita
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 y sus traducciones, gestionados juntos.
PageSpeed Insights
100Performance
100Accessibility
100Best Practices
100SEO
Web VitalsGood
FCP0.8s
LCP1.7s
TBT0ms
CLS0
PerformanceVes las cuatro categorías de PageSpeed Insights y las métricas de laboratorio.
<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 InjectionPon tu propio código directamente en el head y en el body.
Custom DomainConecta tu propio dominio a cada blog.
384w
640w
828w
1200w
webp, avif
Image OptimizationLas imágenes del cuerpo salen con candidatos por ancho y formatos actuales.
Edge CacheLas páginas publicadas se sirven desde nodos de todo el mundo.
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 por idioma, sitemap y datos estructurados salen con cada entrada.