作为一名大学生，能实际参与网站前期项目规划到最后上线部署是一个很难得的经历，本篇文章就分享我第一次完整制作网站遇到的困难与感想。

网站简介：

这是一个基于Next.js13构建的现代个人作品集网站，采用服务端渲染技术，提供高性能的内容展示体验。网站包含首页拼贴画廊、项目展示、博客文章、商品销售和个人介绍等核心功能，支持图片、视频及混合媒体内容。

网站项目技术方面介绍：

前端技术栈：

1.Next.js 13：使用 App Router 架构，支持服务端渲染和静态生成

2.React：组件化开发，支持客户端交互

3.TypeScript

3.Tailwind CSS：实用优先的 CSS 框架，实现响应式设计

3.next/font/google：集成 Google 字体（Geist Sans、Geist Mono）

后端与数据管理

• API Routes：Next.js 内置 API 路由，处理 CRUD 操作

• JSON 文件存储：轻量级数据持久化（projects.json、blog.json、shop.json、about.json）

• 文件系统操作：使用 Node.js fs 模块读写数据

部署架构

• Alibaba Cloud ECS：Ubuntu 22.04 服务器

• Nginx：反向代理，处理 HTTPS 和静态资源

• Let's Encrypt：免费 SSL 证书，启用 HTTPS

• PM2：进程管理，确保应用持久运行和自动重启

• Git：版本控制，从 GitHub 拉取代码部署

网站构建遇到的问题：

1.网站在初步构建时预想靠管理员端直接修改数据库内容，后来部署网站时发现数据库要靠在网上租才能实现上线后的管理员端实时更新，但是由于个人网站体量不大，而且是个本质静态网页，网站内容更新频率也不高，于是修改存储方式为json存储更为方便，本地修改json后再重新部署从而更新网站。

2.网站再上线部署时首先选择了supabase的免费计划来部署，但是只能外网访问，国内没有办法进入网站，后来在阿里云租了一年的服务器，并且在网关报备之后才成功在内网上线。

3.仅仅主要考虑了电脑端的各种效果实现，手机端网页用的是同一套代码，所以功能实现上会出现问题，特别是电脑端的字体在手机端用不了，这和浏览器也有关系，目前还不知道怎么修改。

感想体会

要实际上线部署的网站项目，除了我们在大学平常小组作业中本地项目要考虑的项目技术栈，还要根据网站性质和体量来设计数据存储方式，网站上线部署方式，还有代码的迭代管理也尤其重要，这些都是在平常日常学习中学不到的内容。

希望可以得到看到我这篇文章的前辈们也可以谈谈自己的感想，我本人实际项目经验不多，还请大家多多提出建议。