2.5 Publish Your New Blog

Welcome back to the course. In this lesson, we're we're gonna publish our blog on a live server. We'll upload our custom theme and we'll also make some minor tweaks to the live blog, like enabling a search and changing the routes file. So, let's get started. To create our Ghost blog on a live server, we just need to go to ghost.org, click Get started if you don't have an account. If you do, you will just simply sign in. But here, I'm just gonna sign up with like a demo email address. You're given your name and your credit card or debit card information. And, this is not actually a charge, this is like a pre-authorization. After you enter your credit card details, you can choose your role, but you can always skip this onboarding help. I'm gonna choose that I'm a developer right now. Publication name, let's say Testing Ghost for Tuts+. All right, let's do this. Our new Ghost blog is being created. And once that's done, it's just gonna take us to the dashboard to see our new website. So this is our live website, it can be accessed at this address right here. Obviously, when you're doing your own website you'll have a different address. But now, let's go ahead and upload our custom theme. For this, if you remember, we are working with a, Gulp file here. And this girl file has a task called zip. And we can run that to create the zip file of the theme automatically. So, one way to do it, of course, is to go to the theme files, click on the theme folder and compress it. Or, you can do exactly what I said and use the zip task from Gulp. So, right here in the terminal because the Gulp script is still watching for changes, I'm gonna hit Ctrl+C to exit that default task, and I'm gonna say gulp zip. Okay, and that basically created the zip file for me automatically. All I have to do now is go to Settings>Theme. As you can see, because this is a new installation we're using Casper by default. Upload, here we can just click and drag, And activate. So now if we take a look at the frontend, you'll see our new theme is applied and it looks exactly the same as it did on our local development, right? Of course, here we have a different accent color. But, all the changes that we made to the CSS to the partial files are being reflected in the live website. Now, there are a couple of things we can do here to personalize our new theme. So we'll go to Settings>Branding. Let's change our accent color, let's make this blue. Let's upload a publication icon. This will be displayed right here in the browser. This is basically your fav icon. And here, we can upload a publication logo which will appear right here. Now I have two images prepared for this, I'm gonna hit upload. And I'm gonna open in my Ghost local folder, and I'm gonna choose publication icon. There it is. And, you can also see it in the preview here. And for the logo, we're gonna select publication logo, and there we go, Save and close. Now, our frontend, let's give it a second. And there it is, that's our new logo. And, once the cache is cleared, we'll be able to see that publication icon or fav icon right here in the tab bar of the browser. Next, this theme has search functionality and if we click it, you'll see that it doesn't really work. And that's because we have to make a tiny change to it. For this, we need to do the following, and let me just start by closing the local Ghost where we're no longer working with that. To enable search, we need to create a new Content API key. So, we'll go to the left sidebar here>Integrations, scroll down, click Add custom integration. Let's give this a name of Search. And, this is gonna give you this Content API key. Yours will probably be different. So go ahead and copy it, Save. Next, we go to Settings. And under Advanced, we find Code injection, click that. And then in the Site Header box, we say the following script. Var search_api_key = and I'm gonna paste in that API key. And then, I'm gonna end the script tag. And then, I'm gonna click Save. And that should do it. Let's go back, refresh. And, now let's search, let's say overview, and there it is. Now the search is functional. Let's do another test here. Let's search for premium, for example. And, there you go. This gives us all the results, all the articles that contain the word premium in their content. Pretty cool. One last thing we need to do here. If we click on the login or subscribe links, it takes us to a 404 page that says, Not Found. That's because we need to update a YAML file that's required for these links to work, and the YAML file is provided by the theme author. So, if we open up the theme folder, we can see routes.yaml. So, for that to work, let's go back here to Settings>Labs. We scroll down till we find routes and we click Upload a routes YAML. And let's just navigate to our theme folder on our local computer. Select the file, upload, And that's it. Now, refresh and you'll see that the login and subscribe links work as expected. All right, then, our blog is looking pretty good. There's just one last thing I want to add to it and that's a contact page. We'll do that in the next lesson. So, I'll see you there.