10分钟快速搭建自己的个人博客

初始化仓库

首先在 Github 上初始化一个空的仓库，命名使用 yourgithubname.github.io，由于我这里已经创建过了所以提示已存在，如果你没有创建过，那这里就是可用的，剩余配置如下图所示：

Description：选填，随便写
Public：勾选上，毕竟要提供给大家进行访问
Add a README file：勾选上，自动创建一个 md 文件说明
.gitignore ：这里我选择 Node
License ：这里我选择 MIT

关键步骤

关于博客搭建，我采用 vitepress 进行实现，类似的工具有很多，大家可以自行选择

使用 git clone 将仓库克隆到本地，然后通过 vscode 打开即可
执行 npx vitepress init 问答结束后会自动创建项目目录结构并生成 package.json 文件，需要注意的是第一个问题，你需要输入一个文件夹名称用作 vitepress 的配置生成，这里我输入的是 ./docs ，建议你也使用这个，否则可能会对后面的内容产生干扰，除非你对 vitepress 非常熟悉
执行 npm install -D vitepress 安装 vitepress

开发

执行 npm run docs:dev，成功之后会运行在 localhost:5173 并将开发服务器缓存在 /docs/.vitepress/cache 中

构建

构建项目执行 npm run docs:build，构建的内容会放在 /docs/.vitepress/dist 文件夹中

预览

预览项目执行 npm run docs:preview，执行成功之后会运行在 localhost:4173 打开直接观看效果即可

部署

官方提供的多种 部署方式，这里以 Github Pages 为例

在项目根目录下新建 .github/workflows/deploy.yml 文件并写入以下内容

yaml 复制代码

# Sample workflow for building and deploying a VitePress site to GitHub Pages
#
name: Deploy VitePress site to Pages

on:
  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
  # using the `master` branch as the default branch.
  push:
    branches: [main]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0 # Not needed if lastUpdated is not enabled
      # - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: npm # or pnpm / yarn
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Install dependencies
        run: npm ci # or pnpm install / yarn install / bun install
      - name: Build with VitePress
        run: |
          npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
          touch docs/.vitepress/dist/.nojekyll
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: docs/.vitepress/dist

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

完善 .gitignore 添加如下内容进行忽略

bash 复制代码

# .vitepress
docs/.vitepress/dist
docs/.vitepress/cache

打开 github 找到该项目进入 Setting -> Pages -> Github Pages -> Source -> Github Actions

本地开发完成之后，只需 push 到远端即可触发自动构建，构建完成（约2min ～ 5min）之后访问 yourgithubname.github.io

配置

主页以及项目的一些全局配置（包括导航栏、侧边栏、搜索等等等等）官网都说的非常清楚，入口放在这里，遵循规范进行傻瓜式配置就好

写作

内置 markdown 扩展，也可以在这里找到更多支持的语法格式，非常简单。你要做的事情就是在不断的工作和学习中通过编写 markdown 来丰富你的博客即可

以上步骤点到为止，官网也提供了中/英文版本切换，可以说非常完善了，更多内容可参考 vitepress

效果

总结

如果你确实想搭建一个文档或者个人博客，不妨立即手动尝试一下，毕竟从搭建到发布，只需要泡一杯茶的时间