如何在云开发静态托管中使用Hugo
如何在云开发静态托管中使用Hugo
介绍
hugo是一个用Go编写的静态站点生成器,由于具有丰富的主题资源和有比较丰富的主题资源和较好的生成速度。
云开发(CloudBase)是一款云端一体化的产品方案 ,采用 serverless 架构,免环境搭建等运维事务 ,支持一云多端,助力快速构建小程序、Web应用、移动应用。
云开发静态网站托管支持通过云开发SDK调用服务端资源如:云函数、云存储、云数据库等,从而将静态网站扩展为全栈网站
无论是腾讯云·云开发用户,还是小程序·云开发用户,只要开通按量付费,即可享有云开发静态网站托管服务。
安装Hugo
首先,我们先安装hugo:
brew install hugo
windows的用户可以去Hugo的githubc仓库上下载安装hugo的可执行程序进行安装,具体安装流程请点击这里。
紧着这,我们用hugo来帮我们创建一个blog项目:
```
hugo new site hugo-demo && cd hugo-demo
然后我们先创建一个测试的文章:
hugo new posts/my-first-post.md
最后,直接在目录中运行:
hugo server
在浏览器打开 [http://localhost:1313/](http://localhost:1313/) 即可查看效果:

当然,我们需要部署的是编译完成的静态页面文件:
hugo -D
生成好的静态页面文件会放在项目的public目录中,目录结构如下:
```.
├── 404.html
├── categories
│ ├── index.html
│ └── index.xml
├── dist
│ ├── css
│ │ └── app.1cb140d8ba31d5b2f1114537dd04802a.css
│ └── js
│ └── app.3fc0f988d21662902933.js
├── images
│ └── gohugo-default-sample-hero-image.jpg
├── index.html
├── index.xml
├── posts
│ ├── index.html
│ ├── index.xml
│ ├── my-first-post
│ │ └── index.html
│ └── page
│ └── 1
│ └── index.html
├── sitemap.xml
└── tags
├── index.html
└── index.xml
如果你不喜欢hugo站点的默认主题样式的话,可以自行在github上找到开源的hugo主题,并放置到你的hugo项目中,例如:
git clone https://github.com/olOwOlo/hugo-theme-even themes/even
当然,这偏文章的重点不是教大家如何使用hogu,而且如何在云开发上部署静态的站点。
静态托管部署
我们进入腾讯云的云开发(cloudbase)控制台,选择开通一个云环境:
这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。创建完成后,点击进入我们刚刚创建的云环境,进入云环境管理界面:
在云环境管理界面,在右侧的网站托管中,我们可以将刚刚项目中生成好的静态页面给上传上去。当然,手动上传显的不太友好,我们也可以借助 cloudbase cli 以命令行的方式执行上传。
首先,安装cloudbase cli:
npm install -g @cloudbase/cli
执行登录命令:
tcb login
在弹出的页面确认授权:
接着,在hugo-site中将public目录中的文件给部署上去:
cloudbase hosting:deploy ./public -e EndId
这里的 EnvID 替换为刚创建好的环境ID。
腾讯云云开发的静态网站托管有默认域名可供访问:
通过默认域名,我们就能访问啦:
如何在云开发静态托管中使用Hugo的更多相关文章
- 如何在云开发静态托管中使用Jekyll
如何在云开发静态托管中使用Jekyll 介绍 Jekyll 是一个简单的博客形态的静态站点生产机器,通过它,我们可以搭建一个完整的可发布的静态博客网站. Jekyll 也可以运行在 GitHub Pa ...
- 如何将你的 Vue.js 项目部署在云开发静态托管之上
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...
- 云开发静态网站托管现已支持 Angular 应用
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...
- 新能力 | 云开发CMS内容管理系统,5分钟搞定小程序管理后台
小程序·云开发的云调用能力,让用户可以免鉴权快速调用微信的开放能力,极大节约了开发成本.现在,大家期待已久的云开发 CMS 内容管理系统,终于上线啦!顺便提示,接下来还可以二次开发哦! 云开发 CMS ...
- 微信小程序开发入门教程(二)---分析官方云开发例子中的一些功能
接上一篇文章:https://www.cnblogs.com/pu369/p/11326538.html 1.官方云开发的例子中,点击获取 openid,对应代码在E:\wxDEV\helloyun\ ...
- 【攻略】如何在云开发中使用 Redis?
默认情况下,云开发的函数部署在公共网络中,只可以访问公网.如果开发者需要访问腾讯云的 Redis.TencentDB.CVM.Kafka 等资源,需要建立私有网络来确保数据安全及连接安全. 本文会演示 ...
- 云开发网站托管悄悄上线了 Next.js 的支持
我们知道部署web应用程序的最佳方式是作为静态HTML应用程序,因为他对搜索引擎很友好,速度快等等,这对我们写个人博客这样的小型网站无异于非常nice.如果你的应用可以作为静态HTML,那么可以试试N ...
- Serverless介绍篇(一)云开发在Serverless方面取得了怎样的新成果?
过去几年间,Serverless 发展迅猛,与其相伴的还有从小程序.移动端等到前后端一体化的演进与实践,也正因如此,从云计算到前端,众多开发者都极为关注.本文介绍了腾讯云CloudBase 的 Ser ...
- 基于云开发 CloudBase 搭建在线视频会议应用教程
基于云开发 CloudBase 搭建在线视频会议应用 在线视频会议应用是基于浏览器的能力 WebRTC 以及 腾讯云开发 CloudBase 能力构建而成的应用. 在云开发的助力下, 一个复杂的在线会 ...
随机推荐
- IPFS(星际文件系统)-初步接触
〇.IPFS介绍 从HTTP到IPFS,星际文件系统能变革信息传播的方式吗? 戴嘉乐:详解IPFS的本质.技术架构以及应用 以下为实现相关摘要 1.存储 在IPFS中,信息可以存储进IPFS系统中的块 ...
- 在vscode中怎样debug调试go程序
随着互联网时代的飞速发展,我们编码使用的开发利器也在不断更新换代,古话说工欲善其事必先利其器,对于Java开发者而言,eclipse和idea这两款神器各有千秋,因自己的爱好可以选取不同的IDE,但是 ...
- Vulnhub 靶场 Os-hackNos WP
About Os-hackNos 描述 Difficulty : Easy to Intermediate Flag : 2 Flag first user And second root Learn ...
- (转载)Why you shouldn't use Entity Framework with Transactions
Why you shouldn't use Entity Framework with Transactions EntityFramework This is a .net ORM Mapper F ...
- Android 文章合集 200+ 篇
code小生 一个专注大前端领域的技术平台 公众号回复Android加入安卓技术群 镇楼 2017 文章合集 2017 年度文章分类整理 下面是 2018 年公众号所发表的文章分类整理 面经 一年经验 ...
- 牛客网剑指offer【Python实现】——part2
不用加减乘除做加法 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 两个数异或:相当于每一位相加,而不考虑进位: 两个数相与,并左移一位:相当于求得进位: 将上述两步的 ...
- windows常用系统命令
dir指定要列出的驱动器.目录和/或文件 显示当前路径下的所有文件的绝对路径,包含子文件夹中的内容 dir /b / s /o:n /a:a /b 表示去除摘要信息,且顶格显示完整路径 /s 表示枚举 ...
- Android之练习MVVM+DataBinding框架模式
最近简单学习了MVVM框架,记录一下. 结果演示: 分析其功能在不同框架下的构成: 无框架 可以明显感受到在无框架下,虽然一个单独的Activity即可实现功能,但其负担过重,代码复查时繁琐,一旦需要 ...
- doc-指令-查看端口是否被占用及占用程序
来源:http://www.blogjava.net/huozhicheng/archive/2011/09/27/359620.html 1.首先进入命令行 查看端口是否被占用 使用命令: nets ...
- Pandas 精简实例入门
目录 0. 案例引入 1. Pandas 主要数据结构 1.1 DataFrame 1.1.1 设置索引 1.1.2 重设索引 1.1.3 以某列为索引 1.2 MultiIndex 1.3 Seri ...