The public source code for the eltana.com website
This repository contains the source code for eltana.com. It is built with Astro and Tailwind CSS. The site is hosted on GitHub Pages and deployed using GitHub Actions.
The core way this template is different from the original is that it heavily uses .js
config files to configure data and content for its site.
Here are a few common config directories and what you will find there:
src/config/site/*
- Site configurationsrc/config/pages/home/*
- Home page configurationfeatured-posts.js
- Featured blog posts on the home pagehero.js
- Hero component configuration on the home pagecontent.js
- Main content component configuration on the home page
src/config/components/*
- Component configurationannouncement.js
- Announcement component configuration on all pagesfooter.js
- Footer component configuration on all pagesheader.js
- Header component configuration on all pageslogo.js
- Logo (text) component configuration on all pages
Inside AstroWind template, you'll see the following folders and files:
/
โโโ public/
โ โโโ robots.txt
โ โโโ favicon.ico
โโโ src/
โ โโโ assets/
โ โ โโโ images/
โ โ โโโ styles/
โ โ โโโ base.css
โ โโโ components/
โ โ โโโ blog/
โ โ โโโ common/
โ โ โโโ widgets/
โ โ โ โโโ Header.astro
โ โ โ โโโ ...
โ โ โโโ CustomStyles.astro
โ โ โโโ Logo.astro
โ โโโ config/
โ โ โโโ components/
| | | โโโ announcement.js
| | | โโโ call-to-action.js
โ โ โ โโโ ...
โ โ โโโ home/
| | | โโโ content.js
| | | โโโ faqs.js
โ โ โ โโโ ...
โ โ โโโ site/
โ โ โ โโโ blog.js
| | | โโโ config.js
โ โ โ โโโ ...
โ โโโ content/
โ โ โโโ post/
โ โ โ โโโ post-slug-1.md
โ โ โ โโโ post-slug-2.mdx
โ โ โ โโโ ...
โ โ โ-- config.ts
โ โโโ layouts/
โ โ โโโ BaseLayout.astro
โ โ โโโ ...
โ โโโ pages/
โ โ โโโ [...blog]/
โ โ โ โโโ [category]/
โ โ โ โโโ [tag]/
โ โ โ โโโ [...page].astro
โ โ โ โโโ index.astro
โ โ โโโ index.astro
โ โ โโโ about.md
โ โ โโโ 404.astro
โ โ โ-- rss.xml.ts
โ โ โโโ ...
โ โโโ utils/
โ โโโ config.mjs
โ โโโ data.js
โโโ package.json
โโโ astro.config.mjs
โโโ ...
Astro looks for .astro
or .md
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.
Any static assets, like images, can be placed in the public/
directory if they do not require any transformation or in the assets/
directory if they are imported directly.
All commands are run from the root of the project, from a 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 |
npm run format |
Format codes with Prettier |
npm run lint:eslint |
Run Eslint |
npm run astro ... |
Run CLI commands like astro add , astro preview |
Here are some basic commands to get you up and running to develop with this template:
-
Install
npm
dependenciesnpm i
-
Start the development server
npm run dev
-
View your site at
localhost:3000
Live reload is enabled by default, so any changes you make will be reflected in the browser.
Deployment docs for GitHub Pages
When you push
changes to your repository, GitHub will automatically build and deploy your site.
This template also comes bundled with the branch-deploy Action. Please ensure you view the branch-deploy.yml
file and make any necessary changes if you wish to use it.
The branch-deploy
Action will allow you to trigger branch deployments from pull requests by using comments such as .deploy
.
This templates also uses a custom GitHub Actions build cache to help speed things up in CI when processing images. If you make any changes to images when working on a project using this template, please ensure to run npm run build
before deploying to ensure your cache.json
file is updated.
This section goes into details on how you can make changes to the template.
Actual examples in the form of commits to this repository:
This theme is based off the template by onwidget