手把手教你快速上手 GithubPage


theme: condensed-night-purple

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

github大家都用过吧,github pages大家都听过吧,但是可能没用过。在此之前我也没用过,若不是手上有个单页面的项目,我也想不到能用github pages在移动端展示。因此也就接触到了这个知识点。根据这段时间的总结,来分享一下我在github pages中的使用过程。

image.png

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让效果在手机上预览起来吧。

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容