前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >如何将 Jekyll 部署到云开发静态网站托管

如何将 Jekyll 部署到云开发静态网站托管

原创
作者头像
腾讯云开发TCB
修改于 2020-04-13 08:49:50
修改于 2020-04-13 08:49:50
3.8K00
代码可运行
举报
运行总次数:0
代码可运行

云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持

使用Jekyll搭建静态站点

Jekyll 介绍

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。

iMac搭建Jekyll本地环境

上面的翻译站点已经提供了详细的搭建介绍,通过「快速搭建指南:http://jekyllcn.com/docs/quickstart/ 」可以快速基于Jekyll完成站点搭建。本文将基于个人博客 https://blog.bihe0832.com/ 的迁移来讲下iMac搭建Jekyll本地环境及迁移。

安装Jekyll等插件可以参考官网提供的「安装文档 http://jekyllcn.com/docs/installation/」来安装。由于系统默认Ruby安装过程中容易出现各种问题,因此建议自定义安装新的Ruby。关于卸载及重装 Ruby 和 Jekyll的详细内容,也可以参考文章iMac搭建Jekyll本地环境。以下为简单的安装事例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  ➜  blog git:(master) ✗ gem install jekyll
  Fetching mercenary-0.3.6.gem  
          
    ……
    25 gems installed
  ➜  blog git:(master) ✗ gem install github-pages
  Fetching addressable-2.5.2.gem
          
    ……
    62 gems installed
  ➜  blog git:(master)

创建静态站点

这部分内容可以参考官网提供的「快速指南 http://jekyllcn.com/docs/quickstart/」来创建一个简单的站点并根据配置自定义你的站点风格。我选择直接从Github下载我的博客相关的内容(对应地址为:https://github.com/bihe0832/bihe0832.github.io

对于基于Jekyll的静态站点的目录结构,可以参考官网提供的「目录结构http://jekyllcn.com/docs/structure/」,下面为个人博客目录结构的简单介绍:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.
├── 404.html  :404页面
├── CNAME  :Github Pages的域名配置
├── LICENSE  :开源协议
├── _config.yml  :博客相关的配置信息
├── _includes  :部分重用子页面
├── _layouts  :页面布局
├── _posts  :文章内容
├── _site :Jekyll 生成静态页面目录
├── index.html  : 博客首页页面格式
├── pages  :一些特殊的静态页面
├── public    : 博客相关的资源,包括css、js、以及所有图片
├── search  : 博客搜索功能相关代码
├── sitemap.txt  :站点地图
└── sitemap.xml  :站点地图
编译构建

当文章写完以后,你可以先通过本地 build 验证构建没有问题。在项目根目录直接命令行运行 jekyll build 即可查看构建结果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
➜  blog git:(master) ✗ jekyll build
Configuration file: /github/blog/_config.yml
            Source: /github/blog
       Destination: /github/blog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 5.437 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
➜  blog git:(master)

如果构建没有报错,你就可以选择将构建结果 _site 部署到你的服务器。如果想在本地查看效果,在项目根目录直接命令行运行 jekyll server 即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
➜  blog git:(master) ✗ jekyll server
Configuration file: /github/blog/_config.yml
            Source: /github/blog
       Destination:/github/blog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 4.1 seconds.
 Auto-regeneration: enabled for '/github/blog'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.

然后在浏览器打开 Server address 中显示的地址即可查看效果

将静态站点使用腾讯云静态网站托管

创建静态网站托管服务

1、创建腾讯云云开发环境

打开腾讯云「云开发 https://console.cloud.tencent.com/tcb/env/index」 服务的页面。如下图,点击新建环境,然后在弹框中输入你自定义的环境名称,选择付费模式,然后点击下方的「立即开通」。

之后就进入了环境的初始化阶段,初始化比较久。一般需要 1 分钟左右,当初始化结束,点击对应的 tab 就进入了 环境总览界面,可以看到具体的资源等信息。

2、初始化静态网站托管服务

点击进入「静态网站托管 https://console.cloud.tencent.com/tcb/hosting」 服务的页面。如下图,选择之前创建的开发环境,然后点击「开始使用」初始化环境。静态网站服初始化一般需要约 3 分钟

将静态页面部署到托管服务

你阔以直接选择将构建好的静态页面上传到托管服务,但是考虑到博客的更新频率,还是选择使用官方提供的工具来上传。首先使用npm 下载并安装官方上传工具cloudbase

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
➜  _posts git:(master) ✗ npm install -g @cloudbase/cli
​
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/usr/local/bin/tcb -> /usr/local/lib/node_modules/@cloudbase/cli/bin/tcb.js
/usr/local/bin/cloudbase -> /usr/local/lib/node_modules/@cloudbase/cli/bin/cloudbase.js
npm WARN ws@7.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.2.3 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.+ @cloudbase/cli@0.6.6
added 383 packages from 325 contributors in 26.045s

然后使用cloudbase命令获取CLI授权,输入命令,然后再弹出的页面中点击「确认授权」

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
➜  blog git:(master) ✗ tcb login
✔ 已打开云开发 CLI 授权页面,请在云开发 CLI 授权页面同意授权
✖ 未知错误:请求超时,请检查你的网络,如果终端无法直接访问公网,请设置终端 HTTP 请求代理!
请检查你的网络,尝试重新运行 cloudbase login 命令!

如果遇到上面的错误,一般是因为网络限制,需要添加 http 代理,可以参照文章 「iMac(OS X)日常开发中各种代理设置方法汇总(shell、Android Studio、gem、npm)https://blog.bihe0832.com/proxy.html」设置 shell 代理即可。设置代理后重试:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
➜  _posts git:(master) ✗ tcb login
✔ 已打开云开发 CLI 授权页面,请在云开发 CLI 授权页面同意授权
✔ 登录成功!
? 是否同意 Cloudbase CLI 收集您的使用数据以改进产品? Yes
可使用下面命令继续操作:
​
– 创建免费环境
​
  $ cloudbase env:create envName
​
– 初始化云开发项目
​
  $ cloudbase init
​
– 部署云函数
​
  $ cloudbase functions:deploy
​
– 查看命令使用介绍
​
  $ cloudbase -h
​
Tips:可以使用简写命令 tcb 代替 cloudbase

使用 hosting 命令 将本地已经编译的静态文件部署到托管服务(例如部署我的博客的 _site ),命令行中-e 后面的环境ID就是首页生成的环境ID,一般腾讯云会在我们的自定义名称后面加一个后缀。由于博客的内容比较大、加上网络代理,发现有时候会失败,重试即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
➜  blog git:(master) ✗ jekyll build
Configuration file: /Volumes/Document/Documents/github/blog/_config.yml
            Source: /Volumes/Document/Documents/github/blog
       Destination: /Volumes/Document/Documents/github/blog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 4.504 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
➜  _site git:(master) ✗ cd ..
➜  blog git:(master) ✗ cd _site
➜  _site git:(master) ✗ tcb hosting:deploy ./ -e blog-qcloud-new-131e7b
FetchError: request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639
    at ClientRequest.<anonymous> (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/node-fetch/lib/index.js:1455:11)
    at ClientRequest.emit (events.js:205:15)
    at ClientRequest.EventEmitter.emit (domain.js:471:20)
    at onerror (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:101:9)
    at callbackError (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:123:5)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
✖ request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639
➜  _site git:(master) ✗ tcb hosting:deploy ./ -e blog-qcloud-new-131e7b
文件传输中 [==================================================] 100% 0.0s
✔ 文件共计 842 个
✔ 文件上传成功 842 个
✖ 文件上传失败 0
管理静态页面及修改设置

上传结束以后,在静态页面托管的「文件管理」页面可以对我们上传的内容进行调整,在「设置」页面可以添加域名、错误页面等信息,同时也给出了腾讯云提供的默认域名。如果你有自己的域名,你也可以添加自己的域名解析,例如下面我修改为使用我自己的域名,并设置了自定义的索引页和404页面:

访问静态页面

在浏览器输入讯云提供的默认域名 https://blog-qcloud-new-131e7b.tcloudbaseapp.com/index.html, 或者使用自己的域名http://qcloud.bihe0832.com/index.html 均可打开部署好的静态服务,由于默认资源免费的,腾讯云对下载速度做了限速,因此打开速度会很慢。

特别说明:由于默认资源腾讯云对下载速度做了限速,所以我对于我的站点做了特殊配置:

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
听说你想要部署 Octopress?满足你
Octopress 是一个面向开发者的博客系统,广受程序员的喜爱。既然大家有需求,那么 Octopress 也要安排上~
腾讯云开发TCB
2020/06/03
1.1K0
本地部署Hexo博客并托管至腾讯云云开发CloudBase
前天看见张益达使用腾讯云静态网站托管搭建了一个Hexo博客,自己便忍不住也想折腾,终于折腾了一早上也使用Hexo搭建了个人博客,刚开始使用的是腾讯云自动部署,但是因为自己不会换主题而放弃,最后使用本地部署的。
岳泽以
2022/10/26
5510
本地部署Hexo博客并托管至腾讯云云开发CloudBase
高速部署博客网站,Jekyll满足你的需求!
云开发(CloudBase)是一款云端一体化的产品方案 ,采用 serverless 架构,免环境搭建等运维事务 ,支持一云多端,助力快速构建小程序、Web应用、移动应用。
腾讯云开发TCB
2020/06/03
1K0
来,将你的H5游戏一键部署托管到云开发上!
先和大家说一声,腾讯云云开发静态托管开始支持泛域名证书啦!添加子域名不需要走审核流程,可以加快配置子域名的速度,节省时间。
腾讯云开发TCB
2020/06/09
1.5K0
Github搭建个人博客(2019最新版,亲测)
版权声明:本文为徐代龙原创文章,未经徐代龙允许不得转载。 https://blog.csdn.net/xudailong_blog/article/details/78762262
全栈程序员站长
2022/09/01
7190
【云+社区年度征文】通过腾讯云*云开发搭建静态网站
笔者将自己的网站从阿里云迁到腾讯云时,发现腾讯云现有的教程与实际情况有些差异,所以特地记录一份完整的迁移笔记。
酷酷的哀殿
2020/12/16
3.6K0
【云+社区年度征文】通过腾讯云*云开发搭建静态网站
如何将 Hexo 快速部署到云开发静态网站托管
云开发提供了一项静态网页托管的业务(云开发静态托管), 你可以将你的静态资源(HTML、CSS、JavaScript、字体等)上传到云端, 由腾讯云对象储存和边缘CDN进行分开.你可以将它理解成类似 Github Page 的业务.
用户1329451
2020/06/16
1.6K0
如何将代码部署到腾讯云网站静态托管
之前将网站代码部署到 coding 上,并成功迁移到腾讯云上存储桶 cos,但依旧发现很麻烦,而且主要是对象存储cos是收费的,每天看账号余额不足,着实难受
itclanCoder
2021/02/19
12.6K2
如何将代码部署到腾讯云网站静态托管
【玩转腾讯云】比快更快,Github Action + 云开发部署静态网站
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持
Booker Zhao
2020/04/13
4.4K0
【玩转腾讯云】比快更快,Github Action + 云开发部署静态网站
基于 Next.js 和云开发 CMS 的内容型网站应用实战开发
董沅鑫,云开发 CloudBase 团队研发工程师,侧重于前端工程化、node 服务开发,业余时间出没在 xin-tan.com。
腾讯云开发TCB
2020/06/03
5.5K0
如何将 Hexo 博客部署到云开发静态网站托管
Hexo 是一个快速、简洁且高效的博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在其他平台上,是搭建博客的首选框架。除了在 Github Pages 部署以外,现在你有了一个新的选择,那就是使用云开发静态网站功能来部署啦!
腾讯云开发TCB
2020/07/30
4K3
如何将 Hexo 博客部署到云开发静态网站托管
使用Github Actions实现Hugo博客自动发布到腾讯云静态网站托管
之前博客因为是使用Caddy的GitHub webhook实现网站自动部署,但是因为Caddy现在已经升级到了v2版本,能使用的插件少了一点。看到腾讯云增加了静态网站托管,博客本身访问量也不是很大,所以相对来说静态网站托管还是便宜一些,所以就把博客迁移到了这里,就记录一下新的自动部署的方式方法。
JefferyWang
2021/01/27
2.1K0
使用Github Actions实现Hugo博客自动发布到腾讯云静态网站托管
如何将 Discuz 静态化发布到云开发静态网站托管上
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持
腾讯云开发TCB
2020/04/13
3.1K0
如何将 Angular 项目部署到云开发静态网站托管
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持
白宦成
2020/04/13
2.4K0
【玩转腾讯云】Next如何部署到云开发静态网站托管?
我们知道部署web应用程序的最佳方式是作为静态HTML应用程序,因为他对搜索引擎很友好,速度快等等,这对我们写个人博客这样的小型网站无异于非常nice。如果你的应用可以作为静态HTML,那么可以试试Next.js。
XaDon
2020/04/11
5K0
【玩转腾讯云】Next如何部署到云开发静态网站托管?
如何将 Vue.js 项目部署到云开发静态网站托管
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持
白宦成
2020/04/13
5.5K5
Next.js + 云开发Webify 打造绝佳网站
01 Next.js酷在哪里? 之前使用 Next.js + strapi 做了一个简单博客站点也顺道写了一篇 Next.js 简明教程,之后 Next 本身一直在迅猛发展。利用代 js 能力来说做到了: 极佳的开发体验 极佳的网站最佳的”动“,“静”平衡 从特性上来说,支持: SSR(Server Side Rendering) 提供 getServerSideProps 方法,在用户访问时请求数据,适用于实时数据页面。 SSG(Static Site Generation) 提供 getStaticPr
腾讯云开发TCB
2023/03/30
1.1K0
Next.js + 云开发Webify 打造绝佳网站
腾讯云静态网站托管之部署 Hugo
Hugo 是一个用 Go 编写的静态站点生成器,由于具有丰富的主题资源和有比较丰富的主题资源和较好的生成速度。 云开发(CloudBase)是一款云端一体化的产品方案,采用 serverless 架构,免环境搭建等运维事务,支持一云多端,助力快速构建小程序、Web应用、移动应用。 云开发静态网站托管支持通过云开发SDK调用服务端资源如:云函数、云存储、云数据库等,从而将静态网站扩展为全栈网站 无论是腾讯云·云开发用户,还是小程序·云开发用户,只要开通按量付费,即可享有云开发静态网站托管服务。
陌涛
2020/06/10
14.9K1
基于Jekyll与Github Pages搭建博客
有搭建博客这个想法的原因是看到室友搭的博客,感觉很不错,暑假了也得搞点事情,于是就参考了室友的博客,查了不少教程学着自己也搭一个。
ttony0
2022/12/26
1.3K0
基于Jekyll与Github Pages搭建博客
WordPress 静态化部署到云开发网站托管
相信很多同学都接触过或者使用过博客系统WordPress,WordPress不得不说是一个非常棒的一个CMS,这点是毋庸置疑的,不管是从它的性能上来说还是从它整个的一个功能上。那么本篇文章,就教你如何把一个静态的WP部署到腾讯云的云开发上。
腾讯云开发TCB
2020/07/30
5K1
WordPress 静态化部署到云开发网站托管
推荐阅读
相关推荐
听说你想要部署 Octopress?满足你
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验