Editor vs Reality (Self-Hosted)

doncabreraphone · March 6, 2022, 10:22pm

I’m somewhat confused here. I installed Ghost with Casper locally, and so far, I’m seeing huge differences between what the EditorEditor shows and what I see once I preview my posts.
It’s gotten to the point where differences are so abysmal that I have to use HTML snippets to keep consistency.

The Editor looks excellent, but it differs significantly from what I end up seeing, and since Casper is the “default” theme for Ghost, I was expecting to see at least some design coherence, but so far, I’m left speechless by how inaccurate and different some of the features are.

Here’s the editor version:

And here is what I get when I publish the site.

What’s the point in introducing a new feature if there is no way for me to use it? It doesn’t even creates the styles once I press “Publish”.

Casper: 4.7.3
Ghost: 4.8

I’m using ghost locally.

Are those features something for paid customers only? If so, it should say so explicitly on the website.

mjw · March 7, 2022, 11:08am

Ghost doesn’t use a WYSIWYG editor intentionally. It has a clean interface to help creative writing.

When I want to add custom blocks, I create an HTML snippet and save this for reuse. But remember, the editor and theme use different CSS, so you need to understand and test the code you include.

Since you have included the markup in your images, it’s not possible to comment further.

doncabreraphone · March 7, 2022, 11:31am

Hi, that really caught me by surprise. So the features announced, like the header cards, will never work unless I write my own css code for them? That doesn’t really makes much sense. I was under the impression that the cards would work right off the bat. The header cards work partially, so I figured out there must be something wrong with my Casper theme , but since it is a new install, IDK

mjw · March 7, 2022, 1:25pm

You didn’t point out that you were using a callout card; the image implied an HTML card. I can’t comment on Casper since I don’t use this theme. However, they do work with themes from Biron.

doncabreraphone · March 7, 2022, 1:35pm

But how do they natively work??? The screenshots show it working on Casper, but they don’t work on my fresh installation. So what is going on here? Why the official post shows screenshots of something that is not implemented on the default theme??

mjw · March 7, 2022, 1:49pm

Most likely because they do work.

You’ll need to share a little more information about your installation. And please share the HTML block as this may have broken CSS further down.

Edit: I just changed the theme to Casper on one of my sites and added some cards. They all render correctly.

doncabreraphone · March 7, 2022, 2:01pm

Okay now I’m really confused. My installation runs on windows, locally. I did nothing, just npm install ghost, then selected Casper. That’s all I did. Added a header callout card and it’s broken. Did I missed something?

doncabreraphone · March 7, 2022, 2:11pm

I’m going to do a fresh install, but damn, I expected to work from day one. This might be my fault somehow, I just can’t figure how.

mjw · March 7, 2022, 4:51pm

What instructions did you follow to install Ghost? I’d expect you to do the following, so wonder if you used an outdated guide.

npm install ghost-cli@latest -g
ghost install local

Edit: I just created another local site with Casper. As you can see, everything renders correctly after following the above instructions.

doncabreraphone · March 7, 2022, 6:38pm

Something must be going on.

This is what I did:

npm install ghost-cli@latest -g
ghost install local

And this is what I got.

What you see there is the Header Card and the Callout card.

I did nothing different than you did. Test on Chrome and Firefox, latest version both. I’m running a windows 10 machine. Should be fine either way.

$ ghost install local
√ Checking system Node.js version - found v16.14.0
√ Checking current folder permissions
√ Checking memory availability
√ Checking free space
√ Checking for latest Ghost version
√ Setting up install directory
√ Downloading and installing Ghost v4.38.0
√ Finishing install process
√ Configuring Ghost
√ Setting up instance
√ Starting Ghost

Ghost uses direct mail by default. To set up an alternative email method read our docs at https://ghost.org/docs/config/#mail

doncabreraphone · March 7, 2022, 6:43pm

I just found that for some reason I am not getting a JS file. Portal.min.js shows as 302 (not found). No idea why this is happening, no idea what it does or if it has something to do with my problem. I can see it later gets loaded, but I cannot be sure if it is the same file, even if it has the same name. Just noticed it and posted it here.

mjw · March 7, 2022, 7:22pm

HTTP 302 is a temporary redirection, but as you say, the file loads.

Again, what is in the HTML block? Where does the “sasaasas” etc. come from?

doncabreraphone · March 7, 2022, 7:38pm

There is no HTML block, I’m using the editor and adding a card through the editor.

Like this

And when I look at the post, this is what I get:

The DIV is there, the classes are there, but for some reason, the CSS styles are not showing up.

Here is me adding a button. This is the editor callout.

And when I hit Publish, this is what I get on the site:

mjw · March 7, 2022, 8:02pm

It looks like cards.min.css isn’t loading. What happens when you type “http://localhost:2368/public/cards.min.css” in your browser? (Make sure you specify the correct port)

doncabreraphone · March 7, 2022, 8:05pm

I get a 404 error, you are right, seems that file is not loading. But I don’t see the error anywhere?

I found this post, a guy reported the same issue. Sadly, he seems to have abandoned ghost.

My package.json is correct.

The http__localhost_2368__development.log shows this (a 404 error for the cards.min.css)

{"name":"Log","hostname":"DESKTOP","pid":3668,"level":30,"req":{"meta":{"requestId":"34727ba4-f918-4ee5-aaf7-696ed49b2390","userId":null},"url":"/public/cards.min.css","method":"GET","originalUrl":"/public/cards.min.css","params":{},"headers":{"host":"localhost:2368","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8","accept-language":"en-US,en;q=0.5","accept-encoding":"gzip, deflate","connection":"keep-alive","cookie":"**REDACTED**","upgrade-insecure-requests":"1","sec-fetch-dest":"document","sec-fetch-mode":"navigate","sec-fetch-site":"none","sec-fetch-user":"?1"},"query":{}},"res":{"_headers":{"x-powered-by":"Express","cache-control":"no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0","content-type":"text/html; charset=utf-8","etag":"W/\"3207-66Cm6wMvq5dLdcDIxd1CmDjHrEc\"","vary":"Accept-Encoding","content-encoding":"gzip"},"statusCode":404,"responseTime":"40ms"},"msg":"","time":"2022-03-07T20:07:44.546Z","v":0}

mjw · March 7, 2022, 8:32pm

Is the line missing in <head> … </head> or just not found? What’s in ./content/public?

doncabreraphone · March 7, 2022, 8:37pm

The line is missing, yes:

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Customizing your brand and design settings</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        :root {
            --button-bg-color: #ffffff;
            --button-text-color: var(--color-darkgrey);
        }
    </style>

    <link rel="stylesheet" type="text/css" href="/assets/built/screen.css?v=e8b9d60733" />

    <meta name="description" content="How to tweak a few settings in Ghost to transform your site from a generic template to a custom brand with style and personality." />
    <link rel="canonical" href="http://localhost:2368/design/" />
    <meta name="referrer" content="no-referrer-when-downgrade" />
    
    <meta property="og:site_name" content="The Daily Cool" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="Customizing your brand and design settings" />
    <meta property="og:description" content="How to tweak a few settings in Ghost to transform your site from a generic template to a custom brand with style and personality." />
    <meta property="og:url" content="http://localhost:2368/design/" />
    <meta property="og:image" content="https://static.ghost.org/v4.0.0/images/publishing-options.png" />
    <meta property="article:published_time" content="2022-03-07T19:27:08.000Z" />
    <meta property="article:modified_time" content="2022-03-07T19:39:36.000Z" />
    <meta property="article:tag" content="Getting Started" />
    
    <meta property="article:publisher" content="https://www.facebook.com/ghost" />
    <meta property="article:author" content="https://www.facebook.com/ghost" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Customizing your brand and design settings" />
    <meta name="twitter:description" content="How to tweak a few settings in Ghost to transform your site from a generic template to a custom brand with style and personality." />
    <meta name="twitter:url" content="http://localhost:2368/design/" />
    <meta name="twitter:image" content="https://static.ghost.org/v4.0.0/images/publishing-options.png" />
    <meta name="twitter:label1" content="Written by" />
    <meta name="twitter:data1" content="Ghost" />
    <meta name="twitter:label2" content="Filed under" />
    <meta name="twitter:data2" content="Getting Started" />
    <meta name="twitter:site" content="@ghost" />
    <meta name="twitter:creator" content="ghost" />
    <meta property="og:image:width" content="2000" />
    <meta property="og:image:height" content="1210" />
    
    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "publisher": {
        "@type": "Organization",
        "name": "The Daily Cool",
        "url": "http://localhost:2368/",
        "logo": {
            "@type": "ImageObject",
            "url": "http://localhost:2368/favicon.ico",
            "width": 48,
            "height": 48
        }
    },
    "author": {
        "@type": "Person",
        "name": "Ghost",
        "image": {
            "@type": "ImageObject",
            "url": "https://static.ghost.org/v4.0.0/images/ghost-user.png",
            "width": 400,
            "height": 400
        },
        "url": "http://localhost:2368/author/ghost/",
        "sameAs": [
            "https://ghost.org",
            "https://www.facebook.com/ghost",
            "https://twitter.com/ghost"
        ]
    },
    "headline": "Customizing your brand and design settings",
    "url": "http://localhost:2368/design/",
    "datePublished": "2022-03-07T19:27:08.000Z",
    "dateModified": "2022-03-07T19:39:36.000Z",
    "image": {
        "@type": "ImageObject",
        "url": "https://static.ghost.org/v4.0.0/images/publishing-options.png",
        "width": 2000,
        "height": 1210
    },
    "keywords": "Getting Started",
    "description": "How to tweak a few settings in Ghost to transform your site from a generic template to a custom brand with style and personality.",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "http://localhost:2368/"
    }
}
    </script>

    <meta name="generator" content="Ghost 4.38" />
    <link rel="alternate" type="application/rss+xml" title="The Daily Cool" href="http://localhost:2368/rss/" />
    <script defer src="https://unpkg.com/@tryghost/portal@~1.15.0/umd/portal.min.js" data-ghost="http://localhost:2368/" 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;
}</style><style>:root {--ghost-accent-color: #FF1A75;}</style>

</head>
<body class="post-template tag-getting-started">
<div class="viewport">

    <header id="gh-head" class="gh-head has-cover">
        <nav class="gh-head-inner inner gh-container">

            <div class="gh-head-brand">
                <a class="gh-head-logo" href="http://localhost:2368">
                        The Daily Cool
                </a>
                <a class="gh-burger" role="button">
                    <div class="gh-burger-box">
                        <div class="gh-burger-inner"></div>
                    </div>
                </a>
            </div>
            <div class="gh-head-menu">
                <ul class="nav">
    <li class="nav-home"><a href="http://localhost:2368/">Home</a></li>
    <li class="nav-about"><a href="http://localhost:2368/about/">About</a></li>
    <li class="nav-collection"><a href="http://localhost:2368/tag/getting-started/">Collection</a></li>
    <li class="nav-author"><a href="http://localhost:2368/author/ghost/">Author</a></li>
    <li class="nav-portal"><a href="http://localhost:2368/portal/">Portal</a></li>
</ul>

            </div>
            <div class="gh-head-actions">
                <div class="gh-social">
                        <a class="gh-social-facebook" href="https://www.facebook.com/ghost" title="Facebook" target="_blank" rel="noopener"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg></a>
                        <a class="gh-social-twitter" href="https://twitter.com/ghost" title="Twitter" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
</a>
                </div>

                    <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
            </div>
        </nav>
    </header>

    <div class="site-content">
        



<main id="site-main" class="site-main">
    <article class="article post tag-getting-started ">

        <header class="article-header gh-canvas">

            <section class="article-tag">
                <a href="http://localhost:2368/tag/getting-started/">Getting Started</a>
            </section>

            <h1 class="article-title">Customizing your brand and design settings</h1>

            <p class="article-excerpt">How to tweak a few settings in Ghost to transform your site from a generic template to a custom brand with style and personality.</p>

            <div class="article-byline">
                <section class="article-byline-content">
                    <ul class="author-list">
                        <li class="author-list-item">
                            <a href="/author/ghost/" class="author-avatar">
                                <img class="author-profile-image" src="https://static.ghost.org/v4.0.0/images/ghost-user.png" alt="Ghost" />
                            </a>
                        </li>
                    </ul>
                    <div class="article-byline-meta">
                        <h4 class="author-name"><a href="/author/ghost/">Ghost</a></h4>
                        <div class="byline-meta-content">
                            <time class="byline-meta-date" datetime="2022-03-07">Mar 7, 2022</time>
                            <span class="byline-reading-time"><span class="bull">&bull;</span> 3 min read</span>
                        </div>
                    </div>
                </section>
            </div>

            <figure class="article-image">
                <img
                    srcset="https://static.ghost.org/v4.0.0/images/publishing-options.png 300w,
                            https://static.ghost.org/v4.0.0/images/publishing-options.png 600w,
                            https://static.ghost.org/v4.0.0/images/publishing-options.png 1000w,
                            https://static.ghost.org/v4.0.0/images/publishing-options.png 2000w"
                    sizes="(min-width: 1400px) 1400px, 92vw"
                    src="https://static.ghost.org/v4.0.0/images/publishing-options.png"
                    alt="Customizing your brand and design settings"
                />
            </figure>
        </header>

        <section class="gh-content gh-canvas">
            <p>As discussed in the <a href="http://localhost:2368/welcome/">introduction</a> post, one of the best things about Ghost is just how much you can customize to turn your site into something unique. Everything about your layout and design can be changed, so you're not stuck with yet another clone of a social network profile.</p><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-emoji">💡</div><div class="kg-callout-text">This is what I'm doing.</div></div><p>How far you want to go with customization is completely up to you, there's no right or wrong approach! The majority of people use one of Ghost's built-in themes to get started, and then progress to something more bespoke later on as their site grows. </p><div class="kg-card kg-button-card kg-align-center"><a href="http://localhost:2368/" class="kg-btn kg-btn-accent">test</a></div><p>The best way to get started is with Ghost's branding settings, where you can set up colors, images and logos to fit with your brand.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.ghost.org/v4.0.0/images/brandsettings.png" class="kg-image" alt loading="lazy" width="3456" height="2338"><figcaption>Ghost Admin → Settings → Branding</figcaption></figure><p>Any Ghost theme that's up to date and compatible with Ghost 4.0 and higher will reflect your branding settings in the preview window, so you can see what your site will look like as you experiment with different options.</p><p>When selecting an accent color, try to choose something which will contrast well with white text. Many themes will use your accent color as the background for buttons, headers and navigational elements. Vibrant colors with a darker hue tend to work best, as a general rule.</p><h2 id="installing-ghost-themes">Installing Ghost themes</h2><p>By default, new sites are created with Ghost's friendly publication theme, called Casper. Everything in Casper is optimized to work for the most common types of blog, newsletter and publication that people create with Ghost — so it's a perfect place to start.</p><p>However, there are hundreds of different themes available to install, so you can pick out a look and feel that suits you best.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.ghost.org/v4.0.0/images/themesettings.png" class="kg-image" alt loading="lazy" width="3208" height="1618"><figcaption>Ghost Admin → Settings → Theme</figcaption></figure><p>Inside Ghost's theme settings you'll find 4 more official themes that can be directly installed and activated. Each theme is suited to slightly different use-cases.</p><ul><li><strong>Casper</strong> <em>(default)</em> — Made for all sorts of blogs and newsletters</li><li><strong>Edition</strong> — A beautiful minimal template for newsletter authors</li><li><strong>Alto</strong> — A slick news/magazine style design for creators</li><li><strong>London</strong> — A light photography theme with a bold grid</li><li><strong>Ease</strong> — A library theme for organizing large content archives</li></ul><p>And if none of those feel quite right, head on over to the <a href="https://ghost.org/themes/">Ghost Marketplace</a>, where you'll find a huge variety of both free and premium themes.</p><h2 id="building-something-custom">Building something custom</h2><p>Finally, if you want something completely bespoke for your site, you can always build a custom theme from scratch and upload it to your site.</p><p>Ghost's theming template files are very easy to work with, and can be picked up in the space of a few hours by anyone who has just a little bit of knowledge of HTML and CSS. Templates from other platforms can also be ported to Ghost with relatively little effort.</p><p>If you want to take a quick look at the theme syntax to see what it's like, you can <a href="https://github.com/tryghost/casper/">browse through the files of the default Casper theme</a>. We've added tons of inline code comments to make it easy to learn, and the structure is very readable.</p><figure class="kg-card kg-code-card"><pre><code class="language-handlebars">{{#post}}
&lt;article class="article {{post_class}}"&gt;

    &lt;h1&gt;{{title}}&lt;/h1&gt;
    
    {{#if feature_image}}
    	&lt;img src="{{feature_image}}" alt="Feature image" /&gt;
    {{/if}}
    
    {{content}}

&lt;/article&gt;
{{/post}}</code></pre><figcaption>A snippet from a post template</figcaption></figure><p>See? Not that scary! But still completely optional. </p><p>If you're interested in creating your own Ghost theme, check out our extensive <a href="https://ghost.org/docs/themes/">theme documentation</a> for a full guide to all the different template variables and helpers which are available.</p>
        </section>


    </article>
</main>


    <section class="footer-cta ">
        <div class="inner">
            <h2>Sign up for more like this.</h2>
            <a class="footer-cta-button" href="#/portal" data-portal>
                <div class="footer-cta-input">Enter your email</div>
                <span>Subscribe</span>
            </a>
        </div>
    </section>




            <aside class="read-more-wrap">
                <div class="read-more inner">
                        
<article class="post-card post ">

    <a class="post-card-image-link" href="/welcome/">
        <img class="post-card-image"
            srcset="https://static.ghost.org/v4.0.0/images/welcome-to-ghost.png 300w,
                    https://static.ghost.org/v4.0.0/images/welcome-to-ghost.png 600w,
                    https://static.ghost.org/v4.0.0/images/welcome-to-ghost.png 1000w,
                    https://static.ghost.org/v4.0.0/images/welcome-to-ghost.png 2000w"
            sizes="(max-width: 1000px) 400px, 800px"
            src="https://static.ghost.org/v4.0.0/images/welcome-to-ghost.png"
            alt="Start here for a quick overview of everything you need to know"
            loading="lazy"
        />
    </a>

    <div class="post-card-content">

        <a class="post-card-content-link" href="/welcome/">
            <header class="post-card-header">
                <h2 class="post-card-title">Start here for a quick overview of everything you need to know</h2>
            </header>
            <div class="post-card-excerpt">
                <p>We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.</p>
            </div>
        </a>

        <footer class="post-card-meta">
            <ul class="author-list">
                <li class="author-list-item">
                    <a href="/author/ghost/" class="static-avatar">
                        <img class="author-profile-image" src="https://static.ghost.org/v4.0.0/images/ghost-user.png" alt="Ghost" loading="lazy" />
                    </a>
                </li>
            </ul>
            <div class="post-card-byline-content">
                <span class="post-card-byline-author"><a href="/author/ghost/">Ghost</a></span>
                <span class="post-card-byline-date"><time datetime="2022-03-07">Mar 7, 2022</time> <span class="bull">&bull;</span> 2 min read</span>
            </div>
        </footer>

    </div>

</article>
                        
<article class="post-card post ">

    <a class="post-card-image-link" href="/write/">
        <img class="post-card-image"
            srcset="https://static.ghost.org/v4.0.0/images/writing-posts-with-ghost.png 300w,
                    https://static.ghost.org/v4.0.0/images/writing-posts-with-ghost.png 600w,
                    https://static.ghost.org/v4.0.0/images/writing-posts-with-ghost.png 1000w,
                    https://static.ghost.org/v4.0.0/images/writing-posts-with-ghost.png 2000w"
            sizes="(max-width: 1000px) 400px, 800px"
            src="https://static.ghost.org/v4.0.0/images/writing-posts-with-ghost.png"
            alt="Writing and managing content in Ghost, an advanced guide"
            loading="lazy"
        />
    </a>

    <div class="post-card-content">

        <a class="post-card-content-link" href="/write/">
            <header class="post-card-header">
                <h2 class="post-card-title">Writing and managing content in Ghost, an advanced guide</h2>
            </header>
            <div class="post-card-excerpt">
                <p>A full overview of all the features built into the Ghost editor, including powerful workflow automations to speed up your creative process.</p>
            </div>
        </a>

        <footer class="post-card-meta">
            <ul class="author-list">
                <li class="author-list-item">
                    <a href="/author/ghost/" class="static-avatar">
                        <img class="author-profile-image" src="https://static.ghost.org/v4.0.0/images/ghost-user.png" alt="Ghost" loading="lazy" />
                    </a>
                </li>
            </ul>
            <div class="post-card-byline-content">
                <span class="post-card-byline-author"><a href="/author/ghost/">Ghost</a></span>
                <span class="post-card-byline-date"><time datetime="2022-03-07">Mar 7, 2022</time> <span class="bull">&bull;</span> 5 min read</span>
            </div>
        </footer>

    </div>

</article>
                        
<article class="post-card post ">

    <a class="post-card-image-link" href="/portal/">
        <img class="post-card-image"
            srcset="https://static.ghost.org/v4.0.0/images/creating-a-custom-theme.png 300w,
                    https://static.ghost.org/v4.0.0/images/creating-a-custom-theme.png 600w,
                    https://static.ghost.org/v4.0.0/images/creating-a-custom-theme.png 1000w,
                    https://static.ghost.org/v4.0.0/images/creating-a-custom-theme.png 2000w"
            sizes="(max-width: 1000px) 400px, 800px"
            src="https://static.ghost.org/v4.0.0/images/creating-a-custom-theme.png"
            alt="Building your audience with subscriber signups"
            loading="lazy"
        />
    </a>

    <div class="post-card-content">

        <a class="post-card-content-link" href="/portal/">
            <header class="post-card-header">
                <h2 class="post-card-title">Building your audience with subscriber signups</h2>
            </header>
            <div class="post-card-excerpt">
                <p>How Ghost allows you to turn anonymous readers into an audience of active subscribers, so you know what's working and what isn't.</p>
            </div>
        </a>

        <footer class="post-card-meta">
            <ul class="author-list">
                <li class="author-list-item">
                    <a href="/author/ghost/" class="static-avatar">
                        <img class="author-profile-image" src="https://static.ghost.org/v4.0.0/images/ghost-user.png" alt="Ghost" loading="lazy" />
                    </a>
                </li>
            </ul>
            <div class="post-card-byline-content">
                <span class="post-card-byline-author"><a href="/author/ghost/">Ghost</a></span>
                <span class="post-card-byline-date"><time datetime="2022-03-07">Mar 7, 2022</time> <span class="bull">&bull;</span> 2 min read</span>
            </div>
        </footer>

    </div>

</article>
                </div>
            </aside>



    </div>

    <footer class="site-footer outer">
        <div class="inner">
            <section class="copyright"><a href="http://localhost:2368">The Daily Cool</a> &copy; 2022</section>
            <nav class="site-footer-nav">
                <ul class="nav">
    <li class="nav-data-privacy"><a href="http://localhost:2368/privacy/">Data &amp; privacy</a></li>
    <li class="nav-contact"><a href="http://localhost:2368/contact/">Contact</a></li>
    <li class="nav-contribute"><a href="http://localhost:2368/contribute/">Contribute →</a></li>
</ul>

            </nav>
            <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
        </div>
    </footer>

</div>


<script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous">
</script>
<script src="/assets/built/casper.js?v=e8b9d60733"></script>
<script>
$(document).ready(function () {
    // Mobile Menu Trigger
    $('.gh-burger').click(function () {
        $('body').toggleClass('gh-head-open');
    });
    // FitVids - Makes video embeds responsive
    $(".gh-content").fitVids();
});
</script>



</body>
</html>

Absolutely nothing:

mjw · March 7, 2022, 8:52pm

Look in ./content/public not ./current/content/public. I’ve no idea what’s happening, but it may be the symbolic links (I don’t use Windows, so not much help here.) Maybe you can list them to see if they were created correctly?

doncabreraphone · March 7, 2022, 8:57pm

The `./content/public folder is empty too, no Readme file or anything. I should have gone into law school like mom told me ;(

GBJsolution · March 9, 2022, 10:00am

I am the person who reported the issue you have linked. I am still with Ghost and developing themes. In case you like to see those, please visit https://gbjsolution.com/

I was not able to solve the issue that’s why I am using a workaround. At the time of development, I insert the card CSS and javascript from a live production site via code injection.

<link rel="stylesheet" type="text/css" href="https://mylivesite.com/public/cards.min.css?v=db70eba112">
<script defer="" src="https://mylivesite.com/public/cards.min.js?v=db70eba112"></script>

If you inspect your live site, within <head> tag you will find CSS and JS. Copy those two lines and add those in your local development site’s code injection.

You are good to go with local development.

Topic		Replies	Views
Porting over the current gallery block back to the original Casper theme Themes	3	407	August 16, 2022
Custom theme development Themes	5	954	October 31, 2018
Ghost(Pro) and Developing a Website Locally Developer help	2	192	December 19, 2023
New to ghost, have a few questions Themes	0	369	August 12, 2020
Ghost Theme customization workflow? Using Ghost	0	290	May 11, 2021

Editor vs Reality (Self-Hosted)

Related Topics