About the Blog Design

How did I start using Ghost? At a meating about the difficulty users, writing on a non technical Blog, did experienced with the complexity of WP. The question was raised to find somthing less complicated. Showed my blog and the user response was "we go Ghost".

The Engine

My choice of CRM is two, I have been using WP for years, but new blogs are on Ghost. Why do I prefer Ghost for my new blog? As WP is the do anything with all bells and whistles, it's more heavy and quite complicated. I don't really need all those things for an IT blog. Both are free to use, but a paid version brings benefits.

Ghost is easy and fast to use, and can be tailord to your needs.

Setting up Ghost

You can set up Ghost easily on a VPS or a VM, depending on your needs. A web server does not need much of resources. Therefore, it's quite inexpensive to run it as an VPS from Ghost or any other supplier of VPS, if you decide to go that rout.

The Design

Everyone has it's preferred style. I have used different styles over time, but the current theme is the source (v1.4.0) with some add-ons.

Then its up to you to set the basic loook and feel for the site branding like:
Accent color, favicon, logo, cover and captions ...

The Theme can also be custoized in many ways as placement of logo, backgroundcolor, fonts, style and feed style, and pages ...

 The top bar I use, is part of the system, called the Announcement bar.

Code injection

The other parts are the Prism Themes, Stylesheets and Functions. They are added either to the Site Header and/or the Site Footer.

• Autoloader
  Automatically loads the needed languages to highlight the code blocks.
• Toolbar
  Attach a toolbar for plugins to easily register buttons on the top of a code block.

Not currently on this blog

• Line Numbers
  Line number at the beginning of code lines.
• Autolinker
  Converts URLs and emails in code to clickable links. Parses Markdown links in comments.

And many more. Can be found on the web, see References below.

Site Header

<!-- Google tag (gtag.js) -->
<!-- Replace the dummy id (G-1234567890) with your id -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1234567890"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-1234567890');
</script>

<!-- Prism Themes -->
<!-- Prism Shade of Purple min.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-shades-of-purple.min.css" integrity="sha512-HM2OlrR8saZI2M4q2qLhGTYpsV8Oh6ktoHraqnYws8D06R7T8a6zIXi/denZBRNxXGHAgpKbIQA3gbz9rQQuuQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Prism plugins -->
<!-- Prism Toolbar min.css --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/toolbar/prism-toolbar.min.css" integrity="sha512-Dqf5696xtofgH089BgZJo2lSWTvev4GFo+gA2o4GullFY65rzQVQLQVlzLvYwTo0Bb2Gpb6IqwxYWtoMonfdhQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Share on Social font-awsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<!-- Table of Contents tocbot.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.34.0/tocbot.min.css" integrity="sha512-4q0OX9NAYcRTFEfy9nTK0AV9N7MxM665neDXEW3CjAj1pXc6+8Bcd6ryXl6cY8mTBBXt0aXepnSDLLQZSuJRww==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
  .gh-content {
    position: relative;
  }

  .gh-content a {
    text-decoration: none;
  }

  .gh-toc > .toc-list {
    position: relative;
  }

  .toc-list {
    overflow: hidden;
    list-style: none;
  }

  @media (min-width: 1300px) {
    .toc-sidebar {
      position: absolute;
      top: 0;
      bottom: 0;
      margin-top: 4vmin;
      grid-column: full-start / main-start;
      margin-left: 2vmin;
      margin-right: 4vmin;
      z-index: 99;
    }

    .gh-toc {
      position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
      top: 4vmin;
    }
  }

  @media (min-width: 1600px) {
    .toc-sidebar {
      margin-left: 16vmin;
    }
  }

  .gh-toc .is-active-link::before {
    background-color: var(--ghost-accent-color); /* Defines TOC   accent color based on Accent color set in Ghost Admin */
    font-weight: bold;
  }
</style>

Site Footer

<!-- prism-core.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-core.min.js" integrity="sha512-Uw06iFFf9hwoN77+kPl/1DZL66tKsvZg6EWm7n6QxInyptVuycfrO52hATXDRozk7KWeXnrSueiglILct8IkkA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- prism-autoloader.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- prism-toolbar.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/toolbar/prism-toolbar.min.js" integrity="sha512-st608h+ZqzliahyzEpETxzU0f7z7a9acN6AFvYmHvpFhmcFuKT8a22TT5TpKpjDa3pt3Wv7Z3SdQBCBdDPhyWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Copy to clipboard -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" integrity="sha512-/kVH1uXuObC0iYgxxCKY41JdWOkKOxorFVmip+YVifKsJ4Au/87EisD1wty7vxN2kAhnWh6Yc8o/dSAXj6Oz7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Table of Contents -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.28.2/tocbot.min.js" integrity="sha512-+9XzRSJjnUN2OI106uAbbVZ3f+z1ncIRZFOr56hEdaxbQeZ8i1+B7OVjdF8tG4YhgxM/rWP73K2SiG93x6UJoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.gh-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.gh-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3, h4, h5',
        // Ensure correct positioning
        hasInnerContainers: true,
    });
</script>

Snippets

Table of Contents

<!-- TOC on the side -->
<aside class="gh-sidebar toc-sidebar">
  <div class="gh-toc"></div>
</aside>

Share on Social Media

<style>
.share-button {
  background-color: #b966bb;
  color: #FFFFFF;
  border: 1px solid #00BFFF;
  padding: 15px 40px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}

.share-button:hover {
  background-color: #b966bb;
  color: #000000;
  border-color: #00BFFF;
}

.share-icons {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.share-icons.show {
  display: flex;
}

.share-icons button {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 0;
  margin: 5px;
  border-radius: 50%;
  background-color: #b966bb;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 40px;
  color: #FFFFFF;
}

.share-icons button i {
  color: #FFFFFF;
}
</style>

<button id="share-button" class="share-button" onclick="toggleShareDropdown()">
  Share this Blog Post on Social Media
</button>

<div class="share-icons" id="share-icons">
  <button onclick="shareOnFacebook()"><i class="fab fa-facebook-f"></i></button>
  <button onclick="shareOnTwitter()"><i class="fa-brands fa-x-twitter"></i></button>
  <button onclick="shareOnPinterest()"><i class="fab fa-pinterest"></i></button>
  <button onclick="shareOnLinkedIn()"><i class="fab fa-linkedin-in"></i></button>
  <button onclick="shareOnFlipboard()"><i class="fab fa-flipboard"></i></button>
  <button onclick="shareOnTelegram()"><i class="fab fa-telegram-plane"></i></button>
  <button onclick="shareOnWhatsApp()"><i class="fab fa-whatsapp"></i></button>
  <button onclick="shareOnReddit()"><i class="fab fa-reddit"></i></button>
  <button onclick="shareViaEmail()"><i class="fas fa-envelope"></i></button>
  <button onclick="shareNative()"><i class="fas fa-share-alt"></i></button>
</div>

<script>
function toggleShareDropdown() {
  var shareIcons = document.getElementById('share-icons');
  shareIcons.classList.toggle('show');
}

function shareOnFacebook() {
  var sharedURL = location.href;
  var facebookShareURL = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(sharedURL);
  window.open(facebookShareURL, '_blank');
}

function shareOnTwitter() {
  var sharedURL = location.href;
  var twitterShareURL = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(sharedURL);
  window.open(twitterShareURL, '_blank');
}

function shareOnPinterest() {
  var sharedURL = location.href;
  var pinterestShareURL = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(sharedURL);
  window.open(pinterestShareURL, '_blank');
}

function shareOnLinkedIn() {
  var sharedURL = location.href;
  var linkedInShareURL = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(sharedURL);
  window.open(linkedInShareURL, '_blank');
}

function shareOnFlipboard() {
  var sharedURL = location.href;
  var flipboardShareURL = 'https://share.flipboard.com/bookmarklet/popout?v=2&title=&url=' + encodeURIComponent(sharedURL);
  window.open(flipboardShareURL, '_blank');
}

function shareOnTelegram() {
  var sharedURL = location.href;
  var telegramShareURL = 'https://telegram.me/share/url?url=' + encodeURIComponent(sharedURL);
  window.open(telegramShareURL, '_blank');
}

function shareOnWhatsApp() {
  var sharedURL = location.href;
  var whatsAppShareURL = 'whatsapp://send?text=' + encodeURIComponent(sharedURL);
  window.open(whatsAppShareURL, '_blank');
}

function shareOnReddit() {
  var sharedURL = location.href;
  var redditShareURL = 'https://www.reddit.com/submit?url=' + encodeURIComponent(sharedURL);
  window.open(redditShareURL, '_blank');
}

function shareViaEmail() {
  var sharedURL = location.href;
  var emailSubject = 'Check out this link';
  var emailBody = 'I found this interesting link and thought you might like it: ' + sharedURL;
  var mailToLink = 'mailto:?subject=' + encodeURIComponent(emailSubject) + '&body=' + encodeURIComponent(emailBody);
  window.location.href = mailToLink;
}

function shareNative() {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // Mobile device, trigger native sharing
    var sharedURL = location.href;
    navigator.share({ url: sharedURL })
      .then(() => console.log('Shared successfully.'))
      .catch((error) => console.log('Error sharing:', error));
  } else {
    console.log('Native sharing not supported on this device.');
  }
}
</script>

References

## References
Note [^note]
[^note]: Note [homepage](https), getting started [GitHub](https)

References

Ghost ^[1] cdnjs.cloudflare.com is an ultra-fast, reliable, globally available content delivery network for open-source libraries. ^[2] Resourses on GitHub ^[3] Lea Verou ^[4]