2.2 Setting Up a Local Development Environment for Ghost

Welcome back to the course, in this lesson, we're going to create that nice local development environment for working with Ghost themes. And this is gonna make things a lot easier for us, and I always recommend you do this because it saves you the hustle of constantly having to upload or archive and re-upload the theme to a live ghost server every time you make a change. It's much easier working locally and once everything is done, you can upload that finished theme to your live ghost server. Now, this part is a bit technical, but I'm gonna walk you through every step so it should be easy-peasy for you. Let's begin. Now, to install Ghost on your local machine, you need a couple of things. First of all, Ghost works on macOS, Windows, Linux, so whatever operating system you're using, you'll be able to install Ghost. Then the big requirement for this to work is to have a Node.js installed. Now Node.js is a JavaScript runtime library, and to see if you have it installed, you can open up a terminal window and you can say node -v, that's how you can change or check the version. And the terminal tells me that command not found. So I do not have Node installed on this computer. And by the way, if you're using macOS, this is the terminal app, you can find it installed by default. If you're using Windows, you can use Command Prompt or PowerShell, those are both terminals, and it works exactly the same way. So, we don't have Node installed, we're gonna go and download the version that's recommended for most users. So pick one that matches your operating system, I'm using macOS. The website detected that, so it's offering me options to download Node for macOS. So let's download it, once it's done, open it. Now this will install two things, Node.js, so the actual library, and npm. We also need this, npm stands for Node Package Manager, and it's basically how we're gonna install all the things that we need. So hit Continue, Continue, Agree, choose the location of your install, hit Install. It's gonna ask you for your operating system password. Obviously, if you're using Windows, the installation will look a little bit differently, but just do whatever you do when you're installing a new app on Windows, just next, next, next. All right, so these two packages have now been installed, Node and npm, hit Close. And now I can open up the terminal again and I can repeat the same command and you'll see that we now have no diversion 14.17.1 installed. And we can do the same thing for npm, we can see that we have 6.14.13 version installed. Cool, so once this is done, we need to install the Ghost CLI, CLI stands for Command Line Interface. It's basically utility that allows us to work with Ghost using the terminal or the command line, as it's also called. So, for that, we're gonna do the following, npm install ghost-cli@latest -g, dash g basically means globally, it's gonna install it somewhere that can be accessed from any folder on your computer. So hit Enter. This is gonna start to download various things and install them in your system. And at some point you might receive an error, and I'm gonna show you how to get around that in just a little bit. Let's just wait for it to download the proper files, and there we go. We have an error here, saying permission denied. That basically means that this command that we gave to install the ghost-cli is trying to access a folder that's currently restricted. So to get around that, you do the following, sudo npm install, ghost-cli@latest- g. Sudo, being the only difference here, means that we're installing this or we're running this command as an administrator, and that's gonna ask us for the administrator password. And now it's was gonna do the same thing, the difference is this command now has access to the folders I showed you previously, so it's gonna install everything correctly. And there we go, ghost-cli version 1.17.3 was successfully installed on our system. So now if we write ghost help, that's gonna give us a list of commands we can use in this command line interface to work with Ghost. So now that everything is installed, we can navigate to a folder anywhere on our computer and install Ghost locally. For that, I created a folder called ghost local on my desktop. So I'm gonna say cd, cd is a command that stands for change directory. I'm gonna change directory to my desktop and then goes to local. Hit Enter, and now I'm inside my ghost local folder. And by the way, you can call this folder any way you want, you can call it project one, you can call it project x, you can call it Ghost, it doesn't really matter. So now, we have Ghost installed on our system, we navigated to the working directory, this is where we'll put our themes and all the content. What you need to do now is say ghost install local. And that's gonna install Ghost and all of it's dependencies in that folder that I just created. So let's give this a second to download and install everything it needs to. Now, Ghost has finished installing, and it also started a Ghost instance, and it gave us a nice link we can open, For setting up Ghost locally on our computer. So let's create our account, let's say Local Dev for Ghost, as the site title, my name, my email address, and my super secret password. This is where we can invite some staff users but we don't actually need that, and we're in. We now have Ghost installed locally on our computer, and we'll get back to this in just a little bit. For now, to complete our dev environment, we need to install two extra packages, that's Gulp and Bower. So, Gulp, you can find that gulpjs.com, and this is a toolkit you can use to automate your workflow. And it's really easy to get started, you just scroll down here, and you will do this command, you can also copy it, open up your terminal. And just to make sure we don't get the same error again, we'll add sudo in front. So npm install --global gulp-cli, Enter. It's gonna ask for a password. Now let's just wait, and there we go, gulp-cli 2.3.0 was correctly installed. And we also need Bower, this is another package manager, and let's just copy this command. With sudo in front, and that's it. We can now check, That we have Gulp and Bower correctly installed on our system, and that is our local development environment completed. All right, so with this local dev environment all set up, it's time we take a look at the theme we'll be using in this course. That's coming up in the next lesson, so I'll see you there.