Ghost Website creation in <You tell me> minutes
Are you eager to have your own Website but don't know where to start? Are you overwhelmed with so much information? This article will guide you to build an amazing website from scratch using Self-Hosted Ghost.
In my opinion, the “Build your page in … minutes” claim can result in a very frustrating experience. Especially when you have no web development knowledge and find yourself overwhelmed with so many available options and configurations.
While building my site, I created this step-by-step guide so you can create a basic but professional website without any experience.
My advice is to avoid overthinking, begin with something simple, and then enhance it as you feel more comfortable with the tool.
Stick with me. After completing this guide, you will have:
- Configured your Hosting and Site Name.
- Installed and configured Ghost platform.
- Designed your Homepage, About, and Contact Pages.
- Posted your first article.
What do you need?
- Credit card (USD 5 a month, considering the current Hosting prices).
- Name for your domain/website.
- Picture or Logo for your site.
- A bit of patience (we have about 80 clicks in this tutorial️).
What’s missing?
The following features are not described in this tutorial:
- Subscriber’s area
- Newsletter
Even though I consider them fundamental for growing your blog, you still can progress without them at the beginning.
As they also require some extra configuration (and a paid external service), will be included in a future article.
Introduction
This is my first Ghost post, as well. And I didn't include any coding or advanced features (which would make this article easier to follow) in order to use only the basic Ghost functionalities that don't require any kind of technical skills.
These are the steps that you need to follow to create your site from end to end.
- Buying a Hosting Plan and a Domain
- Hosting Basic Configurations
- Installing Ghost Free Application
- Creating an Owner Account
- Correcting Ghost URL
- Owner Profile Configuration
- General Configurations
- Configuring your Theme
- Removing the Subscribe option
- Configuring your About page
- Configuring your Contact page
- Publishing your first post
- Summary
- Further work
Buying a Hosting Plan and a Domain
In order to install Ghost using the Self-Hosting option (that is outside ghost.org), you need to have a hosting plan that supports it. For this guide, I’ll use fastcomet.com as site hosting because according to my research, this is one of the few hosting services that supports a one-click Ghost installation. As far as I know, www.bluehost.com is another option.
It’s good to say that I’m not an affiliate of any of them (nor of Ghost).
Go to fastcomet.com, and click on Start now button.
Select the plan that best fit your needs. I chose the one in the middle because it allows me to have more than one site.
Now you need to define your domain name. The default extension is .com, and you need to pay an annual fee for it. Clicking on the extension will show you other options, some of which are free with your subscription (You have only 1 free domain included, even with the FastCloud Plus plan).
Select the extension, write your desired domain name, and click on USE THIS DOMAIN button.
If you are lucky enough, your desired domain is available. If it isn’t you will need to find another name and repeat the action.
A good way of finding domain names is domains.google, as it provides you with many similar options to the one that you entered.
Once you find a name that is available, you will see the following screen, where you need to add your information and payment method, and that’s it.
Your site is now created. You may need to wait for some time until your site address is updated on the different servers on the internet. They say it may take up to 2 days, in my case, it took less than 30 minutes.
Once this happens, you can open a browser and write your site name in the address bar. You will see the Welcome screen.
The first thing you may notice is that instead of having the padlock icon, your site has a warning stating that it is Not secure at the left of the address bar. This is because you haven’t installed the certificates yet. You will do that and other basic configurations in the next section.
Hosting Basic Configurations
Open a browser and go to fastcomet.com. Click on Client Login.
Enter your email and password, and hit log in.
Go to cPanel. You will need to enter your password again.
Installing SSL Certificates
This is required to have a more secure site.
In your cPanel, scroll down to Security section, and click on Lets Encrypt SSL.
In the Issue a new certificate section, find your domain and click on the +issue button.
Check the boxes for Add cPanel subdomains?** and include the Sub Alias (that will contain the alternative names for your domain).
Then click on the Issue button.
The following message will appear after a while, confirming that the certificate was correctly installed.
You can now enter your site by using https://<YOUR_SITE> (note the S at the end of HTTP) and the padlock icon will appear.
But this is not enough. Because if you just type your site address, you will be directed to the “insecure site”. In order to avoid this, you need to force every connection to be HTTPS.
Go to cPanel, click on Tools on the left panel, scroll down to Domains, and click on Domains.
Select Enable Force HTTPS Redirect in the combo box, if it is not already selected.
Turn on the Force HTTPS Redirect switch for your domain. You will receive a Success message.
In a new tab, go to your site, but without adding the HTTPS:// prefix. The padlock should appear now.
Creating Email Accounts
You can create email accounts that are @<YOUR_SITE>. These accounts will be useful to have the different areas of your site organized (sales, contact, socialmedia, etc.). I personally use one of these accounts for linking to the Ghost installation.
Go to cPanel > Tools > Email section, and click on Email Accounts.
Click on Create button.
Select your Domain, Username, and Password, and hit the +Create button.
Your email was created. You can check it by accessing webmail.<YOUR_SITE>.
Note that for accessing the HTTPS version of the webmail, you need to explicitly type it in the address bar. There are more complex configurations that can be done in cPanel to automatically redirect the webmail too, but this would be a topic for a different article.
You are ready to install and configure the Ghost application on your website.
Installing Ghost Free Application
Login to your Fast Comet cPanel.
Scroll down to the Software section and select Ghost Publishing Platform.
You will see the (empty) list of Ghost Installations. Click on Add New button to add a new instance.
You need to specify the instance parameters:
- Domain Name: It will be already filled. If you have more than 1 domain, choose it from the drop-down list.
- Instance Name: This is your Ghost instance name (only you will see it). As you may have many Ghost instances, you need to set an identifier for them). For example “First Site”.
- Folder: Also not visible to your visitors. This is a folder where the Ghost files will be stored in your hosting. For example “ghost_first_site”.
After a few minutes, you will see the new instance created in the list.
And you will be able to access your new Ghost Site by typing your URL in your browser. If this doesn’t happen, you may delete your browser’s cache (Link to Chrome help).
Creating an Owner Account
In order to customize your site and (most important) create posts, you need to create a profile for yourself.
Go to <YOUR_SITE>/ghost/.
You will see the following screen. Enter your data and click on Create account & start publishing button.
The following page appears. The right panel is empty (white), which is wrong. You should have a preview of your site there. You will correct it in a while, but first, click on the Customize your site button on the left, so you will go into the customization menu.
The next screen should appear.
For the purpose of this tutorial, we will only consider the following 5 configurations in the next sections:
- Owner profile (the icon on the bottom-left corner of the screen)
- General
- Design
- Navigation
- Membership
- Whenever you need to come back to this screen, you have to press the cog icon (highlighted in green) on the bottom-left corner (close to the Owner picture)
Correcting Ghost URL
This step applies only If the right panel was empty after creating the owner account (before going to Customize your site).
If it wasn’t, avoid this step.
The reason for this issue is that you may have enabled the SSL (so your site is HTTPS, instead of HTTP) and the Ghost installation is linked to HTTP. So you will change this link in the config.development.json file.
Login to your Fast Comet cPanel (as described in Install Ghost Free Application section).
Click on Tools, scroll down to Files section, and click on File Manager.
Enter your Ghost folder (with the path that you selected when you were installing Ghost).
Download the file config.development.json (in case something goes wrong). Right-click on it and select Download.
And edit the same file (right-click > Edit) as follows:
Confirm that you already backed up the original file by clicking on Edit.
In line 2, include an “s” after the “http” string. And save.
For this change to take effect, you will need to restart the Ghost Service. This is done in the Ghost Publishing Platform, by clicking the Restart button.
After doing this, you will see the preview of your site while you are designing it.
Owner Profile Configuration
If you are not in the Ghost Console, go there (<YOUR_SITE>/ghost/ in your browser).
Click on the Owner Profile button on the bottom-left corner of the screen, and select Your Profile in the menu.
Click on the image placeholder, then on Upload an image (on the popup).
Choose a picture, Save the picture, and Save the profile.
In this screen, you can also configure your full name, slug, and email.
Your picture is now updated.
General Configurations
Click on the General tile in the WEBSITE section of the Settings page. If you are not on the Settings page, you can go there by clicking on the cog icon on the bottom-left corner of the screen.
Here you can change:
- Site Name and Description (Both can be displayed on your pages).
- Timezone.
- Publication Language.
- Metadata and other configurations.
You are just editing the Title and Description, for now. You need to click on the Expand button on the right to expand the fields. Then click on Save.
Configuring your Theme
In order to select and configure your theme, go to the Settings page (using the cog icon).
Then choose the Design tile.
Here you see the template of your site on the right, and the options on the left.
Click on the Change theme button, on the bottom-left corner of the screen.
A page with the different themes opens, and you can choose between the free and premium ones. Each of them has different configuration options. We will continue with the standard theme (Casper), so nothing is needed here.
On the left panel, you have the avaliable configurations for the selected Theme.
Open the Brand dropdown on the left, so you will do the basic configurations. You are changing the Homepage, as you can see on the top-right corner of the screen.
You will upload a Publication icon, which will appear in the Browser’s tab and the Publication logo that will be used instead of the Site’s name.
This is what it looks like. Then click on Save.
Close the Brand menu on the left and open the Site-wide one.
Here you will change the Navigation layout option to Logo in the middle. This will move the logo to the top of the screen.
Closing the Site-wide and opening the Homepage, you can remove the cover background by deactivating the option Show publication cover.
The Header style option will move or hide the description of the site (that you earlier set to ”Working on New Skills and Sharing The Experience.”).
The Feed layout Classic means that the latest post appears highlighted, and the previous ones appear in a grid format below.
When you close the Homepage menu and open the Post one, you can see in the top-right corner that you are now configuring the pages of the posts.
You are not changing anything here.
The Post image style defines how (and if) the image should be displayed in the header of the posts.
Email signup text contains the text for the call to action in the bottom part of the screen (you will remove this CTA later).
Show recent posts footer will do (when activated) that a link to the previous posts appears at the bottom of the screen. You can’t see this now because you only have one post.
Save after you are done with every configuration.
At this point, you are able to play with the different configurations and make your site look according to your taste.
Removing the Subscribe option
We are removing the Subscribe options for now, because it also depends on the newsletter configuration, which requires an external service (Mailgun).
That will be a topic for another guide.
Click on Settings in the top-left corner.
Click the Membership tile.
In the Subscription access section, set Nobody. Then save.
With this setting, the Subscribe options will disappear from the pages.
The Subscribe options disappeared now. But if you scroll down to the bottom of your site, you will notice that there still exists a Sign up option.
In order to remove it, go again to the configurations, and click on the Navigation tile.
The menu bar that appears at the bottom of your site is the SECONDARY NAVIGATION. So remove the Sign up menu by clicking on the trash bin icon. Then save.
Configuring your About page
Go to Settings, and then click on the Pages section on the left panel.
The list of pages appears on the right (you have only the About this site for now). Click on it to modify it.
You are inside the About page. You can write your text here.
Click on Update when you are done.
Configuring your Contact page
For this, you need to add a new page. So go to Pages section and click on New page.
Write your contact information on the page. You can Preview and Publish it with the buttons in the top-right corner.
Click on Publish and you will see the option to publish it Right now (Set it live now) or Schedule for later. Choose to do it right now, and click on Continue, final review button.
Click on Publish page, right now button to confirm the new page creation.
Page was published.
In order to see this page, you need to include it in the menu.
For this, go to Settings, (YOUR_SITE/ghost/ in the navigation bar, and click on the cog icon). Then, click on the Navigation tile.
Include the page name (Contact) and the address (https://<YOUR_SITE>/contact/) in the PRIMARY NAVIGATION section (this is the top of your webpage). Then save.
At this point, you can go to <YOUR_SITE> in another browser and you will see the Contact page in the menu.
And if you click on Contact, you will be redirected to the new page created
Publishing your first post
Go to Ghost Dashboard (<YOUR_SITE>/ghost/) in a browser.
Click on the Post option in the left panel.
You will see all of your posts on the right. For now, you only have the default one that came with the installation (Comming soon).
Click on the New post button on the top-right corner to create a new post.
Your new post appears now (empty).
By clicking on the Panel icon in the top-right corner, you will open the Post settings.
So now you can write your post in the left panel and change its attributes on the right.
For writing
- Click on the + Add feature image for creating a cover image for the article.
- Write the title.
- Start writing your post.
- By pressing a slash (’/’) you will bring a popup with the different elements that you can add.
- If you need help, click on the ‘?’ icon on the bottom-right corner of the panel (in yellow).
Post settings
- Post URL is the direct link to your post. Don’t need to change it.
- Publish date is an informative field (should be in the past). You can later define a date for the actual publication.
- The Tags will help you (and your readers) to categorize and find the articles in your site.
- And the Excerpt will be displayed on your homepage, together with the feature image, Authors, etc.
For coming back to the edition later, click on the Posts link in the top-left corner. The Draft will be saved automatically.
For publishing your article, hit the Publish button.
After you hit the Publish button, you can specify the date and time for the publication. Set it to be published Right now. Then hit Continue, final review → button.
Hit on Publish post, right now button.
The post was published.
You can go to your site and see that the new post appears highlighted on the homepage. And the old post is shown below it.
As you create more articles, you can play with the Design configurations so the layout of your site fits better with the content.
Summary
Congratulations, you now have your own Website and are ready to share your ideas with the World.
The fun begins now. Start creating and posting, and continue learning how to make your message hit more people.
Please, contact me in case any comments or suggestions.
Further work
Even though this is an extensive tutorial, we only covered the required steps for creating the basic structure. It is easier to build from here and improve your site to match your needs.
The further work that can be done is:
- Configure a Subscription area and newsletter.
- Investigate different themes.
- Consider learning some web development to tweak your publications.