No description, website, or topics provided.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Matt Ronemous
Matt Ronemous Change personal site to new url. The new url still needs to have its …
…static pages updated, but I’ve been planning to start a new theme.
Latest commit 37881c4 Jan 7, 2017
Failed to load latest commit information.
assets The unit should have a % for keyframes. Feb 8, 2015
partials Disqus to pull from new client config. Oct 24, 2014
.bowerrc Initial commit of techno theme. Jul 12, 2014
.gitignore Initial commit of techno theme. Jul 12, 2014
Gruntfile.js Initial commit of techno theme. Jul 12, 2014 Change personal site to new url. The new url still needs to have its … Jan 7, 2017
default.hbs Move script back to bottom Oct 19, 2014
index.hbs Remove core/index.js change requirement. Oct 19, 2014
package.json Initial commit of techno theme. Jul 12, 2014
page.hbs Initial commit of techno theme. Jul 12, 2014
post.hbs Remove core/index.js change requirement. Oct 19, 2014
tag.hbs Initial commit of techno theme. Jul 12, 2014

Techno Theme for Ghost

A free boilerplate responsive theme for Ghost blogging platform. The theme is easy to setup for non-technical bloggers. It also includes components to better support technical blogs (hence the name Techno). The theme uses hot technologies that many developers are interested in.

Techno was originally based on the work of Karlo Espiritu's Bastard theme. Thank you Karlo for starting this theme.

Here are the enhancements added to Bastard

  • General refactor and cleanup (opinionated)
  • Disqus
  • Ghosthunter for blog search.
  • Bootswatch allows easy integration of custom bootstrap themes.
  • Navigation menu was changed to use a basic Bootstrap 3 fixed top navigation bar.

Techno theme was built using Bootstrap 3, SASS, Font Awesome, Bower, Knockout, and Grunt. Grunt is used to automate tasks for compiling and minifying the theme components and Bower to manage package dependencies. You can use the theme as is, or customize it by editing the default.js and /assets/sass/*.scss files.


I'm using this theme for my personal site,

Theme Features

  • Clean and well-documented code
  • Developed using Bootstrap 3, SASS, Font Awesome, Grunt, and Bower ( popular technologies that many developers know )
  • Organized CSS3 stylesheets using SASS
  • Fully responsive layout
  • Retina display ready, looks great on any device or resolution
  • Full screen cover page with parallax effect
  • Syntax highlighting using Highlight.js
  • One file css/js for performance optimization
  • Automatic linting, compiling, and minification of SCSS and JS files using Grunt
  • Automatic image file size optimization using IMGMin and SVGMin
  • Easily update theme dependencies using Bower package manager
  • Google Analytics integrated
  • Includes FitVids.Js for fluid video embeds
  • Integration with Disqus
  • Ghosthunter for blog searching
  • Bootswatch themeable
  • It's free:)

Using Techno Theme

  1. Copy the theme folder inside /content/themes of Ghost.
  2. Customize the details in themes/techno/assets/js/config.js
  3. Update images/cover.jpg
  4. Update images/favicon.ico
  5. Restart Ghost and then go to Ghost's Settings ( Choose "Techno" from the theme dropdown menu and save your changes.
  6. Write some really awesome posts!

Customizing Techno Theme (Developers)

Techno theme uses Grunt to lint, compile, and concatenate the javascript and SASS components. Customize the theme by editing the assets/js/default.js and sass/* files. Run grunt to compile your changes or use the grunt watch while you build your own theme.

  1. Clone ghost to your machine.
  2. Do the basic setup above against your local copy of ghost.
  3. Run bower install to install package dependencies.
  4. Run npm install to install Grunt components.
  5. Run grunt watch to start watching for file changes or run grunt to build your latest changes.
  6. Make your changes by updating /sass/*, /assets/*, and *.hbs files of the theme.
  7. If you have new images for the theme, just place them inside image_sources folder and Grunt will handle the optimization automatically and store the optimized version inside assets/images/.
  8. npm start --development at ghost root will run a local server.
  9. Hack away! If you have a useful addition please contribute to the github repo.

To customize the bootswatch theme

  • Copy the theme into sass/bootswatch/[theme name]
  • Change the style.scss file to use the new theme
@import "bootswatch/[theme name]/variables";
@import "bootswatch/[theme name]/bootswatch";

Resources & Dependencies


Apache 2.0