Astro Blog with Simply Theme

A starter template to build lightning fast websites with Astro, using the excellent Simply Ghost Theme rewritten from Handlebars theme to Astro/React with some features added from Ghost CMS itself.

After porting the Simply Ghost Theme to Gatsby with Ghost and then later to Astro with Ghost, this repo is for using only Astro, without Ghost as CMS. Just the regular md/mdx files.

Demo: https://astro-simply.pages.dev

 

 

🚀 Features

• 100/100 Pagespeed/Lighthouse performance
• SEO friendly - sitemap, metadata
• Post, Author and Category content collections
• Different Home Page variants and Post formats
  • Home Page
    • Index Default
    • Index Featured
    • Index Featured Slider
    • Index Grid
    • Index Medium
    • Index Medium Sidebar
    • Index Sidebar
    • Index Personal
    • Index Photographer
  • Post Format (:warning: use postFormat in post frontmatter to set)
    • Post Default
    • Post Full
    • Post Wide
    • Post Header Image
    • Post Image
    • Post Image Right
    • Post Sidebar
    • Post not Image
  • Header Layouts
    • Header Default
    • Header with DropDown Menu
  • Footer Layouts
    • Footer Default
    • Footer Dark
    • Footer Not Menu
• Tags page
• Archive
• 404
• Podcasts Page
• Portfolio Page
• Sidebar ToC navigation
• Social accounts link
• GDPR Cookie Consent
• Ghost cards (Buttons, Callouts, Toggles, Custom blockquotes, Products, Audio, Video, Files, Headings)
  • can be used only in *.mdx files via importing and using appropriate component
• Config file
• Pagination
• Image optimization
• Validations using Zod
• Custom Oembed transformer
• Hamburger navigation menu
• Header Transparency
• Light Mode / Dark Mode
• Medium style image zoom
• RSS Feed
• Sitemap
• Search (Pagefind)
• View Transitions
• Comments (Giscus)
• Using Astro Content Layer API

✏ TODO

• The whole re-used CSS is a mess and would need a proper rewrite.
• Astro view transistions
• Contact Page
• Search
• Comments

🏗 Installing

The easiest way to run this project locally is to run the following command in your desired directory.

# npm 6.x
npm create astro@latest --template anarion80/astro-simply

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template anarion80/astro-simply

# yarn
yarn create astro --template anarion80/astro-simply

 

🏃‍♂️ Running

Configure your site in src/config/config.ts including site title, description, logo, url, navigation menu structure, social media links, etc.

Update SITE_URL environment variable in .env file or in your deployment environment.

{
    title: `Astro Blog`,
    shortTitle: `Astro Blog`,
    siteDescriptionMeta: 'My personal blog',
    logo: '/src/assets/images/logo_black.svg', // must be referenced from /src
    logoDarkMode: '/src/assets/images/logo_white.svg', // must be referenced from /src
    siteIcon: 'favicon.svg',
    siteUrl: 'https://my.blog.com',
    postsPerPage: 12,
    shareImage: '/images/share_image.svg',
    shareImageWidth: 258,
    shareImageHeight: 1024,
    accentColor: '#d0000fff',
    lang: 'en',
    locale: 'en',
    viewTransitions: true, // set to true to enable Astro view transitions
    navigation: [
        {
            label: 'Blog',
            url: '/blog/',
        },
        {
            label: 'Authors',
            url: '/blog/author/',
        },
        .
        .
        .
    ]
    menuDropdown: [
        {
            label: `About`,
            url: `/about`,
        },
        .
        .
        .
    ],
    followSocialMedia: [
        {
            service: `youtube`,
            icon: 'fa6-brands:square-youtube',
            title: `YOUR_TITLE`,
            url: `YOUR_URL`,
        },
        .
        .
        .
    ],
    giscus: true,
    giscusConfig: {
        repo: 'anarion80/astro-simply',
        repoId: '[REPO ID]',
        category: 'General',
        categoryId: '[CATEGORY ID]',
        mapping: 'pathname',
        reactionsEnabled: '1',
        emitMetadata: '0',
        inputPosition: 'bottom',
        lang: 'en',
        loading: 'lazy',
    },
}

Demo and the repo is the "maximum version" with all possible types of Home Page variants, Post Templates, Portfolio, Podcasts, etc. Adjust/remove as needed.

Install the dependencies using the following command:

npm install

Start the development server using the following command:

npm run dev

 

✈ Deploying with Netlify

Click this button and it will help you create a new repo, create a new Netlify project, and deploy!

 

🛠 Extra options

# Run a production build, locally
npm run build

# Preview a production build, locally
npm run preview

 

🙏 Credits

• Godofredo for the Simply Ghost Theme
• Nemanjam for Developer blog website built with Astro and Tailwind
• Hakim El Hattab and Kld.dev for Progress Nav, Table of contents animation
• Reza Zahedi for sectionize
• surjithctly for astroship, demo: https://astroship.web3templates.com
• satnaing for astro-paper, demo: https://astro-paper.pages.dev/posts
• onwidget for astrowind, demo: https://astrowind.vercel.app

📝 Copyright & License

Copyright (c) 2024 anarion80 - Released under the GPLv3 license.