theme: condensed-night-purple
本文正在参加「金石计划 . 瓜分6万现金大奖」
前言
github
大家都用过吧,github pages
大家都听过吧,但是可能没用过。在此之前我也没用过,若不是手上有个单页面的项目,我也想不到能用github pages
在移动端展示。因此也就接触到了这个知识点。根据这段时间的总结,来分享一下我在github pages
中的使用过程。
GitHub Pages 基本配置
先来介绍一下GitHub Pages吧,GitHub Pages是一种由GitHub
中的仓库/项目直接创建的网页,并且是免费的。它管理简单,可以在本地编辑仓库中的内容,并上传到GitHub
上进行管理。
首先我们得会一些基本的git
相关操作,比如基本的git
命令(包括提交命令,后面会使用到)。如果是第一次使用git
,就需要先配置SSH公钥。
完成这些之后,我们就开始在Github
上新建仓库(新建仓库的流程就不用多介绍了,想具体了解的话看看我前面有关git
的文章)。然后我们需要把仓库设置为public
,即所有人可见。仓库名称可以填写为你的用户名.github.io,系统将自动变更为Pages。
最后我们在仓库设置中找到Pages即可。
执行完成后,所有人就能通过你的用户名+github.io这个域名访问我们的静态网站了。
Github Pages 打包上传
那么如果我们手上已经有一个现成的项目,并且想将其用github pages
来预览效果,该如何去做呢?这里总结了以下几点,我们只需要按照如下步骤操作即可。
首先在指定项目下进行git
初始化。
cd 到指定项目下
git init
然后进行提交代码步骤,并将其关联到远程仓库,并进行push
操作。
git add .
git commit -m "xxx"
git branch -M main
git remote add origin https://github.com/xxx/xxx.git
git push -u origin main
安装gh-pages包。
npm i gh-pages -D
然后最关键的步骤来了,在package.json
加入如下配置。
package.json 中添加配置
"scripts": {
"deploy": "gh-pages -d dist"
}
vite.config.js 中添加 base: './'
最后就可以将其打包发布了。
npm run build
npm run deploy
这样就算完成整个的打包和发布了。
总结
以上就是关于github pages
的大致使用流程了,以及一些使用过程中相关的配置,掌握这些基本就够使用了。整体而言并不是很难,如果大家手上有合适的项目,快去配置github pages
让效果在手机上预览起来吧。
暂无评论内容