深入解析：github 个人静态网页搭建（一）部署

2026-01-23 18:10 tlnshuju 阅读(0) 评论(0) 收藏举报

今年因为开学一个月之后才拿到签证被迫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 Pages
on:push:branches: [ main ]   # 你的默认分支
permissions:contents: readpages: writeid-token: write
concurrency:group: "pages"cancel-in-progress: true
jobs: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。