#Downloaded a template, what would be the next step?

1 messages · Page 1 of 1 (latest)

proven quest
#

Let me just preempt this with the fact that I've only been testing Astro for 1 day, so I'm very new to it.
I've gone through the first steps, and have successfully used npm create astro@latest to start a new, simple project, and have also built it and deployed it. So the basics are working.

Now I downloaded the Astroship and tried running the build command as the first thing. This gave me "astro: command not found" message. Not completely surprising, but hey, worth a try. I've been searing the docs on what to do next, from a best practice perspective.

My question is, what would be the next step here? Is there a way to initialize the Astroship template as a full Astro project (like with create), or is the task now to merge the template manually with an already existing project?

I made a simple attempt at the latter, but the build broke because seemingly a json package wasn't found. What is the way to resolve the missing resources in this case?

Not new to tech, but new to this ecosystem. A few pointers would be great and I'll run with it!

Thanks in advance!

muted ferry
#

It is necessary to get familiar with web development basics first

  • nodejs
  • package management: npm, yarn, pnpm
  • browser API (client vs server js)

With that you can have a smooth Astro experience.

proven quest
#

ok. They're not unfamiliar concepts to me, but I have little hands on experience with this ecosystem.
I forgot to mention that I'm aiming for primarily making at static site at this time, so I guess i can postpone nodejs a little.

I'll look into the package management.

#

One thing that is unaddressed from OP, is the best practice for include a template and the "astro: command not found". Could you share any info on that? Can a theme, which seemingly has the right structure for an Astro project, be initialized as such, or would one create a new project and then pull the theme in?

Thanks!

gilded fractal
#

Hey @proven quest ! You just need to run npm i here to install astro

#

Themes are simply astro projects with some starter styling, folder structure, components, you name it! Calling them "templates" would make the nomenclature less ambiguous imo

muted ferry
#

npm stands for Node Package Manager, thus you need nodejs for building not just for ssr with node adapter.

proven quest
proven quest
proven quest
#

I have a follow up question, if you don't mind. Again it shows I'm a noob in the ecosystem. I'm trying to tinker with the css, to add minor changes (color what not). I believe it's Tailwind has been used for UI components.

#

In one the included astro components I find h1 declaration like:

<h1 class="text-5xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight">

For the sake of example, I want to turn add a css rule to have the text color be red. To do this, I add a style element in the component with h1 { color:red}. This works.

However, if I add the same style at page level or layout level, it doesn't work. And ideally I'd like this red color rule to apply everywhere. Despite layout style with is:Global in layout, it not kicking in. It's overruled.

I understand priority of css declarations (which possibly is in play here), so I'm more wondering how one can declare such a global rule and ensure it won't be overriden later. Interestingly, it doesn't seem like the back font color is specified anywhere, which makes me wonder why the red color is overriden if not defined at component level.

Again, don't need a big explainer, just a pointer and I'll run with it 🙏🏻