手把手教你快速上手 GithubPage

前言

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 小试牛刀

好记性不如烂笔头，所以我们来个例子练手吧，这样有助于理解。首先我创建了一个react项目，简单实现一个轮播图的效果。这里附上swiper的关键部分代码，关于swiper的使用，后续会有介绍，

import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Autoplay, Pagination } from "swiper";
import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";
SwiperCore.use([Autoplay, Pagination]);
const CardSwiper = () => {
  const cradList = [
    ...图片资源
  ];
  return (
    <div className="container">
      <div className="title">轮播图</div>
      <Swiper
        className="swiper_container"
        slidesPerView="auto"
        centeredSlides={true}
        loop={true}
        autoplay={true}
        pagination={{ clickable: false }}
      >
        {cradList.map((item) => {
          return (
            <div key={item.id}>
              <SwiperSlide className="card" key={item.id}>
                <img src={item.card} />
              </SwiperSlide>
            </div>
          );
        })}
      </Swiper>
    </div>
  );
};
export default CardSwiper;

接下来就是引入这个文件了，css样式大家可以自由发挥。

然后分别在vite.config.js和package.json文件夹中加入上述的配置代码。

vite.config.js

export default defineConfig({
  base: "./",
  plugins: [react()],
});

package.json

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },

最终效果如下（未放上动态图，实际是可以自动轮播的）：

因为配置了Github Pages，所以此效果也可在手机上预览。

总结

以上就是关于github pages的大致使用流程了，以及一些使用过程中相关的配置，掌握这些基本就够使用了。整体而言并不是很难，如果大家手上有合适的项目，快去配置github pages让效果在手机上预览起来吧。