Tiny Rocket
Tiny Rocket’s styling is intentionally minimal, but highly customisable for use-case specific CSS customisation using Tailwind.
Out of the box, it comes with sitemap.xml, site search, RSS feed, and web map built-in. Below is an overview of Tiny Rocket to help you customise it to suit your project.
Website pages and blog posts are in the default Astro src/pages/ directory.
Styling uses Tailwind CSS and the typography plugin is included. You can replace Tailwind with your preferred CSS.
You MUST set the value of site variable to your own website address. This variable is used for sitemap and RSS.
Optional: You can toggle the value of legacy.astroFlavoredMarkdown variable if you want to use .mdx only or .md; see Astro documentation.
HTML language is set in src/components/Page.astro.
Navigation can be accessed and changed via components/SiteHeader.astro.
If your project needs a copyright notice, it is set in src/components/Footer.astro and if you do not need it, just remove it from the footer.
Blog pagination is set in src/pages/blog/[...page].astro in pageSize variable.
Header for the website is different from the blog: SiteHeader.astro and BlogHeader.astro in src/components/ to differentiate the styling (or even navigation, if needed). If you want them to be identical, then you can replace all calls to BlogHeader component with SiteHeader component.
sitemap-index.xml is generated automatically using @astrojs/sitemap. Note that the sitemap is not visible in development mode - it is generated during “astro build”; see Astro documentation.
After you set up the hostname / site name in Astro.config.mjs, edit the public/robots.txt file and append with the generated sitemap’s absolute URL (e.g. Sitemap: https://example.com/sitemap-index.xml).
Please check Astro deployment guide for your hosting provider and follow accordingly.
Search uses pagefind (MIT License) and is shipped by default, but NOT turned on. If you do not want search, just delete it from the template as you customise your site.
If you want to turn it on, you need to add pagefind’s indexing step (npx pagefind --source dist) after the build step on your deployment platform. For example:
npm run build; npx pagefind --source dist
RSS.xml is generated automatically by src/pages/rss.xml.ts using @astrojs/rss. At the very least, you MUST edit the title and description for the RSS feed in the .ts file.
By default, only the .mdx blog posts are included. This can be tweaked by modifying the items in rss.xml.ts; see Astro documentation. If you want to serve the RSS feed differently, you can relocate the .ts file and modify the blog file path accordingly.
If you add date in your blog post pubDate and enter only the date without time (hh:mm) for blog date, then @astrojs/rss assumes the pubDate time as 00:00 as of your build machine time zone.
Web map component (WebMap) uses LeafletJS (BSD License). The component input props are:
To display a map, you need to have a map tile provider. Please consult this OSM list. If you do not input the map tile provider, then you explicitly choose to use OpenStreetMap intentionally and Tiny Rocket will retrieve OpenStreetMap tiles for you. In doing so, you agree to abide by their policies.
Sometimes you want your font to not be too bland, so you pick something nice, but not all operating systems support the particular web font by default. You can use Google Font (or other provider) with all the privacy implications. Alternatively, you can self-host.
Tiny Rocket comes with font self-hosting example. You are encouraged to change it with whatever font fancy your style.
Tiny Rocket’s example implementation uses “Junction”, an open source font from the League of Movable Type (Open Font License). The font files are placed in public/assets/font/. The font definitions are in public/main.css and in tailwind.config.cjs. In this particular example, the font is called from src/components/Page.astro as class="font-junction". In your implementation, you can call it whatever fits your needs.
Thank you Cloudflare Pages for hosting this Tiny Rocket example site, Andy Hermawan for the Unsplash images, and the open source communities of Astro, Tailwind, pagefind, LeafletJS, and The League of Movable Type.
Thank you for the PRs:
Tiny Rocket uses semantic versioning. It uses rolling version numbering if and when there is an update and will remain in the 0.9.xx range for the foreseeable future.
I was hand-coding a company website and as Astro entered the 1.0-beta phase, I tried Astro and found synergy with the rest of my work and I had no issue with the beta versions, so I settled on using Astro.
The defaults that came with npm create astro@latest (as of May 2022) worked well, but I needed to customise it. So I:
And that became the initial version of Tiny Rocket theme (v0.9.0).
I hope Tiny Rocket is useful for someone out there. Happy hacking!
~ Slamet