Bermuda

A Ghost theme using Tailwind CSS, Prism for syntax highlighting, and FontAwesome for vector icons. Everything bundled together with Webpack.

First time using a Ghost theme?

Ghost uses a simple templating language called Handlebars for its themes.

This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full theme API documentation which explains every possible Handlebars helper and template.

The main files are:

default.hbs - The parent template file, which includes your global header/footer
index.hbs - The main template to generate a list of posts, usually the home page
post.hbs - The template used to render individual posts
page.hbs - Used for individual pages
tag.hbs - Used for tag archives, eg. "all posts tagged with news"
author.hbs - Used for author archives, eg. "all posts written by Jamie"

One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:

page-about.hbs - Custom template for an /about/ page
tag-news.hbs - Custom template for /tag/news/ archive
author-ali.hbs - Custom template for /author/ali/ archive

Development

Styles are compiled using Webpack/PostCSS. You'll need Node, Yarn and Webpack installed. After that, from the theme's root directory:

# install dependencies
yarn install

# run development server
yarn dev

PostCSS Features Used

Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
PurgeCSS - Remove unused CSS.
cssnano - Takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.

Icons

We use FontAwesome SVG JavaScript Core. Using fontawesome-svg-core allows us to create a subset of icons and reduce the final bundled file size. To incude an icon in the build, edit the src/index.js file and add it to the import list. To use an icon, simply reference it in your HTML as <i class="fas fa-play-circle"></i>.

Deployment

Manual

To compile assets for production, purge css, and package into a zip file, run:

yarn build

The theme files are zipped into theme.zip, which you can then upload to your site.

Automated

You can automate the deployment of your theme by using Ghost's Admin API and Github Actions.

Start by creating Ghost Admin API keys (docs) and copy the Content API Key and Admin API Key to GitHub Secrets (docs) using the keys GHOST_ADMIN_API_URL and GHOST_ADMIN_API_KEY.

Place the following into .github/workflows/deploy-theme.yml and your theme will automatically be updated upon git push origin master.

# This workflow will build the theme and submit to Ghost using the Admin API.
name: Deploy Theme
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout theme
        uses: actions/checkout@v2

      - name: Setup Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      
      - name: Intall dependencies
        run: yarn --frozen-lockfile

      - name: Build theme
        run: yarn build

      - name: Deploy theme
        uses: TryGhost/action-deploy-theme@v1.4.0
        with:
          api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
          api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}
          theme-name: bermuda
          file: theme.zip

chsanch/Bermuda