github 个人静态网页搭建（一）部署
今年因为开学一个月之后才拿到签证被迫gap了，最近论文没啥好思路，再则又攒了点文章想着看看能不能申请个更好的项目所以搭个个人网站，以后个人网站和csdn同步更新啦，github 关注主播Scabbards1500谢谢喵
ide: VS Code
技术栈：Next.js + TailwindCSS + TypeScript + Vercel/GitHub Pages
github 部署
首先git hub 新建个仓库克隆到本地（此处无需多言）
上传一个html 后setting pages 这里选择你自己的分支，我选的是mian，过一会上边就会出现你的web 的网址了
我是让copilot写个一个测试，妈耶花里胡哨的这家伙
前端范式
就传统前端大家都知道 html, js 和css不多说了。
vue 和 react 是什么？ 和一般的html, Js 和css 有什么区别呢？
| 类比 | 含义 |
|---|---|
| HTML | 网页的骨架 |
| CSS | 网页的外观样式 |
| JS | 网页的行为逻辑 |
| Vue / React | 一套“组织 HTML + CSS + JS 的新方法”，让它们更模块化、更自动化 |
Vue 和 React 都是用于**构建用户界面（UI）**的 前端框架 / 库。
它们的主要目标是：
让你更高效、更结构化地用 HTML + CSS + JavaScript 构建复杂的交互式网页。
📘 通俗讲：
如果 HTML/CSS/JS 是“原材料”，
那 Vue/React 就像是“建筑模板 + 施工工具”，
帮你快速搭出复杂、动态的网页应用。
Vue/React是：
使用“组件化”和“声明式编程”的范式
页面 = 一个个 组件 (Component) 组成
状态改变 → 界面自动更新（不用你手动操作DOM）
比如你在 React/Vue 写的是这种：
<button @click="count++">{{ count }}</button>
或者 React：
<button onClick={() => setCount(count + 1)}>{count}</button>
而在传统 HTML + JS 里你得写成：
<button id="btn">0</button> <script> let count = 0; document.getElementById('btn').addEventListener('click', () => { count++; document.getElementById('btn').innerText = count; }); </script>
Vue/React 就帮你抽象掉了 DOM 操作，让开发者只关心“状态”和“逻辑”。
技术栈
Next.js + TailwindCSS + TypeScript + Vercel
这是我们的技术栈，当然是gpt 推荐的
| 名称 | 类型 | 作用 | 说明 |
|---|---|---|---|
| Next.js | React 框架（基于 React 的增强版） | 提供服务器渲染、路由系统、SEO支持 | React 官方推荐的生产级框架 |
| TailwindCSS | CSS 框架 | 快速写样式，用原子类代替写 CSS | 写 UI 非常快，不用单独写 CSS 文件 |
| TypeScript | JS 超集 | 给 JavaScript 加上类型检查 | 提高开发安全性、可维护性 |
| Vercel | 部署平台 | 一键部署 Next.js / React 项目到云端 | 官方支持 Next.js，非常顺滑 |
总之就是在本地用 Next.js + Tailwind + TypeScript 开发，然后用 Vercel 一键部署上线，
环境配置
Node.js（运行环境）
-
去官网安装 👉 https://nodejs.org
-
建议版本：
LTS（长期支持版，比如 20.x） -
安装完后打开终端输入：
node -v npm -v能输出版本号就说明成功。
VS Code 插件
-
ES7+ React/Redux/React-Native snippets（写 React 代码更快） -
Tailwind CSS IntelliSense（Tailwind 智能提示） -
Prettier（自动格式化） -
TypeScript ESLint（代码检查）
创建项目
在 VS Code 里打开一个空文件夹，然后在终端运行：
npx create-next-app@latest . --typescript --tailwind
这几个选项我是这样选的，比较符合初学习惯
等着慢慢配置吧...
然后配好了出现这个，这就是你的项目目录了
记得把一个空文件放到/public/.nojekyll
编译项目
这其实已经是个完整的默认项目了，然后在命令行输入
清空缓存
Remove-Item .\.next -Recurse -Force -ErrorAction SilentlyContinue
编译
npm run build
此步骤会生成一个.next 文件夹
本地预览
npm run dev
然后浏览器打开http://localhost:3000即可
部署到网页
方法1：导出到out 文件夹
如果要导出，则在根目录价格next.config.mjs
然后里面写个导出
/** @type {import('next').NextConfig} */
const repo = "1500web"; # 这里我写的我自己的
const isProd = process.env.NODE_ENV === "production";export default {output: "export", // 关键：导出静态站到 out/images: { unoptimized: true }, // 兼容 GH PagesbasePath: isProd ? `/${repo}` : undefined,assetPrefix: isProd ? `/${repo}/` : undefined,trailingSlash: true,
};
然后你会在根目录得到一个out文件夹，这个文件夹里面就是渲染好的前端内容
但是但是，如你所见这个生成的文件夹是在/out里而非我的根目录，所以githubpage 无法编译
所以我们需要
添加github page 配置
在根目录新建文件夹
deploy.yml是部署配置，具体代码如下
name: Deploy to GitHub Pageson:push:branches: [ main ] # 你的默认分支permissions:contents: readpages: writeid-token: writeconcurrency:group: "pages"cancel-in-progress: truejobs:build:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v4- uses: actions/setup-node@v4with:node-version: 20cache: npmcache-dependency-path: package-lock.json # 根目录的 lock 文件- run: npm ci- run: npm run build # 生成根目录 out/- uses: actions/upload-pages-artifact@v3with:path: out # ← 直接上传根目录 outdeploy:needs: buildruns-on: ubuntu-latestenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- id: deploymentuses: actions/deploy-pages@v4
然后给这个推到仓库去
github 配置改为 Github Actions
然后又出现了新的问题
传上去的图片统统出了问题
哎哟麻麻烦烦直接方法2，主要是开发纯新手不太会debug
方法2: vercle一键编译+部署
-
打开 https://vercel.com 用 GitHub 账号登录。
-
New Project → Import Git Repository，选择你的仓库。
-
检查框架识别（应自动识别为 Next.js）：
-
Build Command：
next build（默认） -
Output directory：
.next（自动）
-
-
如有环境变量（DB、API 密钥等），在 Settings → Environment Variables 添加（Dev/Preview/Prod 可分开配置）。
-
点击 Deploy。几分钟后会得到
https://你的项目.vercel.app。
以后每次
git push到主分支或开 PR，Vercel 会自动重新构建和部署（主分支→Production，PR→Preview）。
看到这个页面基本上就成功了
我草真的好简单爱了爱了
具体开发开篇新的博客写吧