搭建基于github issue的静态博客程序vgi

 首先，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