如何从零开始搭建自己的个人网站（2024.2.28）

原文链接：

​https://zhuanlan.zhihu.com/p/684446306

以后知乎大概主要写算法笔记和题解了，项目之类的东西大概会发到这里来。

关键字：

华为云HECS，lls，vue3，DNS解析，域名，公网IP，FTP，踩坑

前言：

因为偶然发现华为云618活动，心血来潮想将自己很早之前做的小项目上线，结果中途出了一堆莫名其妙问题，小通宵了两天才基本解决，故有此文。

项目目前已经成功上线，但由于未备案暂时还不能通过域名访问，考虑到公网ip暴露可能造成一定风险，这里就暂时不挂上链接了。

本文将尽可能详细地记录本次Vue3项目的上线经历以及中间踩坑的过程与解决方案，尽量确保0基础也能看懂。

（当然如果想完全看懂你需要一点Vue基础，如何入门Vue不在本文的讨论范围内）

题外话：

这价格真的无敌吧（

正文：

（1）购买服务器

如果是轻量级的静态博客可以考虑使用github page进行托管，但访问速度会相当慢，推荐仅作为一次性练手使用。

我本次使用的是华为云HECS-1核2G1M的windows系统服务器，用来搭建个人网站已经绰绰有余了。

此时你可以得到一个公网ip，我们之后的一系列操作都将围绕这个ip进行。

（2）购买域名<非必需>

域名的作用是指向你的服务器，当然你可以选择直接使用公网ip访问，但正如上文所说的，这并不安全，不过仅仅作为个人练习使用的话也未尝不可。

腾讯云，华为云，阿里云，Godaddy等等都有购买域名的功能，直接搜索选取喜欢域名的即可，价格都是一样的，作为练习使用的话当热便宜优先。

这里建议在国内平台购买，当然如果仅作为练手的话都是无所谓的。

需要注意的是，国内平台购买域名需要进行实名认证，审核一般要一天到两天，请提前进行认证。

（3）DNS解析<非必需>

如果未购买域名的话可以直接跳过本步。

DNS解析的作用便是将域名指向你的公网ip。这里我使用的是Godaddy和DNSpod（将Godaddy上的域名托管到DNSpod）。

在Godaddy的域名服务器界面添加root.dnspod.net和restore.dnspod.net：

然后我们就能在DNSpod进行DNS解析了，演示如下：

（当然最开始的时候是没有这几个记录的，暂停的这些是我之前用于gitpage托管的，正在运行的这个就是我的公网ip）

然后根据我的格式，选择添加记录，主机记录www，记录类型为A，记录值为你的公网ip，其余默认即可。

（4）服务器设置密码与远程登陆（重要）

刚购得服务器时，需要进行密码重置，重置完成后就可以使用你设定的用户名和密码进行登录了。

这里使用的是RDP文件登录，相对方便。

（5）挂载FTP站点（重要）

这一部分我踩了相当多的坑，下面给大家一一道来。

首先进行服务器的配置，这部分华为云官方有很详细的文档和视频，个人建议跟着视频一步一步走，防止出错。

文档链接：
https://support.huaweicloud.com/bestpractice-ecs/zh-cn_topic_0109733866.html

视频链接：
https://res-video.hc-cdn.com/cloudbu-site/china/zh-cn/ECS-video/1706168082497472310.mp4

大家应该注意到了，这个视频里有一处小错误：在某个步骤中，字幕把公网ip说成了私有ip。辨识这个错误很简单，只需记住12x开头为公网ip，19x开头为私有ip即可。

还需注意，安全组是需要我们自己配置的，而不是服务器配置好后自动实现的。

到这里初步配置就完成了，需要一提的是，如果在本地cmd中ping公网ip时发生超时，可能原因是你没有配置好安全组，服务器拒绝了你的ping，这里可以在新建安全组中找到。

然后下一步，就是进行软件安装。这里使用的是开源软件Filezilla，下载链接：https://www.filezilla.cn/download/client
，从中选择合适版本即可。

安装完成后，我们就可以尝试链接主机了————这是本篇中坑最多的部分之一。

打开软件后我们看到的是这样一个界面：

我们点击文件，点击站点管理器，如果你是按照视频操作的话，那么就按照如图所示编辑，主机就填你的公网ip：

点击连接即可：

至此，我们可以成功文件传输给服务器。只需要右键点击所需文件，再点击红色的上传按钮即可将文件上传到我们在服务器配置的文件夹。

需要注意的是，一定要使用明文FTP（因为我所购买的这个服务器不支持FTP over TLS）

（6）打包项目

由于我的服务器是windows系统，这里我们使用build进行打包，这一步很简单，在项目相关文件夹的终端输入npm run build即可。

但本步骤看似简单，实际上是坑最最最最多的一步，即是在本地的npm run serve能够正常运行，但还是会出现各种玄学错误，包括但不限于：404，空白，控制台报错，诸如此类不一而足。

首先我尝试了npm run serve，运行成功，看起来没出什么问题，可喜可贺：

打包出来之后，我尝试在浏览器中打开index.html文件，发现页面一片空白，控制台还有报错：

上网查找了原因，发现是老生常谈的文件路径问题，此时vue.config.js中的代码是这样的：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

只需要在文件中再加入几行：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  },
  publicPath: './'
};

此时再次npm run build，在浏览器中打开的index.html可以正常运行了！

（注：devtool: 'source-map'这一部分是开启源码映射，方便查找错误用的，真正起作用的是publicPath: './'）

但是此时上线到服务器后，仍然是一片空白，控制台莫名其妙报了语法错误syntax error，我花了将近一下午加一晚上的时间搜索解决方案，甚至尝试直接将项目搬到服务器进行build，但仍然是syntax error。

但事实上解决方案相当简单：在服务器上下载一个chrome，然后将其设置为默认浏览器。

于是乎成功运行，可喜可贺：

搞了半天是浏览器不兼容，属实是最难绷的一集。

（7）测试

那么此时我们就可以愉快访问我们的网站了，假设我的公网ip是121.11.45.14，设置网站端口为4090，那么我们就可以通过http://121.11.45.14:4090/ 来访问我们的网站了：

微调背景图片比例后尝试使用，一切正常，可喜可贺。

效果图如下：

此时如果使用域名访问会被拦截，因为还未完成备案（有点麻烦，不太想搞）

完结撒花！

部分参考文档：

https://blog.csdn.net/qq_37021104/article/details/103627608?spm=1001.2014.3001.5506

https://blog.csdn.net/bigbear00007/article/details/90718450?spm=1001.2014.3001.5506

原项目链接：

基于vue3的简单音乐播放器，本次使用的是分支update1.3：

https://github.com/zzysssigm/VueMusicPlayer_update2.0/tree/update1.3

微调打包后的文件放在分支package-1.3了：

https://github.com/zzysssigm/VueMusicPlayer_update2.0/tree/package-1.3

如果有帮到你的话，不妨给我点个star吧