Getting Started - Astro AntfuStyle Theme

This post outlines the essential steps to quickly set up your personal website using the Astro AntfuStyle Theme. Each step may involve more detailed content, requiring you to consult other posts for further information.

Preparation#

(Skip if you’re a developer) To build your website with this theme, it’s recommended to:

Install Node.js for running and developing the project locally.
Install pnpm for managing dependencies.
Configure Git for version control.
Register on GitHub for cloud hosting.
Install VS Code for code editing. Set up Git and sign in to GitHub.
Familiarity with Astro and basic front-end knowledge is a plus.

These are ideal conditions, but feel free to substitute with tools you’re comfortable with.

Create Your Project#

Start with the latest theme version using one of two methods:

Use GitHub

Create a new repository in your GitHub account by clicking “Use this template” (without commit history) or “Fork” (preserves commit history) , then clone it locally:

# If SSH is not configured
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git

# If SSH is configured
git clone git@github.com:[YOUR_USERNAME]/[YOUR_REPO_NAME].git

Use CLI

Run the following commands in your desired directory to start locally:

# npm 6.x
npm create astro@latest --template lin-stephanie/astro-antfustyle-theme

# npm 7+, extra double-dash is needed
npm create astro@latest -- --template lin-stephanie/astro-antfustyle-theme

# yarn
yarn create astro --template lin-stephanie/astro-antfustyle-theme

# pnpm
pnpm dlx create-astro --template lin-stephanie/astro-antfustyle-theme

TIP

If you prefer not to use Git, you can download the ZIP file, extract it, and work directly in your local directory.

Launch the Project#

Start the project by running the following commands from the project root (replace pnpm with your preferred package manager if needed):

# Install dependencies
pnpm install

# Start the local dev server (opens at 'http://localhost:4321')
pnpm dev

You can explore the current theme freely. Additionally, the following commands are available:

Command	Description
`pnpm install`	Installs dependencies
`pnpm dev`	Starts a local development server at `localhost:4321` and opens the site in your browser
`pnpm sync`	Generates TypeScript types for Astro modules. Learn more
`pnpm check`	Runs diagnostics against your project and reports errors to the console
`pnpm build`	Build your production site to `./dist/`
`pnpm preview`	Preview your build locally, before deploying
`pnpm format`	Check code format with Prettier
`pnpm format:write`	Format code with Prettier
`pnpm lint`	Check code lint with ESLint
`pnpm lint:fix`	Lint code with ESLint
`pnpm astro --help`	Get help using the Astro CLI
`pnpm toolbar:on` `pnpm toolbar:off`	Enable or disable the Astro Dev Toolbar

Handling Package Management Alternatives

This project uses pnpm as the package manager, so you’ll need to install it if you haven’t yet.

You can execute npm install -g pnpm to install pnpm globally. Alternatively, you can enable corepack (allows you to manage package manager versions directly via Node.js) or install the ni tool (simplifies running commands across different package managers).

If you want to use a different package manager, make sure to convert the project to your chosen package manager before running its commands.

Configure the Project#

IMPORTANT

Before configuring, it is advisable to review Project Structure for an overview of the project and how it’s organized.

Configuration can be done in two steps:

Basic Configuration: Customize the src/config.ts file.
Advanced Configuration: Customize the LOGOs, site icons, styles, fonts and footer.

Authoring Content#

Once configured, ensure the project is running correctly in your browser, then start creating or migrating your content. Jump to the section you’re interested in:

Add New Posts: For creating posts, writing tips, and guidelines.
Recreate Current Pages: For recreating content for the /, /projects, /changelog, /streams, /feeds, and 404 pages, as well as deleting pages.
Markdown Syntax Guide: Showcase the rendering of Markdown syntax in this theme.
Markdown/MDX Extended Features: Extended syntax supported by the theme, including callouts (admonitions/alerts), fully-featured code blocks, image captions and links, video embeddings, styled GitHub links, and more.

Deploy Your Project#

Refer to Astro’s Deployment Guide to choose your preferred platform and follow its guide. Ensure the SITE.website option in the src/config.ts is correctly set before deploying!

Deploying Without a Git Repository Using CLI Tools

If you aren’t using GitHub and any other Git provider for deployment, follow the CLI Deployment Guide to deploy without a Git repository, such as using Vercel CLI or Netlify CLI.

Sync Updates#

Just like other open-source projects, this theme gets regular bug fixes and feature updates. To keep your customized project up to date, be sure to sync the latest changes. For more details, check out the sync updates guide.

To stay informed about the latest changes, visit the changelog or releases pages. You can also subscribe to the theme’s RSS feed for updates.

Next Steps#

You can dive deeper into the theme through the following sections:

Managing Image Assets: Best practices for using images in Markdown/MDX.
About Open Graph Images: How to customize or auto-generate Open Graph images.
FAQs and Known Issues: Get more insights into the theme’s details.

Additionally, feel free to explore the theme’s tech stack. For parts not mentioned or clarified in the guide, you might find answers in the Astro Docs. You can also follow the Astro Blog or join the Astro Lounge community.

Wrapping Up#

Congratulations on completing the setup! 🎉 Hopefully, this theme meets your blogging or portfolio needs.

If you encounter any issues, find errors, or see opportunities for improvement, feel free to join the discussion or submit an issue or pull request. Your feedback is invaluable to making this theme even better!

Thank you for taking the time to read this guide. ❤️

Happy coding and enjoy building with the Astro AntfuStyle Theme! 🌟