Code Monkey home page Code Monkey logo

hikari-no-ghost-theme's Introduction

Hikari no Ghost

Theme for the Ghost blogging platform. Source code available at https://github.com/belen-albeza/hikari-no-ghost-theme/.

Preview

Installation

This theme works with Ghost 0.4 or newer.

If you are using Ghost.org's Pro platform, follow the instructions at http://support.ghost.org/upload-theme-ghostpro/.

If you are hosting your own Ghost installation, follow these steps:

  1. Go to the releases page and download a release.
  2. If you are hosting your own Ghost installation, unzip the tarball file into content/themes/.
  3. Restart Node. How you do this will depend on your actual server setup.
  4. Login into your blog, go to Settings and pick up hikari-no-ghost-theme from the Theme dropdown.

Configuration

You need to upload cover and logo images for your blog or this theme will look extremely ugly! Seriously!

If you need to change some wording, etc. you can edit the files with .hbs extension. These are Handlebars templates and they contain:

  • default.hbs: A wrapper for all the other templates.
  • index.hbs: What gets rendered in the home
  • page.hbs: What gets rendered when you are viewing a static page.
  • post.hbs: What gets rendered when you are viewing a single post.
  • tag.hbs: What gets rendered when you are filtering posts by tags.
  • partials/menu.hbs: What gets rendered as the menu

Adding Twitter and Github buttons in the footer

Besides the RSS feed button at the footer, you can also add Twitter and/or Github buttons. Edit default.hbs and look for these lines:

{{! Put here your own twitter link}}
{{!-- <a class="twitter" href="https://www.twitter.com/ladybenko"><span>@ladybenko</span></a> --}}
{{! Github is also available}}
{{!-- <a class="github" href="https://www.github.com/belen-albeza"><span>belen-albeza</span></a> --}}

Uncomment them and edit the actual links and texts to set your own username.

Editing the About page

This theme assumes you have an About static page with the slug about. To create one:

  1. Login into Ghost and select New post
  2. Write your About page like a regular blog post.
  3. Before publishing it, click on the gear icon besides the publish/save button.
  4. Tick the Static page checkbox and set about as the URL.
  5. Publish the page.

Adding / removing static pages

If you don't need the About page you can get rid of the menu by editing partials/menu.hbs and deleting these lines:

<nav class="main-menu"><ul>
    <li><a href="/about/">About</a></li>
    {{! Add there all your static pages}}
</ul></nav>

If you need to add more static pages, just add more links to that <ul> list.

Development

If you want to play around, you'll need:

  • Node
  • Grunt (npm install -g grunt-cli)

Install the required packages with:

npm install

You can build a release with:

grunt build

You can have a daemon watching for changes in the Sass files and recompiling them with:

grunt run

Changelog

1.0.X

  • 1.0.3
    • Blog cover image now fills up the whole header
  • 1.0.2
    • Added top menu to static pages
    • Made images in posts to appear centered
  • 1.0.1
    • Fixed navigation footer styles
  • 1.0.0
    • First version.

License

© 2014 Belén Albeza.

Source code released under the MIT license. See LICENSE for details.

Font Awesome font (assets/fonts/fontawesome-webfont.woff) is licensed under the SIL Open Font License 1.1.

hikari-no-ghost-theme's People

Contributors

belen-albeza avatar kevinroberts avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.