Vuepress+Vercel+Github 免费搭建博客
Vuepress+Vercel+Github 免费搭建博客
环境准备
第1步：安装node.js 访问Node.js 官方网站，选择适合系统的版本下载安装包并运行安装，在命令行输入node -v，若显示版本号则安装成功
第2步：安装 Git 从Github 官方下载地址下载并安装 Git，安装时可按默认设置。安装完成后，在命令行输入git --version，若显示版本号则表示安装成功。
创建项目
第1步：创建文件夹 在F盘创建zhouspeaks的文件夹，例如：F:\zhouspeaks。
第2步：初始化项目
2.1 在F:\zhouspeaks目录，鼠标右键，进入git命令窗口，如下所示： 
2.2 执行如下命令，如下所示：
# 初始化本地仓库
git init
npm init**第3步：安装 VuePress
# 安装 vuepress
npm install -D vuepress@2.0.0-rc.23
# 安装打包工具和主题
npm install -D bundler-vite@2.0.0-rc.23
npm install -D vuepress-theme-plume@1.0.0-rc.155第4步：创建 docs 目录和 docs/.vuepress 目录
mkdir docs
mkdir docs/.vuepress第5步：创建 VuePress 配置文件 docs/.vuepress/config.ts
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
lang: 'zh-CN',
theme: plumeTheme({
// more...
}),
bundler: viteBundler(),
//public: './public'
})第6步：配置文件 F:/vuepress-starter/package.json
{
"name": "vuepress-starter",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wpingchou/zhouspeaks.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/wpingchou/zhouspeaks/issues"
},
"homepage": "https://github.com/wpingchou/zhouspeaks#readme",
"description": "",
"devDependencies": {
"@vuepress/bundler-vite": "2.0.0-rc.23",
"@vuepress/theme-default": "2.0.0-rc.110",
"typescript": "^5.8.3",
"vuepress": "2.0.0-rc.23",
"vuepress-theme-plume": "1.0.0-rc.155"
}
}第6步：启动开发服务器
运行 docs:dev 脚本可以启动开发服务器：
npm run docs:dev运行 docs:build 脚本可以构建你的网站：
npm run docs:build第7步：Push本地项目到Github指定仓库
7.1 前提条件
确保您已经安装了 Git，并且在 GitHub 上创建了一个仓库。同时，您需要知道您的 GitHub 账号的用户名和密码（或 SSH 密钥）。
7.2 步骤
1.打开终端： 打开命令行工具（如 CMD 或 PowerShell），并导航到您的项目根目录。 2.初始化本地仓库： 如果您的项目尚未初始化为 Git 仓库，运行以下命令：
git init3.添加文件到暂存区： 将所有文件添加到暂存区：
git add .4.提交更改： 提交暂存区的文件：
git commit -m "Initial commit"5.添加远程仓库： 将您的 GitHub 仓库添加为远程仓库。将 <your-username> 替换为您的 GitHub 用户名，将 <repository-name> 替换为您的仓库名：
git remote add origin https://github.com/wpingchou/zhouspeaks.git注意： 这一步，后面每次更新就不用再执行了。
6.推送到 GitHub： 将代码推送到 GitHub 仓库：
git push -u origin master注意：
- 如果您的仓库使用的是
main分支而不是master，请将master替换为main。 - 后面更新博客，只需要执行：
npm run docs:build如果github编辑了，本地不是最新
git pull origin master # 如果你使用的是master分支git add .git commit -m "更新博客内容"git push origin master重要： 如果首页显示不正常，可能是因为docs目录下缺少README.md文件
---
home: true
---创建Github仓库
第1步：SSH Key本地生成并维护到github上
第2步：同步本地项目到github上
Vercel 部署
第1步：在 Vercel 上关联该 github 账号
第2步：在 Vercel 上点击 Add New Project，点击 import，导入该博客项目
第3步：部署
如果希望本地push到github后，vercel自动部署，则需要： 第1步： Vercel设置Deploy Hooks，复制URL 
第2步： Github，Settings中的Webhooks里设置，粘贴URL 
第4步：Add Domain 绑定已购买解析的域名
接下来，就可以通过域名www.zhouspeaks.com访问了！