[转载] 码云(Gitee)Pages配置

码云帮助中心/ 服务集成/ 静态页面托管/ 帮助详情

码云Pages

Pages

码云 Pages 是一个免费的静态网页托管服务,您可以使用 码云 Pages 托管博客、项目官网等静态网页。如果您使用过 Github Pages 那么您会很快上手使用码云的 Pages服务。目前码云 Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

Jekyll、Hugo、Hexo 编译判断依据

  1. 编译 Hugo 依据:仓库编译目录下存在config.toml|json|yaml文件和content目录的时候,会使用hugo生成静态文件。

  2. 编译 Hexo 依据:仓库编译目录下存在package.json,_config.yml文件和scaffolds目录的,会使用hexo generate生成静态文件,由于每次部署编译需要重新克隆编译并进行npm install,所以使用 Hexo 的时间相对 Hugo 和 Jekyll 会长一些。

  3. 当不符合上述1和2条件的时候,就默认使用Jekyll编译。

常见问题

  1. 如何创建一个首页访问地址不带二级目录的 pages,如ipvb.gitee.io?

    答:如果你想你的 pages 首页访问地址不带二级目录,如ipvb.gitee.io,你需要建立一个与自己个性地址同名的仓库,如 江二十三 (ipvb) - Gitee.com 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.gitee.io直接访问,那么他就可以创建一个名字为ipvb的仓库 ipvb: gitee pages 部署完成后,就可以以 https://ipvb.gitee.io 进行访问了。

  2. 当要部署的项目与自己的个性地址不一致时,部署完成后存在一些资源访问404?

    答:当需要部署的仓库和自己的个性地址不一致时,如:https://gitee.com/ipvb/blog ,生成的pages url 为 https://ipvb.gitee.io/blog ,而访问的资源404,如 https://ipvb.gitee.io/style.css 。这是因为相应配置文件的相对路径存在问题导致的,生成的资源 url 应该为 https://ipvb.gitee.io/blog/style.css 才对。对于不同的静态资源生成器,配置如下:

    • Hugo 配置文件config.toml的baseURL修改如下

      baseURL = "https://ipvb.gitee.io/blog"

    • Hexo 配置文件_config.yml的url和root修改如下:

      url: https://ipvb.gitee.io/blog

      root: /blog

    • Jekyll 配置文件_config.yml的 baseurl修改如下:

      baseurl: "/blog" # the subpath of your site, e.g. /blog

  3. Jekyll 中带有下划线开头文件夹或者文件无法访问,例如:_layouts

    答:需要在仓库根目录下新建_config.yml,编写:include: [_layouts] 即可。

  4. 如何自定义404?

    答:在仓库根目录新建 404.html 文件即可。

  5. 如何不触发使用 Jekyll 编译。

    答:在仓库根目录新建 .nojekyll 文件即可。

1. 使用前须知

1、仓库必须有 index.html 才可以正常访问

2、静态网页的样式可以自己写,也可以拿一些静态模版来修改,Pages服务本身不提供任何形式的模版,但我们后续会陆续增加例子,供大家参考使用。

2. 一个小白的Pages搭建之旅

A.新建仓库 test_pages

点击创建完成仓库的创建

B.添加文件 index.html (注意名称是index.html哦!)

点击新建文件

文件名输入index.html,内容就是简单的html

点击提交,将文件提交到仓库

C.选择 pages 服务

D.选择需要部署的分支,这里选择 Master 启动服务。

E.访问生成的网站地址,即可以查看你部署的静态页面啦!

3. 已经有 Pages 仓库如何部署到码云的 Pages

以jQuery-File-Upload仓库为例,仓库地址:GitHub - blueimp/jQuery-File-Upload: File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

它在Github上的Pages地址是:jQuery File Upload Demo

如果想把它转移到码云Pages,只需要登录你的码云账户,点击右上角的+号,选择新建仓库

然后点击创建,仓库会在后台自动导入,导入成功后,点击菜单栏的服务下拉Gitee Pages

这里我们默认的Pages服务分支是仓库的默认分支,但是你也已选择自己静态页面所在的分支,这里jQuery-File-Upload仓库的静态页面分支是gh-pages,选择gh-pages并点击启动服务。

至此,静态网页已经部署成功,访问提供的地址:https://frech.gitee.io/jquery-file-upload/ 即可查看到jQuery-File-Upload仓库的静态官网。

4. Pages 进阶,使用 Jekyll、Hugo、Hexo 生成自己的静态网页

Jekyll、Hugo、Hexo 究竟是什么?

Jekyll、Hugo、Hexo 是简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll、Hugo、Hexo 也可以运行在 码云(Gitee.com) Pages 上,也就是说,你可以使用码云的服务来搭建你的仓库页面、博客或者网站,而且是完全免费的。

Jekyll 使用文档:Redirecting…

Hugo 使用文档:Hugo Documentation | Hugo

Hexo 使用文档:Documentation | Hexo

以上内容对你是否有帮助?

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
引用中提到,构建Vue项目时,可以选择部署到Gitee Pages上。如果你的项目是静态项目,只需要在Gitee项目导航栏中点击"服务 -> Gitee Pages"即可部署。而如果你的项目是Vue项目,需要在项目路径中添加一个`.spa`文件,然后修改一些配置。具体步骤如下: 1. 在项目路径中添加`.spa`文件,具体原理不清楚,可能是给Nginx做一个标识作用。 2. 修改`build.js`文件,将其中的`console.log`全部注释掉。 3. 修改`config/index.js`文件,将`assetsPublicPath`的值改为`./`或者你的项目名称加上`/`(例如`'/ltz/'`),解决JS访问不到的问题。 4. 在`build/utils.js`文件中添加`publicPath: '../../'`,解决CSS/字体找不到的问题。 5. 运行`npm run build`命令,得到`dist`文件夹。 6. 将`dist`文件夹中的文件上传到你的Gitee仓库中。 7. 点击项目导航栏中的"服务 -> Gitee Pages",开始构建。选择你的分支,如果只有一个分支,就选`master`。选择部署目录,填入`dist`。 8. 如果在构建后,发现`css/js/img`等文件报了404异常,可以参考第5步的二或三进行解决。123 #### 引用[.reference_title] - *1* *3* [使用Gitee Pages服务 搭建Vue项目](https://blog.csdn.net/LitongZero/article/details/88207833)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [github pages gitee pages 配置教程、更新教程(亲测有效),gitee pages 访问界面为空白,样式和js文件404...](https://blog.csdn.net/mrliucx/article/details/125574957)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值