首先,fork此项目https://github.com/varHarrie/varharrie.github.io ,我fork 后的项目地址是
https://github.com/briteming/vgi ,然后访问https://github.com/briteming/vgi/issues/new,创建issue. 除了要输入标题及内容外,还要添加label(我添加的 label的值是blog)和milestone(我添加的milestone的值是posts),然后才提交issue.
然后,访问vercel.com/new (当然,你需先登录你的vercel账号),然后导入vgi项目:
在跳到的页面的environment variables处:
按如下的内容:
VITE_APP_TITLE=Blog of brite
VITE_TITLE=it's Blog of brite
VITE_EMAIL=briteming@gmail.com
VITE_GITHUB_URL=https://github.com/briteming/vgi
VITE_GITHUB_ACCESS_TOKEN_PART1=你的GITHUB_ACCESS_TOKEN的值被截断的第一部分
VITE_GITHUB_ACCESS_TOKEN_PART2=你的GITHUB_ACCESS_TOKEN的值被截断的第二部分
VITE_GITHUB_OWNER=briteming
VITE_GITHUB_REPO=vgi
VITE_GITHUB_MILESTONE_POSTS=1
VITE_GITHUB_MILESTONE_SNIPPETS=2
VITE_ARTICLE_PAGE_SIZE=5
VITE_COMMENT_PAGE_SIZE=30
在key 处和value处分别填好。然后点击deploy按钮,等待部署完成。部署完成后,我得到的网址是https://vgi-jg9v.vercel.app
还有一种办法:
克隆项目到本地机器,
git clone https://github.com/briteming/vgi
cd vgi
yarn
nano .env
cat .env
显示:
VITE_APP_TITLE=Blog of brite
VITE_TITLE=it's Blog of brite
VITE_EMAIL=briteming@gmail.com
VITE_GITHUB_URL=https://github.com/briteming/vgi
VITE_GITHUB_ACCESS_TOKEN_PART1=你的GITHUB_ACCESS_TOKEN的值被截断的第一部分
VITE_GITHUB_ACCESS_TOKEN_PART2=你的GITHUB_ACCESS_TOKEN的值被截断的第二部分
VITE_GITHUB_OWNER=briteming
VITE_GITHUB_REPO=vgi
VITE_GITHUB_MILESTONE_POSTS=1
VITE_GITHUB_MILESTONE_SNIPPETS=2
VITE_ARTICLE_PAGE_SIZE=5
VITE_COMMENT_PAGE_SIZE=30
然后运行:
yarn build
(此命令会在当前目录下,生成dist目录。dist目录就是静态网站的根目录)
cd dist
~/vgi/dist (v2) $ ls
assets/ index.html
~/vgi/dist (v2) $
你可以把 ~/vgi/dist目录的内容push到github pages或上传到netlify.com空间,得到的网址是
https://beautiful-genie-bec070.netlify.app/#/posts
演示网址:
https://vgi-jg9v.vercel.app/#/posts
https://beautiful-genie-bec070.netlify.app/#/posts
项目地址:
https://github.com/varHarrie/varharrie.github.io
https://github.com/briteming/vgi