十分钟快速搭建个人网站教程（Nextjs）

前言

最近看了一篇推文聊到个人网站，文中提到一个观点：每个自媒体人都需要个人网站。

我认为说的很有道理，我觉得每个自媒体人都需要个人网站，为什么这么说呢？相比于在公众号上更新文章，依赖系统的流量池来推荐，在长远角度来看并不可靠，而如果拥有个人网站，可以把推文同时在网站和公众号上发布，个人网站是全网发布，不会受制于推荐系统，只要坚持更新，你的文章在整个网络上都能被搜索到，这能够持续提升个人影响力；此外，个人网站也可以给公众号引流，能够做到反哺。

那么如何快速建立个人网站了，其实很简单，跟着下面步骤，十分钟就能建立属于自己的网站了。话不多说，咱们快速开始吧！

一、本地运行项目

1、复制模板模板代码

在命令行输入以下命令

npx degit timlrx/tailwind-nextjs-starter-blog#v2 nextjs-tailwind-blog

2、本地安装依赖

yarn

3、本地运行项目

在命令行输入以下命令

npx next dev

然后打开浏览器，输入 http://localhost:3000/ 网站，此时就可以看到运行的网站了：

二、网站部署

本地运行没有问题后，就可以将网站直接部署到云端，这样你就拥有了一个自己的网站！

我们这里选择使用 vercel 部署，vercel 是一个免费部署平台，如果你还没有账号，推荐用 github 账号来注册一个，这对于你后续将 github 项目部署在 vercel 上很有帮助！

1、将本地项目推送到你的 github 账号上

2、vercel 部署

登陆 vercel 账号，导入你推送到 github 上的代码，点击 import

3、点击 deploy，一键部署项目

等待项目在云端部署，部署时间在五分钟左右。

4、等待部署成功后，点击前去控制台

图中就是你的网站域名，理论上就可以在浏览器中访问了！

三、网站域名替换

上述域名是vercel部署后随机生成的，后缀都是 vercel.app，但是这个域名在国内是访问不到的，所以需要重新申请一个网站域名，可以通过腾讯云申请；可以申请一个好记且具有个人品牌标识的域名。

如果还没有申请域名，我为大家整理了最全的免费域名申请网站，在公众号后台回复【免费域名】即可获取。

1、申请域名后，配置域名解析

由于我已经申请过域名，域名解析时用的是二级域名

如果是新申请的一级域名，可以参考下图域名解析配置

2、配置域名解析后，在vercel中添加对应的域名

3、用新的域名访问网站

这样在国内就可以访问你的网站啦！

四、个性化配置网站

恭喜你坚持到最后一步了！通过上述步骤你已经通过 vercel 免费部署得到了一个自己的网站，接下来可以通过修改配置文件，将网站改造成自己的想要的样子。

1、修改data/siteMetadata.js

个性化修改网站相关信息，包括网站标题、描述，以及网站底部社交账号和联系方式，对应关系如下图所示

2、修改 data/authors/default.md，更新网站个人介绍

3、修改 data/projectsData.js

用来更新个人展台，可以用来展示个人作品或者最新文章

写在最后

恭喜你坚持到了最后，希望每个自媒体人都能通过个人网站建立个人品牌！如果有哪些地方写的不对，欢迎各位指正！如果各位读者有疑问，也欢迎留言。

---

我的专栏：前端后花园周刊 | 个人建站

搭建网站预览：前端技术周刊 | 松桑的前端后花园 (songbenblog.com)

这里是松桑的前端后花园，目前坚持在写前端后花园周刊，专注前端基础领域，分享常见前端面试题、前端开源项目、工具库、前端最新动态，目前还一个前端菜鸟，和我一起打怪升级吧！