Desdinova

A quick & easy Astro starter website for use with Tailwind, Flowbite and Cloudflare Pages for non-designers

Objectives

Create a modern, clean, and simple website starter for non-designers
Enable rapid building and deployment of a basic Astro website
Pre-configured for Tailwind CSS, Flowbite, and Cloudflare Pages
Minimize reliance on external and third-party dependencies
Aim for a perfect Lighthouse score
Assist beginners with Astro and Cloudflare Pages
Completely F R E E!
Blazingly F A S T!

Features

Automatic support for light and dark modes
Fully responsive design
Automatic generation of robots.txt and sitemap.xml
SEO optimization
Basic blog functionality
Includes some free Flowbite blocks pre-configured and optimized (highly recommended paying for access to all blocks!)
Video embedding (YouTube, Vimeo)
Icon integration via Iconify
View Transitions
Custom 404 page

To-Do List

Future Ideas

Easier color palette customization

Getting Started (Get Up & Running in 10 Minutes!)

get environment setup

mkdir astro-desdinova (or your preferred project name)
cd astro-desdinova
git clone http://github.com/montopolis/desdinova ./ && rm -fr ".git/" (Mac)
Run npm install to install packages
Run npm run dev to start development

Open the site with the provided URL to verify it's working

do basic configuration

Update src/config/desdinova-config.ts values under UPDATE BELOW FIRST
Update the Logo see below
Update the Favicon see below
Update the Font (if necessary see below)
Adjust Colors (if necessary see below)

git & deploy

Commit all changes and push to Git
Set up Cloudflare Pages for testing see below
Done!

Next Steps

Customize the Top Menu in src/components/TopMenu.astro
Customize the Bottom Menu in src/components/BottomMenu.astro
Add any required scripts to src/components/Analytics.astro
Update src/pages/index.astro as your homepage
Ideally, leave the src/components/_core folder untouched to facilitate future updates

Adding a New Page (A Basic Flowbite Workflow)

Copy src/pages/_starterPage.astro to a new file within src/pages
Update pageTitle and pageDescription in <Layout pageTitle="_starter" pageDescription="_starter Page">
Find a Flowbite component or block at Flowbite that you wish to use
Click "Copy Code" (CSS and JS are not needed)
Paste the code inside <Layout></Layout>
Customize the component/block
Review, edit, and refine until satisfied with your page
Add the new page to the Top or Bottom Menu, or link it elsewhere on the site
Repeat these steps for additional pages

Setting Up Cloudflare Pages for Testing

Sign in or sign up at Cloudflare Dashboard
Navigate to Workers & Pages
Click "Create"
Switch to the Pages tab
Select "Connect to Git"
Authorize connection to your Git repository
Choose your repository
Click "Begin Setup"
Set "Framework Preset" to "Astro"
Click "Save and Deploy"
Done!

Setting Up Cloudflare Pages for Your Domain

Ensure your DNS is managed by Cloudflare
Complete the Cloudflare Pages setup for testing
Navigate to Workers & Pages
Select your site
Go to the "Custom Domains" tab
Click "Setup a custom domain"
Enter your domain name (e.g., www.mywebsite.com or mywebsite.com)
Click "Continue"
Activate the domain if all details are correct
Wait 5-60 minutes for DNS & SSL configuration
Done!
Note: To support both www and non-www access, consider setting up a custom Cloudflare Redirect Rule. More info

Updating the Logo

Replace src/assets/images/logo-square.png with your square logo
Replace src/assets/images/logo.png with your primary logo
For further customization, edit src/components/SiteLogo.astro

Updating the Favicon

Modern Way to Implement Favicon

Use RealFaviconGenerator

Update favicon.svg and favicon.png in the /public folder
Note: Nothing else necessary for most browsers. Further customizations can be made in src/components/Favicon.astro

Updating the Font

Method #1: Bundled via Fontsource (recommended)

Add the font to package.json from Fontsource
Import the font in src/components/Fonts.astro

Method #2: Google Fonts (not recommended, but if you do enable Cloudflare Fonts)

Include the font in src/components/Font.astro

For All Methods

Modify the font settings in tailwind.config.mjs

Updating Colors

You can update the primary color palette in tailwind.config.mjs
You can get color palettes from https://uicolors.app/
You can also get color palettes from https://flowbite.com/blocks/marketing/header/#default-header-navigation

Updating Astro

Stash any pending git updates to start with a clean slate
Run npx @astrojs/upgrade to upgrade Astro's first-party packages
Be mindful of potential breaking changes or proceed at your own risk
Optionally, run npm run update to update non-Astro packages
Ensure there are no errors with npm run astro check
Test the site using npm run preview
If everything is functional, commit and push the changes
Desdinova will be kept up-to-date with upstream updates as best as possible

Porting Desdinova Updates to Your Site

This can be complex 😬
If your site is functional and building correctly, it's often best to leave it as is 😅

Update Approaches

Easy: If your changes are limited to the src/pages folder, copy over other content, re-run npm install, and validate
Tricky: Apply specific updates from the Desdinova repository to your site as needed
Full Reboot: Set up a new Desdinova instance and refactor your existing site into it (this is my annual practice for my sites)
Most Likely: I'll update Astro, Tailwind, Flowbite, and third-party packages as necessary using this approach

Image Handling

Images placed in src/assets/images will be optimized by Astro if imported
Refer to Astro Image Guide
Alternatively, store images in the /public directory

Announcement Banner

Customize the banner in src/components/Announcement.astro
To disable the banner, comment out <Announcement /> in src/pages/index.astro

Change Blog Posts Sort Order

see notes in src/scripts/_desdinova-scripts.ts

Draft Blog Posts

Blog posts that are marked draft=true are not published to Production. Just add draft=true to the frontmatter/metadata at the top of the blog post.

Scripts (e.g., Analytics)

Place required scripts in src/components/Analytics.astro

Configuring Redirects

You can specify a mapping of permanent redirects in your Astro config with the redirects value. For most redirects, this is a mapping of an old route to the new route:
https://docs.astro.build/en/guides/routing/#configured-redirects

Environment Support (Local/Staging/Production)

Set up a BUILD_MODE environment variable in Cloudflare Pages or locally (copy .env.example to .env) to conditionally render code or scripts based on the environment.

This allows specific scripts or HTML to be included as needed per environment.

{
    import.meta.env.BUILD_MODE === 'production' && (
        <script>// add scripts here for production only</script>
    );
}

{
    import.meta.env.BUILD_MODE === 'production' && (
        <b>Or put HTML code which only renders for production</b>
    );
}

Setting Up Environment Variables in Cloudflare Pages

Go to your Cloudflare Pages site
Click "Settings"
Select "Add variables" or "Edit Variables"
Add the variable "BUILD_MODE"
Set the value as needed
Done!

Links to Dependencies

Desdinova (🗣️ des-de-nova)

Inspired by one of my favorite Blue Öyster Cult songs!

When I was in middle school, the original studio and live versions were frequently playing either on vinyl or cassette tape. I was fortunate to attend several of their concerts during high school.

At 17, the 1988 re-release on the Imaginos album wowed me; it's a spectacular redo, and the entire album remains in rotation for me.

Call me Desdinova
Eternal light
These gravely digs of mine
Will surely prove a sight

Huge Thanks To

The Astro team for their AMAZING work
The Tailwind team for their AMAZING work
The Flowbite team for their AMAZING work
The Iconify team for their AMAZING work
The Cloudflare Pages team for their AMAZING work

If this repo was helpful for your Astro journey, please give it a STAR!

Pull requests are welcomed!

Wishing you happiness, health, and security 🤗

Maintain,

Babul

Name		Name	Last commit message	Last commit date
Latest commit History 131 Commits
.github/workflows		.github/workflows
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
.prettierignore		.prettierignore
.release-it.json		.release-it.json
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
astro.config.mjs		astro.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
prettier.config.js		prettier.config.js
screenshot-dark.webp		screenshot-dark.webp
screenshot-light.webp		screenshot-light.webp
tailwind.config.mjs		tailwind.config.mjs
tsconfig.json		tsconfig.json

License

montopolis/desdinova

Folders and files

Latest commit

History

Repository files navigation