diff options
author | 2022-03-02 12:09:43 -0800 | |
---|---|---|
committer | 2022-03-02 12:09:43 -0800 | |
commit | d5ced6d0d18af666c6546db7d0df5166b81f01ee (patch) | |
tree | 0a0d53d493b3e0c1c609cbfa1f201c1ba1998d82 /smoke/docs-main/src/pages/en/getting-started.md | |
parent | f957e46724a10d200be7f3a63463c9306a95d8e8 (diff) | |
download | astro-d5ced6d0d18af666c6546db7d0df5166b81f01ee.tar.gz astro-d5ced6d0d18af666c6546db7d0df5166b81f01ee.tar.zst astro-d5ced6d0d18af666c6546db7d0df5166b81f01ee.zip |
[ci] update smoke tests (remote) (#2699)
Co-authored-by: FredKSchott <FredKSchott@users.noreply.github.com>
Diffstat (limited to 'smoke/docs-main/src/pages/en/getting-started.md')
-rw-r--r-- | smoke/docs-main/src/pages/en/getting-started.md | 94 |
1 files changed, 60 insertions, 34 deletions
diff --git a/smoke/docs-main/src/pages/en/getting-started.md b/smoke/docs-main/src/pages/en/getting-started.md index b0a879df2..bbef88a38 100644 --- a/smoke/docs-main/src/pages/en/getting-started.md +++ b/smoke/docs-main/src/pages/en/getting-started.md @@ -1,72 +1,98 @@ --- +setup: | + import Button from '../../components/Button.astro' layout: ~/layouts/MainLayout.astro title: Getting Started description: A basic intro to Astro. --- - -Astro is a modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources. +Static Site Generator 🚀 Bring your own Framework 🚀 Ship Less JavaScript ## Try Astro -The easiest way to install Astro is to run `npm init astro` in a new directory on your machine. Our CLI wizard will assist you in starting a new Astro project. +We've made it as easy as possible to get started with Astro either in your browser, or on your machine! + +### Online Playgrounds + +Visit [astro.new](https://astro.new) for the easiest way to "try before you buy." Choose from a variety of starter templates and start building a full, working version of Astro right in your browser! + +Or, **instantly launch our basic starter project** with just one click of a button: - 📚 Read our [Installation Guide](/en/installation) for detailed instructions. +<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;"> + <Button href="https://astro.new/starter?on=codesandbox">Open in CodeSandbox</Button> + <Button href="https://astro.new/starter?on=stackblitz">Open in StackBlitz</Button> +</div> -### Example Projects +### Install Astro Locally -If you prefer to learn Astro by example, check out our [complete library of examples](https://github.com/withastro/astro/tree/main/examples) on GitHub. +Ready to install? -You can check out any of these examples on your local machine by running `npm init astro` with the `--template` CLI flag. The `--template` flag also supports third-party, community templates. +Get a new project up and running locally in no time with our easy `create-astro` CLI wizard! ```bash -# Run the init wizard and use this official template -npm init astro -- --template [OFFICIAL_EXAMPLE_NAME] -# Run the init wizard and use this community template -npm init astro -- --template [GITHUB_USER]/[REPO_NAME] -npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example +# run this command in a new directory to get started! +npm init astro ``` -### Online Playgrounds +⚙️ Our [Installation Guide](/en/installation) has full, step-by-step instructions for installing Astro with your favourite package manager. + +⚙️ See instructions for [manual setup](/en/guides/manual-setup) instead. + + +## Start building with Astro + +Jump right in and add some content and features to your site! + +🏗️ Add new [Astro (.astro) pages](/en/core-concepts/astro-pages) and/or [Markdown (.md) pages](/en/guides/markdown-content) to your site. + +🏗️ Create your first [Layout](/en/core-concepts/layouts). + +🏗️ Add additional [CSS and styling](/en/guides/styling) to your site. + +*... and even more Guides under **Learn*** -If you're interested in playing around with Astro in the browser, you can instantly spin up a new Astro project with our UI at [astro.new](https://astro.new/). -You can try Astro in online code editors like Stackblitz, CodeSandbox, Gitpod, and GitHub Codespaces. Click the "Open in Stackblitz" link in any of the examples in our [examples library](https://github.com/withastro/astro/tree/main/examples). Or, [click here](https://stackblitz.com/fork/astro) to start a new project in [Stackblitz](https://stackblitz.com/fork/astro). ## Learn Astro -All manner of people come to Astro from different backgrounds bringing with them different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful. +See examples of some of the key concepts and patterns of an Astro site! + +📚 Read more about Astro’s [project structure.](/en/core-concepts/project-structure) + +📚 Learn more about Astro’s [built-in components.](/en/reference/builtin-components) + +📚 Explore Astro’s [API.](/en/reference/api-reference) + +*... and even more reference material under **API*** + +## Integrate with Astro -- If you prefer to **learn by doing**, start with our [examples library](https://github.com/withastro/astro/tree/main/examples). -- If you prefer to **learn concepts step by step**, start with our [basic concepts and guides](/en/core-concepts/project-structure). +Explore different integrations that our users have combined with Astro! -Like any unfamiliar technology, Astro comes with a slight learning curve. However, with practice and some patience, we know, you _will_ get the hang of it, in no time. +🧰 Use a CMS with your Astro project. -### Learn `.astro` Syntax +🧰 Set up eCommerce. -When you begin to learn Astro, you'll see many files using the `.astro` file extension. This is **Astro’s Component Syntax**: a special HTML-like file format which Astro uses for templating. It was designed to feel familiar to anyone with HTML or JSX experience. +🧰 Connect a database to your site. -Our helpful guide on [Astro components](/en/core-concepts/astro-components) introduces you to the Astro syntax, and is the best way to learn. +*... see our [third-party integrations](/en/integrations/integrations)* -### API Reference -This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/en/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/en/reference/builtin-components) lists all available core components, like `<Markdown />` and `<Code />`. -### Versioned Documentation +## Join our Community -This documentation always reflects the latest stable version of Astro. Once we hit the v1.0 milestone, we will add the ability to view versioned documentation. +Join us in the [Astro Discord](https://astro.build/chat) to share with and get help from an active, friendly community! -## Staying Informed +💬 Say hi in our `#introduce-yourself` channel! -The [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account is the official source for the updates from the Astro team. +💬 Ask our Support Squad a question in our `#support` channel! -We also post release announcements to our [Discord community](https://astro.build/chat) in the #announcements channel. +💬 Share what you've been working on in our `#showcase` channel! -Not every Astro release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the Astro repository](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md). -## Something Missing? +## Learn More -If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation](https://github.com/withastro/astro/issues/new/choose) with your suggestions for improvement, or tweet at the [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account. We love hearing from you! +[Astro Blog](https://astro.build/blog/) -## Credit +[Astro changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) -This getting started guide was originally based off of [React’s](https://reactjs.org/) getting started guide. +[Astro Migration Guide](/en/migrate) (for upgrading to v0.21+) |