Me

👻 This is my personal Ghost theme used on wustep.me.

Features

• ✔️ Home page
  • ✔️ Content card from page with URL home
  • ✔️ Add 2 most recent Articles, Projects, and Notes
  • ✔️ "Read More" buttons linking to pages
• ✔️ Articles
  • ✔️ These should be posts tagged Articles first
  • ✔️ Articles will be loaded by creation date desc
  • ✔️ Articles are routed to /articles/{slug}
• ✔️ Projects
  • ✔️ These should be posts tagged Projects first
  • ✔️ Set /projects to route to /tags/projects
  • ✔️ Projects will be loaded by creation date desc
  • ✔️ Projects are routed to /projects/{slug}
  • ✔️ Hide day for datetime published
• ✔️ Notes
  • ✔️ These should be posts tagged Notes first
  • ✔️ Set /notes to route to /tags/notes
  • ✔️ Notes will be loaded by creation date desc
  • ✔️ Notes are routed to /notes/{slug}
  • ✔️ Hide day for datetime published
• ✔️ Posts that are not primarily tagged Articles or Projects or Notes will be routed to /
• ✔️ Dynamic navigation bar
  • ✔️ Based on the items in Settings > Navigation:
  • ✔️ "Home", "Projects", "Articles", and "Notes" will be on the left side
  • ✔️ Any other link will be on the right side
  • ✔️ Mobile-friendly dropdown
  • ✔️ Facebook, Twitter, GitHub, and LinkedIn will add icons
• ✔️ Tags category pages: /tag/[tag] and author page: /author/[author]
• ✔️ Dedicated post webpages
  • ✔️ Proper formatting--match editor styles
    • ✔️ Headings, links, paragraphs, bold, italics, blockquotes, bullets, code blocks, images, galleries
    • Videos / embeds
  • ✔️ Author byline with icon, name, and bio
    • ✔️ Links to author's website
• ✔️ Post Cards (loop)
  • ✔️ with title, excerpt, tags
  • ✔️ (These will not have feature images)
  • Loads featured first
  • Use package.json property posts-per-page with pagination
    • (Ran into some issues with pagination related to #get)
• ✔️ Custom 404 page with 404-porcupine
• ✔️ Commenting with Commento
  • ✔️ Disable on any post by setting window.disableCommento to true in Code Injection
  • Restyle to be more Bulma-like
  • Add syntax highlighting?
• ✔️ Claps with Applause
  • Disable on any page by setting window.disableApplause to true
• ✔️ Additional scripts:
  • ✔️ Add jQuery v3.4 via CDN
  • ✔️ Syntax highlighting for programming code blocks with Highlight.js
  • ✔️ Convert external links to open in new tab
  • ✔️ Tagify [#Tags] and [!Buttons] with Bulma tags and buttons
    • ✔️ [##TagName] will be turned into dark tags of #TagName with .is-primary-label
    • ✔️ [##!TagName] will get the same treatment but with anchor link
    • ✔️ [#TagName] will be turned into grey tags of #TagName with .is-secondary-label
    • ✔️ Lines that start and end in [#Tags] will be given .label-collection
    • ✔️ [!<a href...>Button Text</a>] will be given a.button.is-primary
    • ✔️ [!(classes)<a href...>Button Text</a>] will be given a.button with space-separated classes
• ✔️ Build tools:
  • ✔️ gulp for development and gulp deploy for deployment
  • ✔️ Compile SCSS to CSS
  • ✔️ JSHint (error-checking) and Sass-lint (style-checking)
  • ✔️ Minify CSS and JavaScript with source maps

De-prioritized:

• Subscribe modal
  • ✔️ Set up modal and form
  • Set up form action and errors
• Multi-author byline support
• Proper RSS feeds
• Fork into generic Bulma + Ghost theme

Development

• With npm installed, install gulp globally with npm install -g gulp.

• gulp: compiles with Sass, Autoprefixer, Sass-lint, JSHint, Minify, watching for changes.

  • Ghost reloads .hbs changes by default, but new partials will require a ghost restart.

• gulp deploy: recompile everything, create .zip for production and uses gscan to validate.

• To run Ghost: ghost start, ghost restart, or ghost run [session-name] --development for logs

Setup

0. Install Ghost and complete modifications noted below.

1. Clone this repo to /content/themes, then (npm install) and (use gulp) or (gulp deploy and upload zip file to Settings -> Design).

2. Under Settings -> Navigation: add:

Home -> /
Articles -> /articles/
Projects -> /projects/
Notes -> /notes/
(optional)
LinkedIn, Twitter, GitHub, Facebook

3. Create a page with URL /home. This will be shown on the home page.

4. Write posts that are tagged Projects, Articles, or Notes!

5. Set up Commento account for comments.

Modifications to Ghost

Some minor mods were made to the Ghost code, particularly:

1. #has tag for labels

This is used for the navigation bar, to have Home, Projects, and Articles be on the left-aligned and any other link to be right-aligned.

• In ghost folder: core/server/helpers/has.js, add label to validAttrs and add to checks object (line 140ish):

label: function() {
  return (
    (attrs.label && evaluateTagList(attrs.label, [self.label], true)) ||
    false
  );
},

2. Routes

Routes were modified to change tag/projects -> projects, tag/articles -> articles, and tag/notes -> notes and have the user-created page /home -> /.

• Replace your content/settings/routes.yaml with the routes.yaml in this repository, modifying as desired.

3. Add use-commento and use-applause config properties.

We added two config properties to let users enable or disable commento / applause. Edit package.json if you want these enabled or disabled.

• In ghost folder: core/server/services/themes/config/index.js.

Add use-commento and use-applause to allowedKeys.

• In ghost folder: core/server/services/themes/middleware.js

Add use-commento and use-applause to updateGlobalTemplateOptions in same format:

const themeData = {
  posts_per_page: activeTheme.get().config("posts_per_page"),
  image_sizes: activeTheme.get().config("image_sizes"),
  use_commento: activeTheme.get().config("use_commento"),
  use_applause: activeTheme.get().config("use_applause")
};

4. Hide RSS feed.

At the moment, RSS feeds are not populated properly. By default, Ghost adds a feed to the <head> tag.

To remove it, go to core/server/helpers/ghost_head.js and comment out the lines:

head.push(
  '<link rel="alternate" type="application/rss+xml" title="' +
    escapeExpression(metaData.blog.title) +
    '" href="' +
    escapeExpression(metaData.rssUrl) +
    '" />'
);

5. (Optional) Change excerpt algorithm

TODO: Automatic excerpts, by default, tend to be a poor result and concatenate multiple lines together without proper spacing. Optionally, revise the excerpt code to catch only the first <p> block instead of carrying on.

Other Optional Changes

1. Add more internal pages

By default, only "Home", "Projects", "Articles", and "Ideas" are in the left side of the nav. To add more internal pages to the nav bar, edit partials/navigation.hbs and make sure the new label is listed in the #has and ^has statements.

2. Contact button

Use a service like Typeform to add a "Contact" button to the home page.

Edit the button to use Bulma, with class button and is-success (or another color)!

Example:

<a class="typeform-share button is-success" ...>Contact Me</a>

3. Subscribe button

(This isn't completed yet! In the meantime, you can use Typeform forms.) Add a subscribe button somewhere with classes subscribe-button button is-primary:

<a
  class="button subscribe-button is-primary"
  data-target="subscribe-modal"
  href="#subscribe"
>
  Subscribe
</a>

4. Syntax highlighting changes

I added syntax highlighting through highlight.js for a limited number of languages that I felt I might use (including [JavaScript, Python, Java, SQL, JSON, Markdown, HTTP, CSS, SCSS, ...]).

I excluded many common ones, like [C#, C++, Ruby, Makefiles, Apache], and there's tons more that can be added.

If you'd like to replace this library, build your own package at highlightjs.org and replace assets/lib/highlight.pack.js.

To change the theme, follow the instructions in assets/css/highlight.scss.

5. Host Applause or Commento

You can choose to host your own server of Applause and Commento.

6. Hide Commento

To hide comments on any post, use window.disableCommento via Code Injection to {{ghost_foot}} in the Ghost panel:

<script>
  window.disableCommento = true;
</script>

Resources

Documentation

• Ghost Themes API
• Bulma
• SCSS
• Handlebars
• Gulp
• Highlight.js
• Applause Button
• Commento

Templates

• Ghost-Theme-Template: Starting templates
• Gulma: Ghost + Bulma theme
• Casper: Default Ghost theme
• Blog: Official Ghost blog theme