You may already have a code editor you prefer to use; however, for the purposes of following along with this book, I strongly recommend you try the setup we're about to describe, whereby you'll have excellent syntax highlighting for both Handlebars and Stylus. If you're firm on not wanting to try a different editor, please try and find a compatible syntax highlight package for each of these languages as it will make reading and editing your code far easier.
The editor we'll be using is the brilliant Sublime Text 2. If you're not already a Sublime Text 2 user, you can download a copy at http://www.sublimetext.com/2.
The next thing you'll need to do is install Package Control for Sublime Text, which we'll be using to pull in your syntax highlighting packages.
The command required to install Package Control changes often with updates to Sublime Text, so unfortunately we can't include it for you here. Please visit https://sublime.wbond.net/installation#st2 and follow the instructions you find there.
After you have installed Package Control, you're ready to grab your syntax highlighters.
To install the Stylus and Handlebars packages in Sublime Text 2, follow these steps:
- Navigate to Preferences | Package Control in the main top menu.
A menu will appear with a list of options, each prefaced with Package Control.
- Click on the list item titled Package Control: Install Package.
Wait for a little while as the available packages are looked up. You'll then see a list of packages with a search field above them.
- In the search field, type the name of the package you want to install.
Search for Stylus to bring up the Stylus highlighting package, named Stylus. Search for
Handlebarsto bring up the Handlebars highlighting package, named Handlebars. - When you see the package you want, come up below the search field, click on the item to install it.
Follow this process once for each of the two packages.
You now have your Sublime Text 2 editor installed along with syntax highlight for all the languages you'll be using (HTML, CSS, and JS are in-built), and so you're almost ready to start coding.
The final step is to take care of creating a project environment that will handle compiling your Stylus code into CSS and minifying your JavaScript, which is what we'll take care of next.
Outside of the actual folder that will contain your Ghost theme, we'll also be using a separate folder, one that contains your Stylus code as well as uncompressed JavaScript. We'll be using a JavaScript taskrunner system called Grunt to both compile your Stylus from here into a CSS file in your theme, and to minify the little bit of JavaScript we'll be using and write that into your theme folder.
You can think of this folder as the source of your theme, while the theme folder itself will contain the finished product. You might also like to use this folder to hold any PSDs or other source material you utilize in future projects.
This system depends on Node.js to handle the compilation and minification processes; however, as long as you have already followed the instructions in Chapter 2, Manual Installation and Configuration of Ghost, and installed Ghost on your computer, you will have installed Node.js as part of the process. That chapter will also have shown you how to run commands via the command window/terminal on your computer, so if you completed that section yet please go ahead and do it now before proceeding.
For this section, you should also download the source files that come along with this book as you'll be provided with a readymade package that will handle most of the project setup process for you.
You will need the zip file named, ProjectSetup.zip.
With Node.js in place on your machine, the next step is to install Grunt globally on your computer so that it can be accessed from wherever you decide to set up your project folder.
Open up a command window / terminal and type the following command:
npm install -g grunt-cli
You'll see a series of lines of text in the window while Grunt is being installed. Wait until they finish and the command prompt returns, which means the installation is complete.
Create a new folder wherever you'd like on your computer, (though if you installed Ghost at C:ghost I'd recommend creating this folder at C:), and give it a name to represent the theme you'll be creating. In this case, we'll keep it generic and go with LearningGhostSource.
Extract the ProjectSetup.zip file you downloaded with the source materials for this book into this folder. It will create the following three folders:
- stylus: This will hold your Stylus files, with several
.stylfiles and folders inside that will help you design quickly and easily when following Chapter 5, Applying Design Choices and Visual Styling. - js: This will hold your uncompressed JavaScript files, with two files inside named
modernizr.jsandresponsive_iframes.js. - compiler: This contains the scripts that will compile your Stylus and minify your JavaScript.
Now, move into the Compiler folder and open a command window / terminal.
On Windows, I feel the easiest way to open a command window in a particular location is to first go there via Windows Explorer then hold Shift, right-click and choose Open command window here. If you're on Mac or Linux, cd (change directory) to the location manually.
Once you have a command prompt in the Compiler folder, type the following command then press Enter:
npm install
This will fetch the scripts required to handle compilation and minification. As you did when installing Grunt, wait for the lines of text to stop and a new command prompt to appear. When this happens, the installation of the project compiler is complete.
The scripts you just installed will handle all your compilation and minification automatically; however, the only thing you need to do is tell it where your installation of Ghost is and what your theme's name is.
From inside the Compiler folder, open up the file named Gruntfile.js. Find these lines towards the bottom:
'ghost_location': '../../ghost/', 'ghost_theme_name': 'LearningGhost',
Enter the location of your installation of Ghost (from Chapter 2, Manual Installation and Configuration of Ghost) in between the '' marks after 'ghost_location':.
Note that this is a relative path to the location of your Gruntfile.js file. Each time you see the '../' notation, that means the system will look up one level from where Gruntfile.js is.
For example, the default config will work for you if your Gruntfile.js file is at C:LearningGhostSourcecompilerGruntfile.js, and your installation of Ghost is at C:ghost.
Then enter the name of the theme you will be creating in between the '' marks after 'ghost_theme_name':. This will be the theme folder the compiler will look for to write in your CSS and JavaScript files. For the purposes of this exercise, leave it as 'LearningGhost'.
Your project folder is now fully installed and ready to watch your source files for changes. To initiate the watch task, with your command window / terminal still pointed at your Compiler folder, type the following command and then press Enter:
grunt watch
You should then see the following appear:
Running "watch" task Waiting...
As long as this "watch" task is running, whenever you save any changes to any file in the stylus folder with a .styl extension, your CSS will be automatically compiled into the appropriate location in your theme.
For now, end the "watch" task as we don't yet have your theme created in order to allow files to be written into it. To end the task, press Ctrl + C. A message will appear saying:
Terminate batch job (Y/N)?
Press Y and then Enter and the "watch" task will end. We'll reactivate it again later after we've started creating your theme and are ready to develop its CSS.
When you want to minify JavaScript, the process will be very similar to the above, in that, you will type this command then press Enter:
grunt uglify
This will combine and minify the files from your js folder and write them into your theme. However, we're not ready for this command, so don't run it just yet as we'll be using it later at the appropriate point in the theme development process.