Fork from Astrowind

Django AstroWind is a free and open-source template to make your website using Astro 4.0 + Tailwind CSS + Django headless CMS. Ready to start a new project and designed taking into account web best practices.

Everything of Astrowind plus:

• ✅ Multi language supports.
• ✅ Switch language supports.
• ✅ Django headless CMS integration.

• 🚀 Django AstroWind
  • Demo
  • Getting Started
    • Commands
    • Configuration
    • Deploy
      • Predeploy
      • Deploy to production (manual)
      • Deploy to Netlify
      • Deploy to Vercel
  • Frequently Asked Questions
  • Contributing
  • Acknowledgements
  • License

https://django-astrowind.netlify.app/

• If you haven't launched the Django-headless-cms backend yet, please refer to the Introduction and follow the tutorials.

• Create a .env file from the .env.TEMPLATE file, then input your created CMS API key from your backend to VITE_CMS_API_KEY.

NOTE: VITE_CMS_API_KEY is required to fetch content, don't forget to get that one from backend.

• Install the required packages:

npm install

• Run the following command to sync api schema (located at src/schemas/), schema type (located at src/types/) and the content (located at src/contents/auto-*):

npm run sync:all

• If you want to sync content only, run this command:

npm run sync:content

• Run the following command to start the server:

npm run dev

All commands are run from the root of the project, from a terminal:

Basic configuration file: ./src/config.yaml

site:
  name: 'Example'
  site: 'https://example.com'
  base: '/' # Change this if you need to deploy to Github Pages, for example
  trailingSlash: ignore

  googleSiteVerificationId: false # Or some value,

apps:
  blog:
    isEnabled: true
    postsPerPage: 6

    post:
      isEnabled: true
      permalink: '/%slug%' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
      robots:
        index: true

    list:
      isEnabled: true
      pathname: 'blog' # Blog main path, you can change this to "articles" (/articles)
      robots:
        index: true

    category:
      isEnabled: true
      pathname: 'blog/category' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
      robots:
        index: true

    tag:
      isEnabled: true
      pathname: 'blog/tag' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
      robots:
        index: false

    isRelatedPostsEnabled: true
    relatedPostsCount: 4

analytics:
  vendors:
    googleAnalytics:
      id: null # or "G-XXXXXXXXXX"

ui:
  theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"

  tokens:
    default:
      fonts:
        sans: InterVariable
        serif: InterVariable
        heading: InterVariable
      colors:
        default: rgb(16 16 16)
        heading: rgb(0 0 0)
        muted: rgb(16 16 16 / 66%)
        bgPage: rgb(255 255 255)
        primary: rgb(1 97 239)
        secondary: rgb(1 84 207)
        accent: rgb(109 40 217)
    dark:
      fonts: {}
      colors:
        default: rgb(229 236 246)
        heading: rgb(247, 248, 248)
        muted: rgb(229 236 246 / 66%)
        bgPage: rgb(3 6 32)
        primary: rgb(1 97 239)
        secondary: rgb(1 84 207)
        accent: rgb(109 40 217)

Languages settings file located at src/utils/languages.ts. Update your DEFAULT_LANG and LANGUAGE_MAP to your desired target languages:

// Update your default language target
export const DEFAULT_LANG = 'en';

// Uncomment the below to choose your desired languages

export const LANGUAGE_MAP = {
  en: 'English',
  // af: 'Afrikaans',
  ...
}

NOTE: Make sure you have deployed your Django-headless-cms backend. Then, create a CMS API key and save it for your deployment. Next, update your backend server URL in the Production settings.

• Update your .env file (or export the environment variables):

VITE_CMS_API_KEY=your-production-key
VITE_CMS_API_URL=https://your-production.url

-You can create an optimized production build with:

VITE_APP_ENV=production npm run build

• Now, your website is ready to be deployed. All generated files are located at dist folder, which you can deploy the folder to any hosting service you prefer.

NOTE: Deployment to Vercel has not yet been updated to include the ability to fetch content and cache it. If you have knowledge about this, please feel free to contribute. Thank you!

Clone this repository on own GitHub account and deploy to Netlify:

When deploying to Netlify, don't forget to add VITE_CMS_API_KEY and VITE_CMS_API_URL to your environment variables on the dashboard or use the CLI.

If you update the auto schema section in src/content/config.ts, don't forget to add or update it in the cache-django-astrowind Netlify plugin.

Clone this repository on own GitHub account and deploy to Vercel:

• Why?

If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request. That would be very useful for all of us and we would be happy to listen and take action.

Initially created by onWidget and maintained by a community of contributors. Fork and edited by Huy Nguyen

Django AstroWind is licensed under the MIT license — see the LICENSE file for details.