Skip to content

jfkisafk/stelo.me

 
 

Repository files navigation

Table Of Contents

  1. Key Features
  2. Demo
  3. Commands
  4. Configure
  5. Acknowledgment

Key Features

  • Astro v4 Fast 🚀
  • TailwindCSS Utility classes
  • Accessible, semantic HTML markup
  • Responsive & SEO-friendly
  • Dark / Light mode, using Tailwind and CSS variables
  • Astro Assets Integration for optimised images
  • Auto-generated sitemap
  • Astro Icon svg icon component

Demo 💻

Check out the Demo, hosted on Netlify

Commands

Replace pnpm with your choice of npm / yarn

Command Action
pnpm install Installs dependencies
pnpm dev Starts local dev server at localhost:4321
pnpm build Build your production site to ./dist/
pnpm postbuild Pagefind script to build the static search of your blog posts
pnpm preview Preview your build locally, before deploying
pnpm sync Generate types based on your config in src/content/config.ts

Configure

  • Edit the config file src/site.config.ts for basic site meta data
  • Update file astro.config.ts site property with your own domain.
  • Replace & update files within the /public folder:
    • favicon.ico & other social icons
    • robots.txt - update the Sitemap url to your own domain
    • manifest.webmanifest
  • Modify file src/styles/global.css with your own light and dark styles.
    • You can also modify the theme(s) for markdown code blocks generated by Expressive Code. Astro Cactus has both a dark (dracula) and light (github-light) theme, which can be found in src/site.config.ts. You can find more theme(s) and options here.
  • Edit social links in src/components/SocialList.astro to add/replace your media profile. Icons can be found @ icones.js.org, per Astro Icon's instructions.
  • Optional:
    • Fonts: This theme sets the body element to the font family font-mono, located in the global css file src/styles/global.css. You can change fonts by removing the variant font-mono, after which TailwindCSS will default to the font-sans font family stack.

Deploy

Astro docs has a great section and breakdown of how to deploy your own Astro site on various platforms and their idiosyncrasies.

By default the site will be built (see Commands section above) to a /dist directory.

Acknowledgment

This theme was inspired by Astro Cactus Theme

License

MIT

About

Website content for https://stelo.{app,dev,info,me}. Served on Vercel.

Resources

License

Stars

Watchers

Forks

Languages

  • Astro 66.9%
  • TypeScript 21.4%
  • JavaScript 7.9%
  • CSS 3.2%
  • Shell 0.6%