前言

今天在 GitHub 无意间发现了 @imsyy 大佬开源的一款 个人主页 ，整体界面非常好看，适合个人网站引导使用。下面就给大家演示一下怎么优雅地将这款个人主页程序部署到 GitHub 和 vercel 上，并套用 免费CDN 实现加速访问，追求零成本搭建网站。

演示站：https://jx-ll.cn

准备工作

  • 电脑能正常访问 GitHub ，如果不能访问请自行挂梯子或更改本地 hosts
  • 如果要使用国内 CDN 则需要准备一个已备案域名
  • 没了

下载源码

进入项目主页，点击右上角的Code按钮，再点击Download ZIP

下载好后将压缩包解压，解压出来的文件夹里面就是该项目的完整源码了

修改源码

可以看到，这个项目是一个 HTML 纯静态网页，网页内的大部分内容都可以直接在 index.html 文件里直接修改

由于引入字体的 cdn 开启了防盗链，所以我们要在 index.html 文件的 24行左右 将 href 修改为作者提供的链接

1
2
3
4
<!-- HarmonyOS Sans -->
<!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
<!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
<link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />

为了防止cdn失效，你还可以将该css文件下载到本地，将其引入

其中， old 文件夹是作者之前开发的 Snavigation ，也是一个起始页，有兴趣的可以看看。

自定义歌单

本项目采用了基于 MetingJS 的 Aplayer 音乐播放器，可实现快速自定义歌单
默认仅支持 中国大陆地区，其他区域请将 以下内容 替换 music.js 以实现音乐播放器的正常使用

如需自定义歌单，只需将 /js/music.js 文件的 12-14行 修改为你自己的信息即可

1
2
3
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID

网易云的歌单 id 一般在网页链接的 ?id 后面，其他平台大同小异

部署到 GitHub

进入到自己的 GitHub 后台，新建一个仓库

1
2
3
4
5
6
Repository name: 仓库名称
Description(可选): 仓库描述介绍,不是必填项
Public, Private : 仓库权限。public 公开共享，private 私有或指定合作者
Initialize this repository with a README: 添加一个README.md
gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore
license: 证书类型，对应生成文件LICENSE

创建好仓库后就要将刚刚修改好的源码上传到仓库，有两种方法

推荐使用 Git Bash，如果没有的话也可以手动上传

方法一、用 Git Bash 上传

下载并安装好 Git Bash

在本地新建个空文件夹，打开文件夹，在空白处单击右键，选择 Git Bash Here

返回刚刚创建好的 GitHub 项目地址，点击右上角的Code按钮，将 git 地址复制下来

切换到 Git Bash软件 ，将项目克隆到本地。命令为：git clone + 刚刚复制的 git 地址

如果弹出需要连接的提示框，点击 Sign in with your browser ，在浏览器中授权即可

等一会儿后就能看到文件夹里多了一个项目名称的文件夹

接下来将之前修改好的项目源码复制到这个项目文件夹中

返回到 Git Bash软件 ，输入 cd + 文件夹名称 ，切换目录

依次输入以下命令，将整个文件夹上传到 GitHub

1
2
3
git init
git add .
git commit -m “你的提交信息”

这时可能会要求你输入以下内容来确认你的身份

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

接着再输入git pull，就可以开始上传了

上传结束后，返回到你的项目主页，可以看到文件已成功上传

这时就可以进行访问了，地址是：https://username.github.io/repositories （username是你的用户名，repositories是你的项目名）

例如我的就是：https://jonxinxin.github.io/myhome （已删除）

方法二、手动上传

如果电脑没有 Git Bash ，而且不想下载的话，也可以直接手动进行上传

进入 GitHub 项目主页，点击右上角的 Add file -> Upload files 进入到上传页面

直接将整个项目文件夹拖到上传框内，即可自动上传项目内的文件夹及文件

如果点击 choose your files 就只能上传单个文件，不方便

全部上传完毕后点击 Commit changes 提交即可

部署到Vercel

进入 Vercel 的 控制台 ，点击右上角的 New Project 来新建一个项目

这里我已经将 Vercel 与 Github 绑定了，如果没有绑定的可按照说明绑定

绑定好后这里会出现绑定的 GitHub 下的所有项目，点击 Import 可以直接导入到 Vercel

这里直接点击 Deploy 部署即可

过一会儿就会出现满屏的彩带，部署成功

点击 Go to Dashboard 进入控制台，可以看到 Vercel 默认给我们分配了一个域名

访问该域名就能看到我们部署好的项目

但是这段时间 Vercel 在国内的访问速度非常拉跨，如果不套用 cdn 的话往往需要加载很久

使用DogeCloud免费加速网站

DogeCloud 为用户免费提供了每月 20GB 的 CDN 流量包，对于普通用户来说，完全足够

但想使用国内 CDN 有一个缺点就是加速域名必须是已备案的

如果域名未备案也可套用 cloudflare 的 cdn ，但速度就没那么理想

首先 注册 一个 DogeCloud 账号，并完成实名验证

然后在 域名管理 中添加一个已备案的域名

其中， 源站域名 为刚刚 Vercel 分配的域名，回源 HOST 可以不填

添加好域名后到将域名解析到 DogeCloud ，记录值为 DogeCloud 提供的 CNAME 域名

接着到 Vercel ，点击 View Domains 绑定刚刚添加的加速域名，等待生效即可