背景

你可能现在拥有一堆md文件，需要将这些md文件做成一个网站，方便他人浏览阅读，但是网上搜索你会发现绝大部分的示例全都是VitePress + Github Page 搭建xxx.github.io 的博客网站，虽然这能满足那些搭建属于自己博客网站的需求，但是如果我想让我的github上的项目也搞弄成这种静态网站，可不可以呢？估计大部分同学都跟我想的一样，应该不行，github只给我们提供一个免费的.github.io机器使用，如果要想给每个github项目都搭建对应的网站，需要自己去购买服务器，然后部署至自己的服务器，这种方式确实可行，但是如果我们只想用服务器部署静态网站，难道就非得买服务器才能满足需求吗？

这个问题困扰了我挺久，我也没有去琢磨。直到最近接触用VitePress搭建静态网站，我可以把这个好消息告诉你，如果只有部署静态网站的需求，可以完全不用购买服务器，直接利用Github Page即可免费给每个项目搭建静态网站，以下篇幅将教你利用Github Pages免费部署特定项目的静态网站，有没有很开心 😄

初始化项目

依次执行如下命令

# 选择一个位置放置你的项目
mkdir free_static_site

# 进入项目
cd free_static_site

# pnpm 初始化
pnpm init

# 安装vitepress
pnpm install vitepress -D

package.json添加执行命令

{
	...
	"scripts": {
		"docs:dev": "vitepress dev docs",
		"docs:build": "vitepress build docs",
		"docs:serve": "vitepress serve docs"
	},
	...
}

添加docs相关目录及配置

Untitled 1.png

index.md ：首页展示内容

---
layout: home

title: Free Static Site
titleTemplate: Free Static Site

hero:
  name: Free Static Site
  text: How to use VitePress
  tagline: set up note
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/yxw007/free_static_site

features:
  - title: "Vite: The DX that can't be beat"
    details: Feel the speed of Vite. Instant server start and lightning fast HMR that stays fast regardless of the app size.
  - title: Designed to be simplicity first
    details: With Markdown-centered content, it's built to help you focus on writing and deployed with minimum configuration.
  - title: Power of Vue meets Markdown
    details: Enhance your content with all the features of Vue in Markdown, while being able to customize your site with Vue.
  - title: Fully static yet still dynamic
    details: Go wild with true SSG + SPA architecture. Static on page load, but engage users with 100% interactivity from there.
---

getting-started.md

# Getting Started

xxxx

## Step. 1 xxx

## Step. 2 xxx

config.js ：静态网站相关配置，比如：导航、主题等等

export default {
	title: "Free Static Site",
	description: "How to use VitePress",
	base: '/free_static_site/',
	themeConfig: {
		nav: [
			{
				text: "note", link: '/guide/getting-started', activeMatch: "/guide/"
			}
		],
		sidebar: {
			'/guide/': [
				{
					text: "note",
					collapsible: false,
					items: [
						{ text: "Getting-Started", link: "/guide/getting-started" },
					]
				}
			]
		},
	}
}

本地运行测试

本地运行查看效果
```
pnpm docs:dev
```
效果如下

Untitled 2.png

> 提示：说明静态网站已准备好
>

添加workflow配置，让其自动打包部署

Untitled 3.png

build.yml

name: CI
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]
jobs:
  Build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - uses: actions/checkout@v2
      - uses: pnpm/action-setup@v2.1.0
        with:
          version: 7.2.1
      - name: Install modules
        run: pnpm install

      - name: Run Lint
        run: pnpm run docs:build
        
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vitepress/dist

注意：pnpm docs:build 打包后的结果在在docs/.vite/dist目录

git 初始化 & 提交项目

git 项目初始化
```
git init
```
忽略不必要的文件和目录，.gitignore 内容如下
```
**/node_modules/
**/dist/
```
提交代码
```
git add .
git commit -m "init project"
```
github 创建项目

Untitled 4.png

执行以下命令

# 让本地仓库关联远程仓库
git remote add origin https://github.com/yxw007/free_static_site.git

# 将分支修改成master
git branch -M master

# 推送当前代码至远程仓库
git push -u origin master

配置Github Pages，部署打包分支

配置如下图所示

> 注意：配置好后刷新页面，即可看到访问连接
>

点击上面刷新出来的访问地址，最终效果：传送门

Untitled 2.png

示例工程：传送门 , 这个工程只是演示，想看完整一点的项目，请参考：github.com/yxw007/ES6_… ，麻烦帮忙点个Star 🌟

总结

不知道怎么搞就去参考现成项目是如何做的，从中说不定就能找到灵感。
不要畏惧英文，很多答案都是用英文写的，要学会利用全球人的智慧😊

参考文献

以上：如发现有问题，欢迎留言指出，我及时更正

VitePress + GitHub Pages 免费部署所有项目静态网站

背景