Supports Ghost version `3.x`
Log in to the Ghost dashboard of your blog by visiting your-awesome-blog.com/ghost
.
Go to Design in the sidebar, and upload your theme there.
Once uploaded. Click on Activate now button to activate the theme immediately or Close if you want to activate it later.
The theme uses Gulp and Node.js for development purposes. You'll need Node.js v10.15.0
installed on your machine. (If you're on a different version of Node, we recommend using NVM to get the correct version of nodejs on your machine.)
Once you have nodejs installed, run the following commands from the theme root directory.
# To install node modulesnpm install# To compile and watch for changes in SCSS and JS filesnpm run dev
Now you can edit the SCSS and JS files in /assets/src/
, which will be compiled to /assets/built/
automatically.
To generate a production ready theme zip file, run the following command. It will minify all the CSS & JS files and package the theme into dist/<theme-name>.zip
.
# To generate production ready theme zip file.# check the /dist folder after completion.npm run build
Shuttle theme has full support for members feature of Ghost.
To enable a custom subscription plans page similar to the one created here, open up your Ghost dashboard and upload the custom routes.yaml
file present in the theme folder. Once the file is uploaded you can visit /membership/
to see the page.
To activate the search follow these steps:
Open up the default.hbs
file in theme.
Look for the following code snippet at the end of the file:
let siteSearch = new GhostSearch({key: '2225101d563aedec7edd20f7ce', // This is just a demo key. Replace the key with a real one. See Step 3.host: 'https://shuttle.stylesheets.dev', // This is just a demo host. Replace the host with a real one. See Step 3.input: searchInputField,results: resultsContainer});
Update the values in key
and host
. To get the key and host values, you need to create a custom integration in Ghost. Once you create it, you'd get the Content API Key, and API URL.
Open up the partials/header.hbs
file and uncomment the following lines of code
{{!-- Search: Mobile --}}{{!--<button onclick="toggleSearch()" class="header-search icon">{{> "icons/search"}}</button>--}}
{{!-- Search: Desktop --}}{{!--<div class="search"><button onclick="toggleSearchInNav()" class="icon">{{> "icons/search"}}</button><input id="nav-search-field" class="" placeholder="Search" autocomplete="off" /><div class="nav-search-results" id="nav-search-results"></div></div>--}}
That's it. You can zip the theme folder and upload it to your site.
To add a post in the editors pick section, you need to add the internal tag #editors-pick
to the post.
Note: Editors' Pick section will remain invisible if it has no posts.
To enable disqus comments on the theme, follow these steps:
Open up the post.hbs
file in any text editor.
Look for the comments section.
Add the following code snippet in the comments section.
<h1 class="comments-header">Comments</h1><section class="post-comments"><div id="disqus_thread"></div><script>var disqus_config = function () {this.page.url = '{{url absolute="true"}}';this.page.identifier = 'ghost-{{comment_id}}';};(function() {var d = document, s = d.createElement('script');s.src = 'https://<YOUR DISQUS SHORTNAME>.disqus.com/embed.js';s.setAttribute('data-timestamp', +new Date());(d.head || d.body).appendChild(s);})();</script></section>
Don't forget to modify the s.src = 'https://<YOUR SITE'S DISQUS SHORTNAME>.disqus.com/embed.js';
to your disqus url.
Icons for Facebook and Twitter are already implemented in the code. To activate icons for other social networks, insert the following code snippets in the respective files.
In Footer.hbs
<a href="" target="_blank">{{> "icons/dribbble"}}</a>
In Author.hbs
<a class="link-with-svg" href="" target="_blank" rel="noopener"><span class="link-svg">{{> "icons/dribbble"}}</span><span class="link-text">Dribbble</span></a>
Icons for Behance, Dribbble, 500px, Github, Gmail, Instagram, Linkedin, Medium, Pinterest, Reddit, RSS, Tumblr, & Youtube are included in the theme. If you require more icons, you may visit Simple Icons and download the required icons.