Next.js 博客模板部署、自定义与上线全记录

1. 本地部署项目

1. 项目地址：timlrx/tailwind-nextjs-starter-blog: This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

2. 要使用yarn来安装，但是发现没装yarn

确认已经有node.js和npm

用npm全局安装yarn：npm install -g yarn

3. 再次yarn，部分安装失败

尝试yarn dev时报错：

尝试清理缓存：yarn cache clean，重新yarn install：

4. 有新的报错，查询后发现是环境变量没有，尝试命令行中临时设置 PWD环境变量：set PWD=%CD%，后再次运行yarn dev成功！！！

5. 端口开在3000，localhost:3000，成功打开

2. 自定义网页

1. 增加穿越星空动态背景

2. Light模式下用粉白配色，dark模式下用黑白配色

3. 改为半透明页面

4. 在footer的social media里增加哔哩哔哩、小红书和抖音

5. 调整一下排版

3. 上传到GitHub仓库

1. 将原项目fork到自己的仓库

2. 初始git init；填写名称和邮箱：git config user.name "5SRT7"；git config user.email "894348120@qq.com"

3. 打包：git add .；查看状态：git status

4. git commit -m "描述您所做的修改"

5. git push -u origin master报错：

6. 增加remote：git remote add origin git@github.com:5SRT7/Tung4sblog.git；检查：git remote -v

7. 再次尝试git push -u origin master，报错：

8. generate an SSH key pair and add the public key to my GitHub account

9. 查看生成的密钥：type C:\Users\89434\.ssh\id_ed25519.pub（Linux可以用cat）

10. 将密钥写到GitHub的shh key：

11. 测试连接：ssh -T git@github.com，成功

12. 再次上传git push -u origin master，成功

13. 如果文件已经处于 Changes to be committed 状态（已暂存），接下来直接提交即可：git commit -m "Initial commit"

4. 在vercel上deploy

1. 用GitHub账号注册，新建project，选择自己仓库的项目，deploy就好。我遇到了一些问题，是改代码时的格式问题，求助deepseek改一下就好：

在GitHub改好代码后重新deploy成功：

2. 更改为自己的域名。添加之前在namesilo买的域名，但显示invalid configuration：

根据给的信息，在cloudflare增加DNS记录：

再回来refresh一下，就可以了：

测试一下，可以成功解析：