Building and Deploying a Blog with Sphinx, Ablog, and PyData Sphinx Theme#

Python is not only a powerful tool for data analysis and backend development – it’s also an excellent platform for content creators who want to share their ideas with the world. As a fellow Pythonista, I was determined to build a blog using Python-centric tools. That’s when I discovered a fantastic trio: Sphinx, Ablog, and the PyData Sphinx Theme. Here’s how to build your blog with these tools and deploy it on GitHub Pages with the power of GitHub Actions.

Crafting Your Blog#

Let’s run through the steps to create your blog’s scaffolding and content, all with a Python flavor.

Step 1: Install the Necessary Packages#

First, verify that your environment has Python and pip installed. Then, proceed with installing Sphinx, Ablog, and the PyData Sphinx Theme:

pip install sphinx ablog sphinx-pydata-theme

Step 2: Start Your Blog with Ablog#

Instead of using sphinx-quickstart, Ablog provides its command to create a new blog project:

ablog start

This command will set up your blog with typical Sphinx configurations and Ablog presets.

Step 3: Configure Your Blog with PyData Theme and Ablog#

After the initial setup, personalize your blog settings in the conf.py file:

# conf.py

extensions = [
    'ablog',
    'sphinx.ext.intersphinx',
    # Add any other Sphinx extensions here.
]

html_theme = 'pydata_sphinx_theme'

# Additional theme options are available on the theme's documentation.
html_theme_options = {
    "search_bar_text": "Search this site...",
    # More theme options
}

# Configure ablog
blog_baseurl = "https://[github-username].github.io/[repository-name]/"
blog_title = "My Pythonista Blog"
blog_authors = {
    "Your Nickname": ("Your Name", None),
}

# For generating a feed
blog_feed_archives = True

Step 4: Writing Blog Posts#

Create your posts in reStructuredText format within the posts section you set up:

.. post:: Sept 15, 2023
   :tags: python, sphinx, ablog
   :category: python
   :author: Your Name

Journey with Python
===================

Begin storytelling with Python…

Save it into the correct directory with an .rst extension and the Sphinx/Ablog combination will handle the rest.

Enhancing Engagement: Adding Giscus Comments#

Engage with your readers by adding a comment section using Giscus, a comment service that uses GitHub discussions, right into your Sphinx blog.

Step 1: Configure Giscus on Your Blog#

Giscus requires a specific configuration embedded into your blog. You can include this in your Sphinx HTML templates:

<!-- In _templates/layout.html -->
{% extends "!layout.html" %}

{% block extrahead %}
<script src="https://giscus.app/client.js"
        data-repo="[YourGitHubUsername]/[YourRepoName]"
        data-repo-id="[RepoID]"
        data-category="[DiscussionCategory]"
        data-category-id="[DiscussionCategoryID]"
        data-mapping="pathname"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-theme="preferred_color_scheme"
        async>
</script>
{{ super() }}
{% endblock %}

Remember to replace placeholders with your repository details. You can get these from your Giscus configuration page.

You need other steps to enable Giscus. Refer to giscus/giscus.

Step 2: Deploy with GitHub Actions#

Automatic deployment to GitHub Pages can be set up using a workflow in the .github/workflows/blog.yml file:

name: Deploy Blog to GitHub Pages

on:
  push:
    branches:
      - main  # or your default branch name

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.x'  # Replace '3.x' with your preferred version
      
      - name: Install Dependencies
        run: |
          pip install sphinx ablog sphinx_pydata_theme
      
      - name: Build Blog
        run: ablog build
      
      - name: Publish to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_build/html

This workflow will build and deploy your blog to GitHub Pages whenever you push to the main branch.