English

繁體中文

English

繁體中文

Appearance

vitepress ​

How to Set Up VitePress and Deploy to Firebase ​

Step 1: Set Up Your Development Environment ​

  1. Install Node.js:

    • Visit the Node.js official website and download the latest LTS version.
    • Install Node.js, which will also install npm (Node Package Manager).

  2. Install Git:

    • Go to the Git official website and download the installer for your OS.
    • Install Git with the default options.

Step 2: Create a New VitePress Project ​

  1. Open Terminal or Command Prompt:

    • On Windows: Press Win + R, type cmd, and hit Enter.
    • On Mac/Linux: Open your Terminal.

  2. Create a New Directory for Your Project:

    bash
    mkdir my-vitepress-site
cd my-vitepress-site

  3. Initialize a VitePress Project:

    bash
    npm init vitepress@latest .
    • Choose a project name (you can just press Enter to use the default).
    • Follow any prompts.

  4. Install VitePress Dependencies:

    bash
    npm install

Step 3: Run Your VitePress Site Locally ​

  1. Start the Development Server:

    bash
    npm run docs:dev
    • This command will start a local server. Open your browser and go to http://localhost:3000 to see your VitePress site in action.

  2. Make Edits to Your Site:

    • Go to the docs folder and edit the index.md file to customize your homepage.

Step 4: Prepare for Deployment to Firebase ​

  1. Install Firebase CLI:

    • Open your terminal and run:
    bash
    npm install -g firebase-tools

  2. Login to Firebase:

    bash
    firebase login
    • Follow the instructions to log in to your Google account.

  3. Initialize Firebase in Your Project:

    bash
    firebase init
    • Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys."
    • Select the project you created on the Firebase console or create a new one.
    • Set the public directory to docs/.vitepress/dist.
    • Configure it as a single-page app (yes).
    • Don’t overwrite index.html if asked.

Step 5: Build and Deploy Your Site ​

  1. Build Your VitePress Site:

    bash
    npm run docs:build
    • This command generates a static version of your site in the docs/.vitepress/dist directory.

  2. Deploy to Firebase:

    bash
    firebase deploy
    • Firebase will deploy your site, and you’ll get a URL to view your live site.

Step 6: Update and Redeploy ​

Whenever you make changes to your site:

  1. Rebuild Your Site:

    bash
    npm run docs:build

  2. Redeploy to Firebase:

    bash
    firebase deploy

That’s it! Your VitePress site is now live on Firebase Hosting. As you get more comfortable with web development, you can start exploring HTML, CSS, and more advanced VitePress configurations.