巧用gh-pages分支发布自己的静态项目

简介: 大家都知道可以通过github pages 发布自己的静态博客,然后通过 username.github.io 可以访问。例如我的博客可以通过 nqmysb.github.io 访问,不过我的已经绑定域名 https://liaocan.top ,所以会直接跳转到域名显示。

大家都知道可以通过github pages 发布自己的静态博客,然后通过 username.github.io 可以访问。例如我的博客可以通过 nqmysb.github.io 访问,不过我的已经绑定域名 https://liaocan.top ,所以会直接跳转到域名显示。
但是我们通常有很多其他的静态项目需要展示,所以今天我总结一下如何利用gh-pages分支来发布自己的静态项目,然后可以通过域名外网访问。

准备一个github项目

首先准备一个github项目,创建git项目,然后将本地项目上传的git项目的master主干上,此处步骤略过。
我的项目是一个react前端项目,基于create-react-app创建的脚手架的一个文库网站首页,目前项目没有完成,只是搭建了一个架子,写了一个首页布局。项目传送门
现在我们来把它发布到gh-pages分支,通过外网访问。

项目打包

1.拷贝项目到本地

git  clone --progress -v "git@github.com:nqmysb/shared-library-ui.git" 

2.安装依赖包

npm install  或者   yarn install

3.打包项目

npm run build 或者 yarn run build 

打包之后,项目根目录下会出现一个build的文件夹,这个是打包之后的静态文件,也就是我们需要发布到gh-pages分支上的东西。

发布项目到gh-pages 分支

1.进入build文件夹下

cd build

2.git初始化

git init

3.创建gh-pages分支

git checkout --orphan gh-pages

4.添加文件到暂存区

git add .

5.添加信息

git commit -m "init project"

6.设置远程仓库地址

git remote add origin git@github.com:nqmysb/shared-library-ui.git

7.推送项目到 gh-pages分支

git push origin gh-pages

此时你的github该项目会多一个gh-pages分支,点击切换分支可以看到刚刚上传的项目文件。此时我们就可以通过 http://nqmysb.github.io/shared-library-ui 来访问你发布的静态项目了。同样此处我的nqmysb.github.io 绑定了域名,所以访问时会跳转到 https://liaocan.top/shared-library-ui/

两个问题

1.通过create-reat-app创建的项目打包之后,访问项目index.html页面会空白或者报错,无法访问。这里主要是打包的时候css,js引入的路径问题。

create-reat-app官方给的解答是再package.json种添加homepage属性,如下再private后面添加。

"private": true,
"homepage": "."

我这里需要发布到https://liaocan.top/shared-library-ui/ 上面去 ,所以我们这里是:

  "private": true,
  "homepage" : "https://liaocan.top/shared-library-ui",

2.react项目打包部署之后刷新页面报404错误
这里有两种解决方案
第一种:如果你是通过nginx部署静态项目,可以在nignx配置 try_files 如下:

location / {            
root   /usr/share/nginx/html;            
index  index.html index.htm;            
try_files $uri /index.html;        
} 

第二种将react项目种的路由修改为 HashHistory

import { createBrowserHistory,createHashHistory } from 'history'

// export const history = createBrowserHistory()

export const history = createHashHistory()
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
4月前
|
前端开发 JavaScript
保姆级教程:从零构建GitHub Pages静态网站(上)
保姆级教程:从零构建GitHub Pages静态网站
949 0
|
4月前
|
JavaScript 开发工具 git
保姆级教程:从零构建GitHub Pages静态网站(下)
保姆级教程:从零构建GitHub Pages静态网站(下)
124 0
|
8月前
github pages 用法详解 发布自己的网站
github pages 用法详解 发布自己的网站
205 0
|
Java 持续交付 开发工具
我明白了,github中的actions与pages
github的actions是一个持续集成的工具,类似java的jekins,actions中需要编写流水线脚本,脚本并不难,只是环境的熟悉。github pages 是一个静态网站服务,只要你按照特定规则在指定的仓库或者分支上存放html代码,就可以通过特定规则的url去访问到该静态页面网站,很方便。
233 0
我明白了,github中的actions与pages
github:代码修改合并工作流程笔记
github:代码修改合并工作流程笔记
85 0
|
存储 数据安全/隐私保护
CE修改器入门:代码替换功能
某些游戏重新开始时,数据会存储在与上次不同的地方, 甚至游戏的过程中数据的存储位置也会变动。在这种情况下,你还是可以简单几步搞定它。这次我将尽量阐述如何运用"代码替换"功能,第五关的数值每次启动教程的时候都会存放在内存不同的位置,所以地址列表中的固定地址是不起作用的。
326 0
CE修改器入门:代码替换功能
|
存储 C语言 数据安全/隐私保护
CE修改器入门:查找共享代码
本关我们将学习共享代码,在C语言中角色属性都是以结构体的方式进行存储的,而结构体所存储的信息都是连续性的,这一关我们将会解释如何处理游戏中的共用代码,这种代码是通用在除了自己以外的其他同类型对像上的 常常你在修改游戏的时候, 你找到了一个单位的健康值 或是你自己角色的生命值, 你会发现一种情况: 如果你把生命值相关代码移除的话,其结果是你的角色无敌, 但你的敌人也无敌了,这就是共享代码搞的鬼。
354 0
CE修改器入门:查找共享代码
|
前端开发
前端工作总结208-page值不能修改
前端工作总结208-page值不能修改
52 0
前端工作总结208-page值不能修改
|
Linux Shell 开发工具
使用 diff 和 patch 命令协同开发
使用 diff 和 patch 命令协同开发
155 0
使用 diff 和 patch 命令协同开发
|
开发工具 git
动手开始创建第一个 Angular 应用并通过 gh-pages 发布到 Github 上
动手开始创建第一个 Angular 应用并通过 gh-pages 发布到 Github 上
动手开始创建第一个 Angular 应用并通过 gh-pages 发布到 Github 上

热门文章

最新文章