h5响应式的网站客源引流推广app
一、事情的缘起
今天一个朋友向我推荐了小红书上的一个视频，我看了一下这是一个在演示TypeWords项目的视频。这个项目是Github上采用vue来编写的一个开源项目。我进入该项目后看到了给出的样例网址2study.top，然后到上面看了一下。我发现这是一个通过打字来练习记单词的网站。页面配的有发音、可以记录打错的单词、还可以收藏单词，通过反复练习错误的单词，直到你全部掌握它的拼写。这里面的词库是开放性的，可以自由上传，也可以选用其中的四级词汇、六级词汇、编程词汇等。软件的界面如下：
软件界面
看到这个网站，感叹作者的设计十分巧妙，就想自己也架设一下。这里要说明的是本人对vue语言一窍不通，更是对node.js，npm了解甚少，唯一知道的是可以通过1panel，利用反向代理架设一个网站。之前我也写过如何用利用1panel架设一个静态的网站：
编辑如何安装1panel并架设一个静态网站4 赞同 · 0 评论文章
今天我就想利用这个机会，借助DeepSeek和Github上的安装指引，来架设一个开源项目。
二、操作过程
1. 准备一台服务器。
首先，我们得有一个Linux服务器，并拿到这经的一个ssh权限，通过FinalShell我们登录到这个服务器上，如下图所示：
SSH登陆服务器
2. 安装Git工具
为了把远程的项目克隆到本地，我们需要安装一个git工具。首先我们要更新一下：
apt update
apt install git如果实在不会，就可以问一下DeepSeek。
3. 克隆项目到本地
首先，在FinalShell里，我们进入到root的根目录，其实进入服务器后默认就是根目录，然后新建一个目录TypeWords，接下来用下面命令切换到这个目录。
cd TypeWords然后就用git工具克隆
git clone https://github.com/zyronon/TypeWords等一会儿就可以看到TypeWords目录里就已经下载好了程序，如下图所示：
克隆安装文件
4. 安装Node.js 和 npm（运行项目依赖）
为了在服务器上运行此项目，我们还需要安装Node.js和npm，同时为了让服务器后台持续运行这个项目，我们还要安装进程管理工具pm2。以上安装可以在root根目录下进行，安装方法如下：
apt install -y git nodejs npm
npm install -g pm2 # 全局安装 PM25. 安装项目
首先进入到TypeWords这个目录，安装网站
npm install6. 启动项目
安装完项目，为了让它能在后台持续运行，我们可以用pm2这个进程管理工具：
PM2 会监控进程，崩溃时自动重启，并记录日志。使用pm2的代码是
pm2 start npm --name "你的项目名称" -- start这里我们在根目录，运行以下代码：
pm2 start npm --name TypeWords --start接下来，我们用pm2 list来查询进程，可以看到status是online，占用内存是80.7mb。
pm2管理进程
如果想验证是否成功，可以用以下代码：
pm2 logs更多pm2的命令可以见下面列表。
pm2 logs # 查看实时日志
pm2 list # 查看运行中的进程
pm2 save # 保存当前进程列表（重启后自动恢复）
pm2 startup # 设置 PM2 开机自启（需 root 权限）7. 绑定网站
现在，我们可以通过ip:3000这样访问项目，但是这样的网址不容易记，我们需要把它绑定到一个域名上。
于是，我们进入另一台服务器上的1panel中，找到网站——反向代理，建立一个反向代理网站，代理地址就填写我们刚才用到的服务器的ip:3000，域名你可以用自己的域名，并把这个域名解析到1panel所在的服务器IP上。
申请反向代理
然后，我们还要去【网站】同级菜单点【证书】，为域名申请一个免费的证书，这个过程中如果没有Acme帐户，可以免费申请一个。我们在域名的配置当中，添加这个证书。
申请证书
接下来，我们在网站设置里启用HTTPS，选择已有证书，最后一路确定就配置成功了。
添加证书
最后，通过打开网站，可以看到这个项目已经成功运行了。
项目成功运行
三、学后总结
1. 这个项目功能强大，交互性强，但是界面不是特别漂亮，也没有用户管理，换个电脑又得从头再来，所以后期可以优化界面的色彩搭配，添加用记管理系统，记录学生的学习进度，甚至还以加入vip会员系统。
2. 项目在网页端运行没有问题，但是在手机端运行出现界面混乱的情况，后期还需要进一步优化。