Adding social media icons to your Ghost blog - Part 1

On July 13th, Ghost released the latest version 5.3.1 which brings the most requested native search feature. This also means there are some changes to the official themes.

In this multipart series, we will learn how to set up the development environment and add social media icons to your site's navigation bar.  

Setup development environment

It's always a good practice to have a backup of your theme and control over your source code. This will help you make changes to your theme without worrying about breaking your site as you can always revert back to a working state.

Setup Github repository

1. Get a free account from https://github.com/
2. Create a new private repository. In my case, I have named it shoban.dev-theme

3. Clone the newly created repository to a folder of your choosing.

Download the theme from your site.

1. Log in to your site's admin page and navigate to Settings -> Design -> Change Theme.
2. Click the Advanced tab at the top right corner and download the them that you want to adapt. Extract the zip file to your repository folder.

3. Your repository folder should now have all the files to start working.

Github Actions to automatically deploy your theme.

Ghost allows you to manually upload your theme but this is a repetitive task that can be automated. Moreover, you have to zip your theme files every time you want to deploy.  

let's set up Github Actions to automatically deploy our theme once we commit our changes.

1. Navigate to your Ghost admin -> Settings -> Integrations
2. Click "Add custom integration" and give it a friendly name.
3. You should have your API URL and Admin API Key. This is required by Github Actions to authenticate and deploy your theme.

4. Goto your Github repository -> Settings -> Secrets -> Actions

5. Add two new repository secrets with the following keys and values

GHOST_ADMIN_API_KEY

GHOST_ADMIN_API_URL

6. Copy the values from the previous step. We are interested in the AdminAPI Key and API URL.

7. Create a new file in your repository folder -> .github -> workflows -> main.yml and add the following contents to it.

name: Deploy Theme
on:
  push:
    branches:
      - master
      - main
jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
      - name: Deploy Ghost Theme
        uses: TryGhost/action-deploy-theme@v1.5.0
        with:
          api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
          api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}

8. Open package.json file and change the name of the theme to something unique.

9. Commit your changes and sync to Github. I recommend using VS Code as the default code editor.

9.  Github will automatically run the Workflow and deploy your custom theme.

10. Navigate to your Ghost admin and make sure that you activate the new custom theme.

We are ready to start making changes to our theme. In the next part, we will add social media icons to the navigation bar.