Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lukencode/ghostsolo

A Ghost theme for solo bloggers.
https://github.com/lukencode/ghostsolo

blog ghost theme

Last synced: about 2 months ago
JSON representation

A Ghost theme for solo bloggers.

Awesome Lists containing this project

README 

        
# GhostSolo Theme



A Ghost theme for solo bloggers. See it in action: **[lukelowrey.com](https://lukelowrey.com)**



![Example](screenshots/full-screen.png)



 



# Features



### #pinned Posts on the homepage

The homepage will render any posts with the internal tag "#pinned" as cards. Tip: add a "Pinned" tag filter to your Ghost dashboard.

![Ghost pinned](screenshots/ghost-pinned.png)



### Membership support



GhostSolo recommends you use the [Portal](https://ghost.org/changelog/portal/) functionality to handle membership. If membership is enabled the home page and footer will render a sign up form.



You can also update routes.yaml and use the (legacy) ghost solo membership pages.GhostSolo currently supports free membership. You must **upload the routes.yaml fille"** which will be used when people click the subscribe button in the header.



### Menus

The standard ghost navigation will render in the nav bar at the top of the page. Secondary navigation will render in the footer.



### Twitter / Facebook

The site twitter and facebook (soon) links will render as buttons in the homepage header.



### Author profile

The author profile bio and twitter will render at the end of each post.



### Inline post content tag template

GhostSolo supports an inline content version of the tag template "tag-inline-content". It will enabled a view where posts for a tag content displays in the list. I use it for short snippets on luklowrey.com but it could be useful for changelogs an other things. To enabled it you need to change th routes.yaml of your blog (see below).



### Table of contents post template

To enabled a table of contents us the Table of Contents template when writing your post. The contents will update based on headings.



# Upload routes.yaml

To enable the membership functionality you will need to upload the routes.yaml file located in GhostSolo.zip to your Ghost site (Settings > Labs > Routes).



```yaml

collections:

  /:

    permalink: /{slug}/

    template: index



#example of using the 'tag-inline-content' template for posts tagged "note" but none other

  /:

    permalink: /{slug}/

    template: index

    filter: 'tag:-note'    

  /notes/:

    permalink: /{slug}/

    template: tag-inline-content

    filter: 'tag:note'  

    data: tag.note



taxonomies:

  tag: /tag/{slug}/

  author: /author/{slug}/



#not recommended, use ghost Portal functionality

routes:

  /signup/: members\signup

  /signin/: members\signin

  /account/: members\account



```



# Customise



### Theme

GhostSolo uses CSS variables for overriding the theme and dark/light modes.



The default theme can be found in [assets/css/vars.css](https://github.com/lukencode/GhostSolo/blob/master/assets/css/vars.css). This can be easily overridden with a style tag in your ghost code injection settings.



```css

html:root {

    --accent-color: #543fd7;

    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --bs-font-serif: Georgia, serif;

    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}



html[data-theme='light'] {

    --background-color: #fff;

    --alternate-background-colour: #f7f7f9;

    --text-color: #121416d8;

    --text-color-light: #777676bb;

    --link-color: var(--accent-color);

    --masthead-color: var(--accent-color);

    --masthead-text: #fff;

    --button-color: #263238;

    --button-text: #fff;

}



html[data-theme='dark'] {

    --background-color: #212a2e;

    --alternate-background-colour: #263238;

    --text-color: #F7F8F8;

    --text-color-light: #8A8F98;

    --link-color: #828fff;

    --masthead-color: #212a2e;

    --masthead-text: #fff;

    --button-color: var(--accent-color);

    --button-text: #fff;

}

```



### Dark mode

GhostSolo includes a simple toggle for enabling the dark/light modes. The toggle adds data-theme='dark/light' to the html element. It will automatically detect a user's preferred dark mode setting. When customising the theme be use to include both data-theme='dark' and data-theme='light' entries.



![Theme toggle](screenshots/theme-toggle.gif)



### Include Inter (or other) font

The base css theme uses the 'Inter' font. To include this in your blog add the following the your site header:

```html



```

If you override the base font be sure to include it in the header.



### Include Prism Syntax Highlighting



Include Prism syntax highlighting by adding the following to your Ghost blog code injection:



```html

In site header:



In site footer



```



# Development



GhostSolo uses Bootstrap 5 for its base CSS. Styles are compiled using gulp, sass and PostCSS.

You'll need [Node](https://nodejs.org/)and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:



```bash

# Install

npm run install



# Run build & watch for changes

npm run dev

```



Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.



The `zip` Gulp task packages the theme files into `dist/ghostsolo.zip`, which you can then upload to your site.



```bash

npm run zip

```