ghostFam
<!DOCTYPE html>
data-url="https://bepublish.com"
data-locale="en"
data-mode-prefer="light"
hidden>
<meta property="og:site_name" content="bePublish">
<meta property="og:type" content="website">
<meta property="og:title" content="bePublish: Publish and monetize with Ghost CMS">
<meta property="og:description" content="Transforming your writing into a profitable startup.">
<meta property="og:url" content="https://bepublish.com/">
<meta property="og:image" content="https://bepublish.com/content/images/size/w1200/2025/10/cover-1.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="bePublish: Publish and monetize with Ghost CMS">
<meta name="twitter:description" content="Transforming your writing into a profitable startup.">
<meta name="twitter:url" content="https://bepublish.com/">
<meta name="twitter:image" content="https://bepublish.com/content/images/size/w1200/2025/10/cover-2.png">
<meta name="twitter:site" content="@bepublish">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "WebSite", "publisher": { "@type": "Organization", "name": "bePublish", "url": "https://bepublish.com/", "logo": { "@type": "ImageObject", "url": "https://bepublish.com/content/images/2025/09/logo-bepublish.png", "width": 60, "height": 60 } }, "url": "https://bepublish.com/", "name": "bePublish", "image": { "@type": "ImageObject", "url": "https://bepublish.com/content/images/size/w1200/2025/10/cover.png", "width": 1200, "height": 675 }, "mainEntityOfPage": "https://bepublish.com/", "description": "Transforming your writing into a profitable startup." }
<meta name="generator" content="Ghost 6.43">
<link rel="alternate" type="application/rss+xml" title="bePublish" href="https://bepublish.com/rss/">
<script defer src="https://cdn.jsdelivr.net/ghost/portal@~2.68/umd/portal.min.js" data-i18n="true" data-ghost="https://bepublish.com/" data-key="bdd41b63804ff1b5b0969e7dfe" data-api="https://bepublish.com/ghost/api/content/" data-locale="en" crossorigin="anonymous"></script><style id="gh-members-styles">.gh-post-upgrade-cta-content,
.gh-post-upgrade-cta { display: flex; flex-direction: column; align-items: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-align: center; width: 100%; color: #ffffff; font-size: 16px; }
.gh-post-upgrade-cta-content { border-radius: 8px; padding: 40px 4vw; }
.gh-post-upgrade-cta h2 { color: #ffffff; font-size: 28px; letter-spacing: -0.2px; margin: 0; padding: 0; }
.gh-post-upgrade-cta p { margin: 20px 0 0; padding: 0; }
.gh-post-upgrade-cta small { font-size: 16px; letter-spacing: -0.2px; }
.gh-post-upgrade-cta a { color: #ffffff; cursor: pointer; font-weight: 500; box-shadow: none; text-decoration: underline; }
.gh-post-upgrade-cta a:hover { color: #ffffff; opacity: 0.8; box-shadow: none; text-decoration: underline; }
.gh-post-upgrade-cta a.gh-btn { display: block; background: #ffffff; text-decoration: none; margin: 28px 0 0; padding: 8px 18px; border-radius: 4px; font-size: 16px; font-weight: 600; }
.gh-post-upgrade-cta a.gh-btn:hover { opacity: 0.92; }
<link href="https://bepublish.com/webmentions/receive/" rel="webmention">
<script defer src="/public/cards.min.js?v=4dc9c9ba16"></script>
<link rel="stylesheet" type="text/css" href="/public/cards.min.css?v=4dc9c9ba16">
<script defer src="/public/comment-counts.min.js?v=4dc9c9ba16" data-ghost-comments-counts-api="https://bepublish.com/members/api/comments/counts/"></script>
<script defer src="/public/member-attribution.min.js?v=4dc9c9ba16"></script><style>:root {--ghost-accent-color: #000000;}</style>
<script>window.lemonSqueezyAffiliateConfig = { store: "bepublish" };</script>
</div>
<nav class="flex justify-center items-center gap-x-6 h-full whitespace-nowrap" aria-label="Main navigation">
<div x-data="mainNav()" class="relative w-full js-tana-nav-container">
<ul
id="main-nav"
class='flex flex-col md:flex-row items-stretch md:items-center gap-y-1 md:gap-y-0'
>
<li
data-nav-type="parent"
data-index="0"
@mouseenter="$el.classList.contains('has-children') && open('0')"
@mouseleave="$el.classList.contains('has-children') && close()"
class="nav-list-item group relative w-full md:w-auto"
>
<div
class="nav-item-wrapper group/parent cursor-pointer md:cursor-default"
:class="activeMenu === '0' ? 'bg-lightgray dark:bg-zinc-800' : ''"
@click="if ($el.parentElement.classList.contains('has-children')) { toggle('0'); $event.preventDefault(); $event.stopPropagation(); }"
>
<a
href="/about/"
class="nav-item-link "
data-label="About"
:aria-expanded="$el.closest('.has-children') ? (activeMenu === '0' ? 'true' : 'false') : null"
:aria-haspopup="$el.closest('.has-children') ? 'menu' : null"
>
<span class="relative">
About
</span>
<svg
class="desktop-indicator hidden md:block size-3 text-gray-400 transition-transform duration-200"
:class="activeMenu === '0' ? 'rotate-180' : ''"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</a>
<button
type="button"
@click.stop="toggle('0')"
class="nav-toggle-btn"
aria-label="Toggle Submenu"
:aria-expanded="activeMenu === '0' ? 'true' : 'false'"
:aria-controls="'submenu-0'"
>
<svg viewBox='0 0 100 100' class='size-4 transition-transform duration-200' :class="activeMenu === '0' ? 'rotate-180' : ''" aria-hidden="true">
<use href='/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon'></use>
</svg>
</button>
</div>
<div
id="submenu-0"
x-cloak
x-show="activeMenu === '0'"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
:class="previousActiveMenu !== null ? 'transition-none !duration-0' : ''"
class='nav-dropdown-panel origin-top'
>
<ul class='nav-dropdown-content nav-dropdown-list font-heading' role="menu">
</ul>
</div>
</li>
<li
data-nav-type="parent"
data-index="1"
@mouseenter="$el.classList.contains('has-children') && open('1')"
@mouseleave="$el.classList.contains('has-children') && close()"
class="nav-list-item group relative w-full md:w-auto"
>
<div
class="nav-item-wrapper group/parent cursor-pointer md:cursor-default"
:class="activeMenu === '1' ? 'bg-lightgray dark:bg-zinc-800' : ''"
@click="if ($el.parentElement.classList.contains('has-children')) { toggle('1'); $event.preventDefault(); $event.stopPropagation(); }"
>
<a
href="/"
class="nav-item-link nav-current"
data-label="Resources"
:aria-expanded="$el.closest('.has-children') ? (activeMenu === '1' ? 'true' : 'false') : null"
:aria-haspopup="$el.closest('.has-children') ? 'menu' : null"
>
<span class="relative">
Resources
</span>
<svg
class="desktop-indicator hidden md:block size-3 text-gray-400 transition-transform duration-200"
:class="activeMenu === '1' ? 'rotate-180' : ''"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</a>
<button
type="button"
@click.stop="toggle('1')"
class="nav-toggle-btn"
aria-label="Toggle Submenu"
:aria-expanded="activeMenu === '1' ? 'true' : 'false'"
:aria-controls="'submenu-1'"
>
<svg viewBox='0 0 100 100' class='size-4 transition-transform duration-200' :class="activeMenu === '1' ? 'rotate-180' : ''" aria-hidden="true">
<use href='/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon'></use>
</svg>
</button>
</div>
<div
id="submenu-1"
x-cloak
x-show="activeMenu === '1'"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
:class="previousActiveMenu !== null ? 'transition-none !duration-0' : ''"
class='nav-dropdown-panel origin-top'
>
<ul class='nav-dropdown-content nav-dropdown-list font-heading' role="menu">
</ul>
</div>
</li>
<li data-nav-type="child" class="list-none m-0 p-0 w-full" role="none">
<a href="https://docs.bepublish.com/" role="menuitem" class="nav-child-link relative " data-label="- TanaFlows docs|TanaFlows theme">
- TanaFlows docs|TanaFlows theme
</a>
</li>
<li data-nav-type="child" class="list-none m-0 p-0 w-full" role="none">
<a href="/integrate/" role="menuitem" class="nav-child-link relative " data-label="- Integrations Guides">
- Integrations Guides
</a>
</li>
<li data-nav-type="child" class="list-none m-0 p-0 w-full" role="none">
<a href="/my-tools/" role="menuitem" class="nav-child-link relative " data-label="- Useful tools">
- Useful tools
</a>
</li>
<li
data-nav-type="parent"
data-index="5"
@mouseenter="$el.classList.contains('has-children') && open('5')"
@mouseleave="$el.classList.contains('has-children') && close()"
class="nav-list-item group relative w-full md:w-auto"
>
<div
class="nav-item-wrapper group/parent cursor-pointer md:cursor-default"
:class="activeMenu === '5' ? 'bg-lightgray dark:bg-zinc-800' : ''"
@click="if ($el.parentElement.classList.contains('has-children')) { toggle('5'); $event.preventDefault(); $event.stopPropagation(); }"
>
<a
href="/contact/"
class="nav-item-link "
data-label="Contact"
:aria-expanded="$el.closest('.has-children') ? (activeMenu === '5' ? 'true' : 'false') : null"
:aria-haspopup="$el.closest('.has-children') ? 'menu' : null"
>
<span class="relative">
Contact
</span>
<svg
class="desktop-indicator hidden md:block size-3 text-gray-400 transition-transform duration-200"
:class="activeMenu === '5' ? 'rotate-180' : ''"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</a>
<button
type="button"
@click.stop="toggle('5')"
class="nav-toggle-btn"
aria-label="Toggle Submenu"
:aria-expanded="activeMenu === '5' ? 'true' : 'false'"
:aria-controls="'submenu-5'"
>
<svg viewBox='0 0 100 100' class='size-4 transition-transform duration-200' :class="activeMenu === '5' ? 'rotate-180' : ''" aria-hidden="true">
<use href='/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon'></use>
</svg>
</button>
</div>
<div
id="submenu-5"
x-cloak
x-show="activeMenu === '5'"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
:class="previousActiveMenu !== null ? 'transition-none !duration-0' : ''"
class='nav-dropdown-panel origin-top'
>
<ul class='nav-dropdown-content nav-dropdown-list font-heading' role="menu">
</ul>
</div>
</li>
</nav>
<div class="flex items-center justify-end gap-x-4 sm:gap-x-0 z-10">
<div class="hidden sm:block">
<div class="inline-flex">
<button
type="button"
class="btn-search js-cloudflare-chat-trigger"
aria-label="Ask AI"
title="Ask AI"
data-search-endpoint-url="https://01911bb0-fd1f-4373-836b-cf45f77d9a7e.search.ai.cloudflare.com/search"
data-placeholder="Ask AI anything..."
data-translation-ask-ai="Ask AI"
>
<svg fill="currentColor" class="size-4" style="flex:none;line-height:1" viewBox="0 0 16 16" aria-hidden="true">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#stars-icon"></use>
</svg>
</button>
<button
type="button"
class="btn-search js-cloudflare-search-trigger"
aria-label="Search"
title="Search"
data-search-endpoint-url="https://01911bb0-fd1f-4373-836b-cf45f77d9a7e.search.ai.cloudflare.com/search"
data-placeholder="Search posts, tags, authors..."
>
<svg aria-hidden="true" class="size-4"><use href="/assets/cache/sprite.svg?v=4dc9c9ba16#search-icon"></use></svg>
</button>
</div>
</div>
<div class="hidden mr-1 md:block">
<button type='button' class='btn-darkmode btn-theme-toggle' aria-label='Change theme' onclick="if(window.Tana && window.Tana.sync) { window.Tana.sync.toggleTheme(event); }">
<span class="text-xs js-tana-lang-current">
en
</span>
<svg
class="w-2.5 h-2.5 text-gray-600 dark:text-gray-300 transition-transform duration-200"
:class="open ? 'rotate-180' : ''"
viewBox="0 0 100 100"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</div>
<button type="button" data-portal="signin" class="btn-search cursor-pointer" aria-label="Log in" title="Log in">
<svg viewBox="0 0 100 100" aria-hidden="true" class="w-6 h-6 inline-block text-black dark:text-white">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#avatar-icon"></use>
</svg>
</button>
<div class="nav-divider "></div>
</div>
<div class="block">
<a data-no-prefetch
class="btn btn-menu relative " href="/tanaflows/" style="background-color: var(--brand-color); color: var(--brand-color-invert);"
<span class="text-nowrap">TanaFlows Theme</span>
</div>
<div class="flex items-center justify-end gap-x-4 z-10">
<div class="block">
<a data-no-prefetch
class="btn btn-menu relative " href="/tanaflows/" style="background-color: var(--brand-color); color: var(--brand-color-invert);"
<span class="text-nowrap">TanaFlows Theme</span>
<div class="inline-flex gap-x-1">
<button
type="button"
class="btn-search js-cloudflare-chat-trigger p-2"
aria-label="Ask AI"
title="Ask AI"
data-search-endpoint-url="https://01911bb0-fd1f-4373-836b-cf45f77d9a7e.search.ai.cloudflare.com/search"
data-placeholder="Ask AI anything..."
data-translation-ask-ai="Ask AI"
>
<svg fill="currentColor" class="size-4" style="flex:none;line-height:1" viewBox="0 0 16 16" aria-hidden="true">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#stars-icon"></use>
</svg>
</button>
<button
type="button"
class="btn-search js-cloudflare-search-trigger p-2"
aria-label="Search"
title="Search"
data-search-endpoint-url="https://01911bb0-fd1f-4373-836b-cf45f77d9a7e.search.ai.cloudflare.com/search"
data-placeholder="Search posts, tags, authors..."
>
<svg aria-hidden="true" class="size-4"><use href="/assets/cache/sprite.svg?v=4dc9c9ba16#search-icon"></use></svg>
</button>
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 flex items-center h-full">
<span data-portal="signin" class="account-login-link sm:hidden">
Log in
</span>
</div>
<div class="flex justify-end dark:text-white z-10">
<button
type="button"
onclick="window.Tana?.nav?.toggleMobileMenu?.(false)"
class="mobile-menu-close-btn"
aria-label="Close"
>
<svg viewBox="0 0 100 100" aria-hidden="true" class="w-6 h-6">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#close-icon"></use>
</svg>
</button>
</div>
</div>
<svg
class="desktop-indicator hidden md:block size-3 text-gray-400 transition-transform duration-200"
:class="activeMenu === '0' ? 'rotate-180' : ''"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</a>
<button
type="button"
@click.stop="toggle('0')"
class="nav-toggle-btn"
aria-label="Toggle Submenu"
:aria-expanded="activeMenu === '0' ? 'true' : 'false'"
:aria-controls="'submenu-0'"
>
<svg viewBox='0 0 100 100' class='size-4 transition-transform duration-200' :class="activeMenu === '0' ? 'rotate-180' : ''" aria-hidden="true">
<use href='/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon'></use>
</svg>
</button>
</div>
<div
id="submenu-0"
x-cloak
x-show="activeMenu === '0'"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
:class="previousActiveMenu !== null ? 'transition-none !duration-0' : ''"
class='nav-dropdown-panel origin-top'
>
<ul class='nav-dropdown-content nav-dropdown-list font-heading' role="menu">
</ul>
</div>
</li>
<li
data-nav-type="parent"
data-index="1"
@mouseenter="$el.classList.contains('has-children') && open('1')"
@mouseleave="$el.classList.contains('has-children') && close()"
class="nav-list-item group relative w-full md:w-auto"
>
<div
class="nav-item-wrapper group/parent cursor-pointer md:cursor-default"
:class="activeMenu === '1' ? 'bg-lightgray dark:bg-zinc-800' : ''"
@click="if ($el.parentElement.classList.contains('has-children')) { toggle('1'); $event.preventDefault(); $event.stopPropagation(); }"
>
<a
href="/"
class="nav-item-link nav-current"
data-label="Resources"
:aria-expanded="$el.closest('.has-children') ? (activeMenu === '1' ? 'true' : 'false') : null"
:aria-haspopup="$el.closest('.has-children') ? 'menu' : null"
>
<span class="relative">
Resources
</span>
<svg
class="desktop-indicator hidden md:block size-3 text-gray-400 transition-transform duration-200"
:class="activeMenu === '1' ? 'rotate-180' : ''"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</a>
<button
type="button"
@click.stop="toggle('1')"
class="nav-toggle-btn"
aria-label="Toggle Submenu"
:aria-expanded="activeMenu === '1' ? 'true' : 'false'"
:aria-controls="'submenu-1'"
>
<svg viewBox='0 0 100 100' class='size-4 transition-transform duration-200' :class="activeMenu === '1' ? 'rotate-180' : ''" aria-hidden="true">
<use href='/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon'></use>
</svg>
</button>
</div>
<div
id="submenu-1"
x-cloak
x-show="activeMenu === '1'"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
:class="previousActiveMenu !== null ? 'transition-none !duration-0' : ''"
class='nav-dropdown-panel origin-top'
>
<ul class='nav-dropdown-content nav-dropdown-list font-heading' role="menu">
</ul>
</div>
</li>
<li data-nav-type="child" class="list-none m-0 p-0 w-full" role="none">
<a href="https://docs.bepublish.com/" role="menuitem" class="nav-child-link relative " data-label="- TanaFlows docs|TanaFlows theme">
- TanaFlows docs|TanaFlows theme
</a>
</li>
<li data-nav-type="child" class="list-none m-0 p-0 w-full" role="none">
<a href="/integrate/" role="menuitem" class="nav-child-link relative " data-label="- Integrations Guides">
- Integrations Guides
</a>
</li>
<li data-nav-type="child" class="list-none m-0 p-0 w-full" role="none">
<a href="/my-tools/" role="menuitem" class="nav-child-link relative " data-label="- Useful tools">
- Useful tools
</a>
</li>
<li
data-nav-type="parent"
data-index="5"
@mouseenter="$el.classList.contains('has-children') && open('5')"
@mouseleave="$el.classList.contains('has-children') && close()"
class="nav-list-item group relative w-full md:w-auto"
>
<div
class="nav-item-wrapper group/parent cursor-pointer md:cursor-default"
:class="activeMenu === '5' ? 'bg-lightgray dark:bg-zinc-800' : ''"
@click="if ($el.parentElement.classList.contains('has-children')) { toggle('5'); $event.preventDefault(); $event.stopPropagation(); }"
>
<a
href="/contact/"
class="nav-item-link "
data-label="Contact"
:aria-expanded="$el.closest('.has-children') ? (activeMenu === '5' ? 'true' : 'false') : null"
:aria-haspopup="$el.closest('.has-children') ? 'menu' : null"
>
<span class="relative">
Contact
</span>
<svg
class="desktop-indicator hidden md:block size-3 text-gray-400 transition-transform duration-200"
:class="activeMenu === '5' ? 'rotate-180' : ''"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</a>
<button
type="button"
@click.stop="toggle('5')"
class="nav-toggle-btn"
aria-label="Toggle Submenu"
:aria-expanded="activeMenu === '5' ? 'true' : 'false'"
:aria-controls="'submenu-5'"
>
<svg viewBox='0 0 100 100' class='size-4 transition-transform duration-200' :class="activeMenu === '5' ? 'rotate-180' : ''" aria-hidden="true">
<use href='/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon'></use>
</svg>
</button>
</div>
<div
id="submenu-5"
x-cloak
x-show="activeMenu === '5'"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
:class="previousActiveMenu !== null ? 'transition-none !duration-0' : ''"
class='nav-dropdown-panel origin-top'
>
<ul class='nav-dropdown-content nav-dropdown-list font-heading' role="menu">
</ul>
</div>
</li>
<span class="text-sm js-tana-lang-current">
en
</span>
<svg
class="w-2.5 h-2.5 text-gray-600 dark:text-gray-300 transition-transform duration-200"
:class="open ? 'rotate-180' : ''"
viewBox="0 0 100 100"
aria-hidden="true"
>
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#up-icon"></use>
</svg>
</div>
</div>
<div class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-300">
<div class='social-links '>
<a data-no-prefetch target="_blank" rel='me noopener noreferrer nofollow ugc' class='social-brand-link ' href='https://x.com/bepublish' aria-label='Twitter'>
<svg viewBox='0 0 100 100' aria-hidden='true'><use href='/assets/cache/sprite.svg?v=4dc9c9ba16#twitter-icon'></use></svg>
</a>
<a data-no-prefetch target="_blank" rel='noopener noreferrer nofollow ugc' class='social-brand-link ' href='https://www.youtube.com/@bePublishHQ' aria-label='Youtube'>
<svg viewBox='0 0 100 100' aria-hidden='true'><use href='/assets/cache/sprite.svg?v=4dc9c9ba16#youtube-icon'></use></svg>
</a>
<a data-no-prefetch target="_blank" rel='noopener noreferrer nofollow ugc' class='social-brand-link ' href='https://bsky.app/profile/index.bepublish.com.ap.brid.gy' aria-label='Bluesky'>
<svg viewBox='0 0 100 100' aria-hidden='true'><use href='/assets/cache/sprite.svg?v=4dc9c9ba16#bluesky-icon'></use></svg>
</a>
<a data-no-prefetch class='social-brand-link js-tana-rss-link' href='https://bepublish.com/rss/' aria-label='RSS'>
<svg viewBox='0 0 100 100' aria-hidden='true'><use href='/assets/cache/sprite.svg?v=4dc9c9ba16#rss-icon'></use></svg>
</a>
<script>
if (window.Tana && window.Tana.sync) window.Tana.sync.syncRSS();
</script>
<div class="md:col-span-1">
<article class="h-full">
<div class="post-card-tag-wrap">
<div class="card-tag-badge">
Tutorials
</div>
</div>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
<div class="access-badge-container">
<button data-portal="signup/free" class="access-icon-btn is-locked">
<svg viewBox="0 0 100 100" aria-hidden="true" class="size-4 sm:size-5">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#lock-icon"></use>
</svg>
</button>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title !line-clamp-2 !hover:line-clamp-2 lg:!line-clamp-2 sm:!line-clamp-2">
Boost writing productivity in ghost with the PARA Method
</h3>
<p class="card-excerpt">
This tutorial shows writers how to integrate PARA Method right into ghost dasboard, increasing productivity and efficiency in content creation.
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<picture>
<source srcset="/content/images/size/w100/format/avif/2025/10/sifMZe7o_400x400.jpg"
type="image/avif">
<source srcset="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
type="image/webp">
<img loading="lazy"
class="card-author-avatar"
src="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
alt="Cuong Thach"
width="32"
height="32">
</picture>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex">
Cuong Thach
</div>
<time datetime="2023-06-20" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
<svg viewBox="0 0 100 100" aria-hidden="true" class="mb-1 size-3.5 sm:hidden">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#lock-solid-icon"></use>
</svg>
<span class="sr-only">Locked</span>
20 Jun, 2023
</time>
</div>
</footer>
</div>
<div class="relative ml-4">
<button @click="activate(); openDropdown = !openDropdown" @click.outside="openDropdown = false"
class="filter-dropdown-btn"
:aria-expanded="openDropdown">
<span x-text="activeTagName">Latest</span>
<svg viewBox="0 0 100 100" aria-hidden="true" class="size-3.5 transition-transform duration-200" :class="openDropdown ? 'rotate-180' : ''">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#down-icon"></use>
</svg>
</button>
<div x-show="openDropdown" x-cloak class="filter-dropdown-menu" x-bind="Dropdown">
<button @click="setTag('all', 'Latest')" class="filter-dropdown-item">
Latest
</button>
<button
data-slug="tutorials"
data-name="Tutorials"
@click="setTag($el.dataset.slug, $el.dataset.name)"
class="filter-dropdown-item"
>
Tutorials
</button>
<button
data-slug="blogging"
data-name="Blogging"
@click="setTag($el.dataset.slug, $el.dataset.name)"
class="filter-dropdown-item"
>
Blogging
</button>
</div>
</div>
</div>
<div x-show="activeTag === 'all'">
<div class="px-0 bg-transparent blog-container">
<article class="h-full">
<div class="post-card-tag-wrap">
<div class="card-tag-badge">
Tutorials
</div>
</div>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
</div>
</div>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title">
How to change fonts in Ghost Editor easily and safely
</h3>
<p class="card-excerpt">
A simple and safe way to change the font of ghost editor. Make your writing experience better.
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<picture>
<source srcset="/content/images/size/w100/format/avif/2025/10/sifMZe7o_400x400.jpg"
type="image/avif">
<source srcset="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
type="image/webp">
<img loading="lazy"
class="card-author-avatar"
src="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
alt="Cuong Thach"
width="32"
height="32">
</picture>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex">
Cuong Thach
</div>
<time datetime="2023-06-19" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
19 Jun, 2023
</time>
</div>
</footer>
</div>
<div class="post-card-tag-wrap">
<div class="card-tag-badge">
Tutorials
</div>
</div>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
</div>
</div>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title">
Auto-insert Google Adsense ads to monetize ghost blog
</h3>
<p class="card-excerpt">
You can make money with Google AdSense by putting ads in ghost automatically and the process is simple.
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<picture>
<source srcset="/content/images/size/w100/format/avif/2025/10/sifMZe7o_400x400.jpg"
type="image/avif">
<source srcset="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
type="image/webp">
<img loading="lazy"
class="card-author-avatar"
src="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
alt="Cuong Thach"
width="32"
height="32">
</picture>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex">
Cuong Thach
</div>
<time datetime="2023-05-31" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
31 May, 2023
</time>
</div>
</footer>
</div>
<div class="post-card-tag-wrap">
<div class="card-tag-badge">
Tutorials
</div>
</div>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
</div>
</div>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title">
The dark mode toggle for Casper theme without modifying it
</h3>
<p class="card-excerpt">
The following is a guide to help you create a dark mode toggle for the Casper theme without having to edit it.
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<picture>
<source srcset="/content/images/size/w100/format/avif/2025/10/sifMZe7o_400x400.jpg"
type="image/avif">
<source srcset="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
type="image/webp">
<img loading="lazy"
class="card-author-avatar"
src="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
alt="Cuong Thach"
width="32"
height="32">
</picture>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex">
Cuong Thach
</div>
<time datetime="2023-05-28" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
28 May, 2023
</time>
</div>
</footer>
</div>
<div class="post-card-tag-wrap">
<div class="card-tag-badge">
Tutorials
</div>
</div>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
</div>
</div>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title">
Simple way to create a table of contents for Ghost articles
</h3>
<p class="card-excerpt">
This tutorial shows you how to make a detailed table of contents for long articles in Ghost without changing the theme.
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<picture>
<source srcset="/content/images/size/w100/format/avif/2025/10/sifMZe7o_400x400.jpg"
type="image/avif">
<source srcset="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
type="image/webp">
<img loading="lazy"
class="card-author-avatar"
src="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
alt="Cuong Thach"
width="32"
height="32">
</picture>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex">
Cuong Thach
</div>
<time datetime="2023-05-28" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
28 May, 2023
</time>
</div>
</footer>
</div>
<div class="post-card-tag-wrap">
<div class="card-tag-badge">
Tutorials
</div>
</div>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
</div>
</div>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title">
Simple tips for creating ghost notification popups
</h3>
<p class="card-excerpt">
Instructions on how to create notification popup for ghost blog are super fast and simple.
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<picture>
<source srcset="/content/images/size/w100/format/avif/2025/10/sifMZe7o_400x400.jpg"
type="image/avif">
<source srcset="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
type="image/webp">
<img loading="lazy"
class="card-author-avatar"
src="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
alt="Cuong Thach"
width="32"
height="32">
</picture>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex">
Cuong Thach
</div>
<time datetime="2023-05-27" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
27 May, 2023
</time>
</div>
</footer>
</div>
<div class="post-card-tag-wrap">
<div class="card-tag-badge">
Tutorials
</div>
</div>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
<div class="access-badge-container">
<button data-portal="signup/free" class="access-icon-btn is-locked">
<svg viewBox="0 0 100 100" aria-hidden="true" class="size-4 sm:size-5">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#lock-icon"></use>
</svg>
</button>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title">
How to configure Mailgun for email sending in Ghost
</h3>
<p class="card-excerpt">
Check out our Mailgun configuration guide for Ghost to ensure you're getting the most out of email.
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<picture>
<source srcset="/content/images/size/w100/format/avif/2025/10/sifMZe7o_400x400.jpg"
type="image/avif">
<source srcset="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
type="image/webp">
<img loading="lazy"
class="card-author-avatar"
src="/content/images/size/w100/format/webp/2025/10/sifMZe7o_400x400.jpg"
alt="Cuong Thach"
width="32"
height="32">
</picture>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex">
Cuong Thach
</div>
<time datetime="2023-05-26" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
<svg viewBox="0 0 100 100" aria-hidden="true" class="mb-1 size-3.5 sm:hidden">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#lock-solid-icon"></use>
</svg>
<span class="sr-only">Locked</span>
26 May, 2023
</time>
</div>
</footer>
</div>
<template x-if="activated" hidden>
<template x-for="post in (cache['all']?.posts || [])" :key="post.id" hidden>
<template x-if="!post.feature_image" hidden>
<picture>
<source
srcset="/content/images/size/w100/format/avif/2025/10/cover.png 100w, /content/images/size/w300/format/avif/2025/10/cover.png 300w, /content/images/size/w450/format/avif/2025/10/cover.png 450w, /content/images/size/w600/format/avif/2025/10/cover.png 600w, /content/images/size/w1024/format/avif/2025/10/cover.png 1000w, /content/images/size/w1280/format/avif/2025/10/cover.png 1280w, /content/images/size/w2000/format/avif/2025/10/cover.png 2000w"
sizes="auto, (max-width: 640px) 100px, 450px"
type="image/avif"
>
<source
srcset="/content/images/size/w100/format/webp/2025/10/cover.png 100w, /content/images/size/w300/format/webp/2025/10/cover.png 300w, /content/images/size/w450/format/webp/2025/10/cover.png 450w, /content/images/size/w600/format/webp/2025/10/cover.png 600w, /content/images/size/w1024/format/webp/2025/10/cover.png 1000w, /content/images/size/w1280/format/webp/2025/10/cover.png 1280w, /content/images/size/w2000/format/webp/2025/10/cover.png 2000w"
sizes="auto, (max-width: 640px) 100px, 450px"
type="image/webp"
>
<img
loading="lazy"
class="post-card-image"
srcset="/content/images/size/w100/2025/10/cover.png 100w, /content/images/size/w300/2025/10/cover.png 300w, /content/images/size/w450/2025/10/cover.png 450w, /content/images/size/w600/2025/10/cover.png 600w, /content/images/size/w1024/2025/10/cover.png 1000w, /content/images/size/w1280/2025/10/cover.png 1280w, /content/images/size/w2000/2025/10/cover.png 2000w"
src="/content/images/size/w450/2025/10/cover.png"
:alt="post.title || ''"
sizes="auto, (max-width: 640px) 100px, 450px"
width="450"
height="300"
>
</picture>
</template>
<template x-if="post.primary_tag" hidden>
<div class="post-card-tag-wrap">
<div class="card-tag-badge" x-text="post.primary_tag.name"></div>
</div>
</template>
<div class="hidden sm:block sm:absolute top-2 right-2 z-10">
<template x-if="post.visibility !== 'public'" hidden>
<div class="access-badge-container !mt-0">
<template x-if="post.access">
<button data-portal="signup/free" class="access-icon-btn !p-1">
<svg viewBox="0 0 100 100" aria-hidden="true" class="size-4">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#unlock-icon"></use>
</svg>
</button>
</template>
<template x-if="!post.access">
<button data-portal="signup/free" class="access-icon-btn is-locked !p-1">
<svg viewBox="0 0 100 100" aria-hidden="true" class="size-4">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#lock-icon"></use>
</svg>
</button>
</template>
<span class="sr-only" x-text="post.visibility"></span>
</div>
</template>
</div>
</div>
<div class="card-content-container sm:p-6">
<div class="flex-1">
<h3 class="sm:h-fit card-title">
<template x-if="post.displayTitle" hidden><span x-html="post.displayTitle"></span></template>
<template x-if="!post.displayTitle" hidden><span x-text="post.title"></span></template>
</h3>
<p class="card-excerpt">
<template x-if="post.displayExcerpt" hidden><span x-html="post.displayExcerpt"></span></template>
<template x-if="!post.displayExcerpt" hidden><span x-text="post.custom_excerpt || post.excerpt || ''"></span></template>
</p>
</div>
<footer class="items-center flex-none sm:flex gap-x-1 -mb-1">
<div class="hidden -space-x-2 sm:flex stack-first-on-top">
<template x-for="author in (post.authors || []).slice(0, 5)" :key="author.id" hidden>
<picture>
<img loading="lazy"
class="card-author-avatar"
:src="author.profile_image ? getGhostImage(author.profile_image, 'xs') : '/assets/avatar.png?v=4dc9c9ba16'"
:alt="author.name"
width="32"
height="32">
</picture>
</template>
</div>
<div class="gap-y-0.5 flex-row sm:flex sm:flex-col">
<div class="hidden px-1 text-xs font-semibold text-black dark:text-gray-200 sm:inline-flex"
x-text="(post.authors || []).map(a => a.name).join(', ')">
</div>
<time :datetime="formatDateISO(post.published_at)" class="inline-flex text-xs text-gray-500 gap-x-1 lg:flex sm:px-1">
<template x-if="post.visibility !== 'public'" hidden>
<div class="inline-flex items-center">
<template x-if="post.access">
<svg viewBox="0 0 100 100" aria-hidden="true" class="mb-1 size-3.5 sm:hidden">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#unlock-solid-icon"></use>
</svg>
</template>
<template x-if="!post.access">
<svg viewBox="0 0 100 100" aria-hidden="true" class="mb-1 size-3.5 sm:hidden">
<use href="/assets/cache/sprite.svg?v=4dc9c9ba16#lock-solid-icon"></use>
</svg>
</template>
<span class="sr-only">Locked</span>
</div>
</template>
<span x-text="formatDate(post.published_at)"></span>
</time>
</div>
</footer>
</div>
<div x-show="isLoading" x-cloak class="px-0 bg-transparent blog-container">
<div class="animate-pulse blog-layout h-full">
<div class="card-img-container bg-gray-200 dark:bg-zinc-800"></div>
<div class="card-content-container sm:p-6 space-y-3">
<div class="h-4 bg-gray-200 dark:bg-zinc-800 rounded w-3/4"></div>
<div class="h-3 bg-gray-200 dark:bg-zinc-800 rounded w-full"></div>
<div class="h-3 bg-gray-200 dark:bg-zinc-800 rounded w-5/6"></div>
</div>
</div>
<div class="animate-pulse blog-layout h-full">
<div class="card-img-container bg-gray-200 dark:bg-zinc-800"></div>
<div class="card-content-container sm:p-6 space-y-3">
<div class="h-4 bg-gray-200 dark:bg-zinc-800 rounded w-3/4"></div>
<div class="h-3 bg-gray-200 dark:bg-zinc-800 rounded w-full"></div>
<div class="h-3 bg-gray-200 dark:bg-zinc-800 rounded w-5/6"></div>
</div>
</div>
<div class="animate-pulse blog-layout h-full">
<div class="card-img-container bg-gray-200 dark:bg-zinc-800"></div>
<div class="card-content-container sm:p-6 space-y-3">
<div class="h-4 bg-gray-200 dark:bg-zinc-800 rounded w-3/4"></div>
<div class="h-3 bg-gray-200 dark:bg-zinc-800 rounded w-full"></div>
<div class="h-3 bg-gray-200 dark:bg-zinc-800 rounded w-5/6"></div>
</div>
</div>
</div>
<div x-show="activeTag !== 'all' && !isLoading" x-cloak class="px-0 bg-transparent blog-container">
<template x-if="activated" hidden>
<template x-for="post in (cache[activeTag]?.posts || [])" :key="post.id" hidden>
<template x-if="!post.feature_image" hidden>
<picture>
<source
srcset="/content/images/size/w100/format/avif/2025/10/cover.png 100w, /content/images/size/w300/format/avif/2025/10/cover.png 300w, /content/images/size/w450/format/avif/2025/10/cover.png 450w, /content/images/size/w600/format/avif/2025/10/cover.png 600w, /content/images/size/w1024/format/avif/2025/10/cover.png 1000w, /content/images/size/w1280/format/avif/2025/10/cover.png 1280w, /content/images/size/w2000/format/avif/2025/10/cover.png 2000w"
sizes="auto, (max-width: 640px) 100px, 450px"
type="image/avif"
>
<source
srcset="/content/images/size/w100/format/webp/2025/10/cover.png 100w, /content/images/size/w300/format/webp/2025/10/cover.png 300w, /content/images/size/w450/format/webp/2025/10/cover.png 450w, /content/images/size/w600/format/webp/2025/10/cover.png 600w, /content/images/size/w1024/format/webp/2025/10/cover.png 1000w, /content/images/size/w1280/format/webp/2025/10/cover.png 1280w, /content/images/size/w2000/format/webp/2025/10/cover.png 2000w"
sizes="auto, (max-width: 640px) 100px, 450px"
type="image/webp"
>
<img
loading="lazy"
class="post-card-image"
srcset="/content/images/size/w100/2025/10/cover.png 100w, /content/images/size/w300/2025/10/cover.png 300w, /content/images/size/w450/2025/10/cover.png 450w, /content/ima
… [truncated — open the raw llms.txt above for the full file]
llmtxt.app – AI SEO & Search Engine Optimization Directory