搞了个简单的个人展示页

两天 七嘴八舌评论2K1阅读模式

搞了个简单的个人展示页-图片1
搞了个简单的个人展示页-图片2

先来个主页链接:http://tian.cm/


其实很久之前就在github发现了这个主页源码,但是一直没有搞懂怎么用。
一直以来我都是直接把源码上传到主机就可以了(为自己找借口),然而这次并没有奏效,打开页面就是空白。瞎折腾了几次还是没啥效果。想找作者问问,奈何QQ加了几次也没加上。
今天无事,有仔细看了看说明。

部署

  • 安装 node.js 环境

    node > 16.16.0
    npm > 8.15.0

  • 然后以 管理员权限 运行 cmd 终端,并 cd 到 项目根目录

  • 在 终端 中输入:

# 安装 pnpm
npm install -g pnpm

# 安装依赖
pnpm install

# 预览
pnpm dev

# 构建
pnpm build

构建完成后,静态资源会在 dist 目录 中生成,可将 dist 文件夹下的文件上传至服务器,也可使用 Vercel 等托管平台一键导入并自动部署

上面的内容其实也一直都注意到,但是想着以前用github的源码都是直接上传使用的,就没理解他的意思。今天决定按说明在弄一次。
首先就是安了

node.js

,之前一直以为是在主机上安装的,这次是在电脑上安了,然后就出现奇迹了。
搞了个简单的个人展示页-图片3
搞了个简单的个人展示页-图片4
搞了个简单的个人展示页-图片5
经过安装Node.js 安装pnpm 构建一下,反正最后是成功了 。🙃

功能

  •  载入动画
  •  站点简介
  •  Hitokoto 一言
  •  日期及时间
  •  实时天气
  •  时光进度条
  •  音乐播放器
  •  移动端适配

也是大喜过望,最后终于成功,也搞明白了怎么去弄这个主页了,剩下的就慢慢的修改下,替换成自己的内容就OK了。

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有。若您需要使用非免费的软件或服务,请购买正版授权并合法使用。本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理。

我的微信
微信扫一扫
weinxin
我的微信
我的QQ
QQ扫一扫
weinxin
312379857
 
两天
  • 本文由 两天 发表于 2023年11月18日 12:45:31
  • 转载请务必保留本文链接:https://2days.org/84797.html
  • 个人主页
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定