Astroplate is a free starter template built with Astro, TailwindCSS & TypeScript, providing everything you need to jumpstart your Astro project and save valuable time.
Made with ♥ by Zeon Studio
If you find this project useful, please give it a ⭐ to show your support.
- 👥 Multi-Authors
- 🌐 Multilingual
- 🎯 Similar Posts Suggestion
- 🔍 Search Functionality
- 🌑 Dark Mode
- 🏷️ Tags & Categories
- 🔗 Netlify setting pre-configured
- 📞 Support contact form
- 📱 Fully responsive
- 📝 Write and update content in Markdown / MDX
- 📎 Google Tag Manager
- 💬 Disqus Comment
- 🔳 Syntax Highlighting
- 🏠 Homepage
- 👤 About
- 📞 Contact
- 👥 Authors
- 👤 Author Single
- 📝 Blog
- 📝 Blog Single
- 🚫 Custom 404
- 💡 Elements
- 📄 Privacy Policy
- 🏷️ Tags
- 🏷️ Tag Single
- 🗂️ Categories
- 🗂️ Category Single
- 🔍 Search
- astro/react
- astro/sitemap
- astro/tailwind
- astro v5.7+
- node v20.10+
- yarn v1.22+
- tailwind v4+
yarn installyarn run devyarn run builddocker build -t astroplate .
# or
# docker --build-arg INSTALLER=npm build -t astroplate .
# or
# docker --build-arg INSTALLER=pnpm build -t astroplate .
docker run -p 3000:80 astroplate
# or
# docker run --rm -p 3000:80 astroplateTo access the shell within the container:
docker run -it --rm astroplate ashCopyright (c) 2023 - Present, Designed & Developed by Zeon Studio
Code License: Released under the MIT license.
Image license: The images are only for demonstration purposes. They have their license, we don't have permission to share those images.
Here I will document how I (Michael Alonge) customized the Astroplate template to my personal website.
The CV page combines a few key components:
- A JSON file that contains my professional information following the JSON Resume standard
- A HTML/CSS typeset resume template by Min–Zhong John Lu
- The astroplate template
The resume data is stored in src/config/cv.json and is treated as a configuration. This decouples the resume data from the resume template. Then I extended and customized the HTML/CSS template provided by Min–Zhong John Lu in src/styles/cv.css and src/pages/cv.astro to create a modern, print-optimized resume. By default, the cv page behaves like a normal website page and all of my resume content is embedded directly in the page. However, I added a print button to the page that allows the user to print the resume to a formatted PDF.
I added a route validation script to the project to ensure that the routes are generated correctly. This is done by checking the dist directory for the generated HTML files and comparing them to the expected routes.
To run the script, use the following command:
./scripts/validate-routes.shThis script is also run as a GitHub Actions workflow to ensure that the routes are generated correctly before deployment. The GHA workflow is located in the .github/workflows/validate-routes.yml file.