Github中如何给项目创建GitHub Pages官方网页

2023-11-02

实现效果图:

在这里插入图片描述

我的项目是:
https://github.com/shunyue1320/uab-ui
我需要给项目创建一个官方文档的网页如:
https://shunyue1320.github.io/uab-ui

看着Github大项目都有一个高大上的官方文档,而这是怎么实现的呢? 其实很简单,接下来我们就来自己动手实现一下吧!

1. 项目根目录创建一个docs文件

docs文件其实就是存放你的项目官方文档所描述的信息。

我们这里拿VuePress为例,VuePress的目的其实就是给项目更简单的写一个官方文档。

通过学习VuePress的使用, 我成功为我的项目用VuePress写了一个官方文档, 这就是用VuePress完成一个官方文档的代码了,包括它上线后展示的网页!感兴趣可以好好研究一下。

2. 打包文档项目上传到项目分支

文档写好了那怎么上线呢?并且是以 “https://用户名.github.io/文件名” 这种形式展现出来!

下面硬核知识来了…
我们可以打开VuePress官方文档来看看项目文档是怎么部署在Github的吧!由官网信息了解,我们需要在项目的根目录下创建一个deploy.sh文件,并且在Git Bash Here命令行下通过输入命令bash deploy.sh 运行这个文件即可,详细内容如下

deploy.sh文件如下

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 方案一:
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 方案二: (我们使用方案二)
# 如果发布到 https://<USERNAME>.github.io/<REPO> (意思就是将打包好的docs文档发布到你的github的某个项目的gh-pages分支上)
git push -f git@github.com:shunyue1320/uab-ui.git master:gh-pages

cd -

好了我们成功创建了deploy.sh文件并且运行了,这是问题出现了, 我们运行时报错了:
error: git ssh Permission denied (publickey)
这是说明情况说中国话:当 shell 通过 ssh 方式向 github 仓库推送代码的时候,没有权限(publickey)
原因是:
GitHub 是一个公共的代码管理平台,只要是公共的管理平台,就肯定会有安全问题,针对这些安全问题,平台开发者肯定会实施一些措施进行规避,
比如浏览器实现了同源策略。需要公钥、私钥的配合我们才能将代码push到自己的项目中,避免被他人误操作的情况。

原因了解到了,接下来我们来配置github的公钥与本地的私钥吧!

  1. 命令行运行ssh-keygen命令生成 ssh 密钥文件 文件地址:C:\Users\你的用户名\.ssh
    生成 ssh 密钥时,会提示你输入文件的 keypassphrase,建议这里一直按回车即可
  2. 将文件地址通过命令生成的 SSH 密钥文件id_rsa.pub里面的内容复制到GitHub SSH key,然后设置 title ,最后点击 Add SSH key保存SSH 密钥值即可。
    GitHub SSH key: https://github.com/settings/keys
    在这里插入图片描述
    在这里插入图片描述
    下面我们再次尝试在Git Bash Here命令行下通过输入命令bash deploy.sh 运行这个文件,GitHub项目内成功出现了一个名为gh-pages分支 如下:
    https://github.com/shunyue1320/uab-ui/tree/gh-pages
    接下来最后一步,通过GitHub部署项目文档到网址: “https://用户名.github.io/文件名”

3.上线部署项目文档

进入GitHub 进入该项目的settings 设置github pages 需要展示的文档Branch为gh-pages分支, 入口文件选中root, 最后save保存即可, 项目成功上线!!!
在这里插入图片描述
在这里插入图片描述
我的这个项目是教会您手写一个vue简化版的UI库, 让您学习到 elementAnt Design 这些超级大厂UI库的实现原理是什么,如果需要借鉴参考,欢迎star, 点个喜欢,以免下次你能快速找到我的项目!非常感谢您能看到这里!!!
https://shunyue1320.github.io/uab-ui
在这里插入图片描述
你们的喜欢是我创作的最大动力,感谢有你!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Github中如何给项目创建GitHub Pages官方网页 的相关文章

  • 无法通过 HTTPS 克隆私有 Github 存储库

    我在通过 HTTPS 克隆私有 GitHub 存储库时遇到问题 如果我尝试使用以下方式克隆我的存储库 git clone https github com username repository 我收到错误 fatal remote err
  • 收到别人的pull-request,如何编辑然后直接在github上合并?

    作为参考 这里是一个命令行git解决方案如何处理审查拉取请求 修改代码和合并 https stackoverflow com questions 27355333 how to handle review a pull request mo
  • 在 github 上查找强制推送的提交者

    在我们的项目 托管在 GitHub 上 中 每隔一段时间就会有人意外强制推送 master 没有人知道是否这样做 我想找出是谁干的 以及背后有什么样的错误配置的工具或坏习惯 那么问题来了 如何识别进行强制推送的用户呢 当我拉动时 我看到这样
  • Jupyter (iPython) 笔记本中的 Latex 宏未由 github 渲染

    我的 Jupyter 笔记本 ipynb 中有一个 Markdown 单元 其中包含以下内容 newcommand paren 1 left 1 right paren beta 2 该文件位于 Github 存储库中 LaTex 宏应用程
  • 将新更新从原始 GitHub 存储库提取到分叉的 GitHub 存储库

    我在 GitHub 上分叉了某人的存储库 并希望使用原始存储库中的提交和更新来更新我的版本 这些是在我分叉我的副本后制作的 如何提取在源中所做的更改并将它们合并到我的存储库中 您必须将原始存储库 您分叉的存储库 添加为远程存储库 来自有关分
  • 如何共享/扩展/重用/引用 GitHub Workflow?

    我有两个工作流程 一种方式是通过推送到 master 来部署到测试环境 另一个在发布到生产环境时部署 它们90 相同 代码复制粘贴 是否有一个概念 例如提取部分重复逻辑并将其放入自己的文件 部分 片段中 GitHub Actions 中的重
  • 当前本地调试 Travis 构建的工作流程是什么?

    One 曾经能够 https stackoverflow com questions 16677232 where can i download the 64 bit travis ci vm images to 下载流浪盒 http re
  • 如何在environment.yml中安装CRAN包

    我正在使用 miniconda 来管理数据科学包的安装 这是我现在已经建立的工作流程 所以我希望它也能在这种情况下工作 我也认为它可以工作 因为它应该在这样的情况下有所帮助 比纯 python 需要更多的依赖项 我想安装pythonCDT工
  • 我可以为 GitHub Pages 创建多个存储库吗?

    我创建了一个用于在 GitHub 上托管博客的存储库 有什么方法可以创建额外的存储库来托管多个博客 或者我仅限于一个存储库 因为用户名 github io只能使用一次吗 您可以将一个站点发布到https
  • 无法在cordova项目中安装插件

    我面临一个大问题 Unable to install the phonegap plugins在我的科尔多瓦项目中 实际上昨天它仍然工作正常 现在 每当我尝试在我的 cordova 项目中使用 CLI 添加任何 cordova 插件时 我收
  • 配置 github 以使用其他文件作为 README

    由于 Eclipse 和 EGit 组织文件和目录的方式不同 我的 README md 文件并不位于 git 存储库的根目录中 而是位于更深的一个文件夹中 我怎样才能告诉github显示some folder README md作为项目的自
  • 如何重命名 GitHub 网站上的目录/文件夹?

    我在 GitHub 网站上找到了一种方法rename https github com blog 1436 moving and renaming files on github一个文件并成功完成 我也找到了一种方法rename https
  • 有没有办法缓存 https 凭据以推送提交?

    我最近转而将我的存储库同步到 GitHub 上的 https 由于防火墙问题 并且每次都要求输入密码 有没有办法缓存凭据 而不是每次都进行身份验证git push 自 Git 1 7 9 2012 年发布 以来 Git 中有一个巧妙的机制可
  • Composer 用于下载私有 GitHub 存储库

    我无法使用 Composer 下载 github 私人存储库 php composer phar update 我收到以下错误 The https api github com repos company private1 https ap
  • Jenkins 和 Github 不使用 SSH 密钥

    我已将 Jenkins 设置为从 Github 上的私有存储库中提取特定作业 尽管我已经生成了私钥 公钥并将其作为部署密钥添加到 github 但 Jenkins 似乎并未使用 SSH 密钥 当我从 Jenkins 用户进行 git clo
  • 从 GitHub 上托管的 Spring Cloud Config Server 访问存储库的身份验证问题

    我在 GitHub 上的存储库中托管配置 如果我将回购公开 一切都好 但如果我将其设为私有 我将面临 org eclipse jgit errors TransportException https github com my user m
  • 如何删除 GitHub markdown 项目符号/列表上的额外行空间?

    GitHub 的 Markdown 代码 1 First item subitem 1 Second item 之间产生很大的空间First Second和subitem 如何制作subitem靠近第一个项目 而不是正好在它们的中间 这是我
  • github - 启用分支锁

    作为 GitHub 管理员 我想为所有用户锁定 GitHub 中的特定分支 例如如果我不希望任何人推送到主 生产或项目分支 我该怎么做 有没有办法直接锁定 GitHub 服务器上的分支 而不是使用任何客户端挂钩 是否有任何第三方工具 API
  • 如何使用 GitHub GraphQL API 查看问题已在项目的列之间转移?

    我想确定卡片何时从一列移动到另一列GitHub 项目板 https help github com articles about project boards 使用 GitHub GraphQL API 我可以在项目板中列出所有问题 例如
  • 部分共享git仓库

    我是 git 新手 我想知道是否支持以下场景 如果支持的话如何支持 即用于设置和更新的 git 命令 可以从三个不同的地方获取存储库 本地 镜像 和 github mirror 完全镜像 local github 镜像 local 但 受版

随机推荐

  • Spring框架远程命令执行复现(CVE-2022-22965)

    2022年3月30日 Spring框架曝出RCE 0day漏洞 国家信息安全漏洞共享平台 CNVD 已收录了Spring框架远程命令执行漏洞 CNVD 2022 23942 考虑到Spring框架的广泛应用 漏洞被评级为危险 通过该漏洞可写
  • 压测工具:jmeter

    衡量当前系统应对高并发的量 压测工具不能少 1 下载jmeter 进入官网 2 使用jmeter 进入bin目录 或者双击 2 1 添加测试计划 线程组的基本属性 2 2取样器 取样器是我们真正进行测试的内容 比如http ftp jdbc
  • 【项目经验】elementui--table表格自定义表头及bug

    一 思路 首先我们肯定得循环表头 我们原生js封装的表格的实现原理就是这样 其次我们要把自己循环的label显示出来 对应的prop也要和表格数据相对应 用div标签循环都会出现错误 div里面套column 大家不要踩坑 第一项会跑到最后
  • 23个可以免费学习编程的网站

    英文 https medium com javascript in plain english 22 ways to learn coding for free in 2021 87a9c171132c 翻译 web前端开发公众号 ID w
  • Vue2.0选中当前鼠标移入移除加样式

    本人写的小程序 功能还在完善中 欢迎扫一扫提出宝贵意见 效果如gif动态图所示 1 通过v for遍历数组 HTML代码 1
  • 基于亚博K210开发板——串口中断以及开启双核任务

    文章目录 开发板 实验目的 实验准备 硬件原理图 软件对应SDK 对应的头文件 uart h uart h接口函数 高速通用异步收发传输器 UARTHS 对应的头文件 uarths h uarths h接口函数 板级对应的头文件 bsp h
  • C++之xlsx文件操作之写操作

    采用xlsxwriter开源库的实现 声明如下 include xlsxwriter include xmlwriter h include xlsxwriter include workbook h include xlsxwriter
  • 微信小程序 返回上一页面时实现上一页面刷新

    假如从页面B返回页面A时实现页面A刷新 页面B var pages getCurrentPages 当前页面栈 if pages length gt 1 var beforePage pages pages length 2 获取上一个页面
  • vite+electron构建桌面版应用教程超简单

    目录 概述 快速开始 目录结构 Electron Vite Vue 整合模板 结构简单 容易上手 概述 开箱即用 支持 C C 模块 支持在渲染进程中使用 Electron Node js API 结构清晰 可塑性强 很容易实现多窗口 快速
  • Java assert断言

    格式 assert 返回boolean的语句 方法 如果boolean为true 程序继续执行 否则抛出AssertionError 继承于Error而非Exception 表达系统级运行错误 终止程序 因此assert可以定位bug as
  • MySql学习笔记——负载均衡(二十三)

    load balance 当存在多台服务器提供一个任务时 需要从其中选择一台用来完成当前任务 选择的算法就是负载均衡 在mysql中往往会采用一写多读架构 因为一般读操作往往多余写操作 还有就是写操作的同步是个问题 一写多读中 读服务器需要
  • CP343-1 扩展ProfibusCPU 314C-2DP

    1 MPI编程电缆连接PLC 设置接口为PC Adapter MPI 1 如下图所示 2 硬件组态插入组态 建立ethernet 网络 编译后下载 3 CP343 1安装上后 CPU run不起来 组态更新后即可 转载于 https www
  • [OVD]Open-Vocabulary Object Detection Using Captions(CVPR. 2021 oral)

    1 Motivation Despite the remarkable accuracy of deep neural networks in object detection they are costly to train and sc
  • Llama2-Chinese项目:1-项目介绍和模型推理

    Atom 7B与Llama2间的关系 Atom 7B是基于Llama2进行中文预训练的开源大模型 为什么叫原子呢 因为原子生万物 Llama中文社区希望原子大模型未来可以成为构建AI世界的基础单位 目前社区发布了6个模型 如下所示 Flag
  • JS声明对象key为变量

    JS声明对象key为变量 给对象的键加方括号即可 如下 const roomName room roomName const roomDetail roomName roomDescription
  • 伪类和伪元素的区别是什么?

    一 两者的定义 1 伪类 pseudo class 是一个以冒号作为前缀 被添加到一个选择器末尾的关键字 当你希望样式在特定状态才被呈现到指定的元素时 你可以往元素的选择器后面加上对应的伪类 2 伪元素用于创建一些不在文档树中的元素 并为其
  • 【洛谷 P1093】[NOIP2007 普及组] 奖学金 题解(结构体排序)

    NOIP2007 普及组 奖学金 题目描述 某小学最近得到了一笔赞助 打算拿出其中一部分为学习成绩优秀的前 5 5 5 名学生发奖学金 期末 每个学生都有 3 3 3 门课的成绩 语文 数学 英语 先按总分从高到低排序 如果两个同学总分相同
  • 数组转换字符串

    一 数组转字符串 3种方法 toString toLocaleString join join JS 允许数组与字符串之间相互转换 其中 Array 方法对象定义了 3 个方法 如下 数组方法 说明 toString 将数组转换成一个字符串
  • Android 检测 手机硬件状态 的Utils

    package com cy tools import android annotation SuppressLint import android app Activity import android bluetooth Bluetoo
  • Github中如何给项目创建GitHub Pages官方网页

    实现效果图 我的项目是 https github com shunyue1320 uab ui 我需要给项目创建一个官方文档的网页如 https shunyue1320 github io uab ui 看着Github大项目都有一个高大上