Welcome to Astro Xenon
Xenon is an open source Astro theme for bloggers that aims to excel in performance with accessibility in mind.
It relies on a few other plugins from the community like astro-imagetools and astro-icon.
βΊ Setup
- Clone this project:
git clone https://github.com/djmtype/astro-xenon.git
- Run
npm install
or use your favorite build tool. - Enjoy!
π Project Structure
Inside the Astro Xenon project, youβll see the following folders and files:
/
βββ public/
β βββ fonts/
β βββ images/
β βββ rss/
βββ src/
β βββ components/
β β βββ global/
β βββ data/
β βββ demo/
β βββ layouts/
β βββ pages/
β β βββ blog/
β βββ styles/
βββ astro.config.mjs
βββ package.json
βββ postcss.config.js
π Settings / Instructions
General Site Settings
For easier access, general site settings can be managed via src/data/site.json
.
These settings include:
- Global site information
- Main navigation links
- Social profile links
- Number of posts displayed on the Home page
- Pagination size on the Blog landing page
RSS Feed
RSS has been pre-configured based on any markdown file placed within src/pages/blog
. Be sure to configure your siteβs feed information in src/pages/feed.xml.js
.
Postscript: Adjust the site
property value found in astro.config.mjs
.
Styling
This theme utilizes JIT Open-Props in a big way.
In addition, PostCSS Preset Env is used to accomplish Sass-like things such as custom media queries, css file imports, and nesting.
- Schemes for
light
anddark
can be found within thesrc/styles/schemes
directory - Extra and aliased props reside in
src/styles/common/_variables.css
Common Astro Practices
Astro looks for .astro
, .md(x)
files in the src/pages/
directory. Each page is exposed as a route based on its file name.
Thereβs nothing special about src/components/
, but thatβs where we like to put any Astro/React/Vue/Svelte/Preact components or layouts.
Any static assets, like images, can be placed in the public/
directory.
Learn more about Astro
Feel free to check Astroβs documentation or jump into Astroβs Discord server.
π§ββοΈ Commands
All commands are run from the root of the project, from a CLI (Terminal):
Command | Action |
---|---|
npm install | Installs dependencies |
npm run dev | Starts local dev server at localhost:3000 |
npm run build | Build your production site to ./dist/ |
npm run preview | Preview your build locally, before deploying |