使用hugo生成静态页面,并部署到腾讯云的云开发环境。

使用hugo生成静态页面,并部署到腾讯云的云开发环境。使用云开发的静态页面功能提供网页支持。并做好ssl。这个比github和coding的好处就是在国内加载速度快。简单方便快捷。

安装基础环境(Windows)

需要用到的软件和下载地址如下。

进入下载地址:

  • GO:https://golang.org/dl/
  • NodeJS:https://nodejs.org/en/download/
  • Git:https://git-scm.com/
  • hugo:https://github.com/gohugoio/hugo/releases

默认下载最新版。如果go官网上不去,自己搭梯子,或者使用中文网,或者谷歌中国下载。

go和nodejs在Windows下安装很简单,直接双击默认下一步就OK。

在终端下验证,如果没有路径自己手动添加路径。

hugo把zip安装下载到后解压,然后手动把文件夹添加到系统环境变量path中。

最后都在cmd里面验证一遍。

安装腾讯云云开发命令行工具(CLI)

npm i -g @cloudbase/cli

通过查看版本验证是否成功。

使用hugo创建站点

hugo new site blog

使用主题:

加载主题

git submodule add https://github.com/forecho/hugo-theme-echo.git themes/echo

修改配置文件(作者源文件):

baseURL = "http://localhost:1313"
languageCode = "en-us"
title = "Forecho's Blog"
theme = "echo"
DefaultContentLanguage = "cn"
# 自动检测是否包含中文/日文/韩文,该参数会影响摘要和字数统计功能,建议设置为true
hasCJKLanguage = true
# 设置页面生成形式,将默认的网站路径/修改成.html
uglyURLs = true
googleAnalytics = ""      # UA-XXXXXXXX-X

## 评论系统
changyanAppid = "" # Changyan app id             # 畅言
changyanAppkey = "" # Changyan app key
disqusShortname = "forecho-blog" # disqus account name
livereUID = "" # LiveRe UID                  # 来必力

[markup.highlight]
codeFences = true # 高亮markdown的代码块
guessSyntax = true # 高亮markdown中没有标注语言的代码块
hl_Lines = ""
lineNoStart = 1
lineNos = true
lineNumbersInTable = true
noClasses = true
style = "manni"
tabWidth = 2

# https://gohugo.io/content-management/urls/#aliases
[permalinks]
posts = "/:filename"

[outputFormats.RSS]
mediatype = "application/rss"
baseName = "atom"

[services.rss]
limit = 20

[author]
name = "forecho"
avatar = "https://avatars0.githubusercontent.com/u/1725326?s=460&v=4"
bio = "7年开发经验,寻求技术 Leader 工作机会。Wechat: ipzone"
homepage = "https://forecho.io/"

[params]
favicon = "https://avatars0.githubusercontent.com/u/1725326?s=460&v=4"
keywords = "Hugo, theme, echo"
description = "Hugo theme echo example site."
toc = true
navItems = [
  ["HOME", "/"],
  ["ARCHIVE", "/posts.html"],
  ["ABOUT", "/about.html"],
  ["RSS", "/atom.xml"]
]
# rss 全文输出
rssFullContent = true
uglyURLs = true
busuanzi = true # 是否使用不蒜子统计站点访问量
staticCDNPrefix = "https://cdn.bootcss.com/font-awesome/5.11.2"
extraHead = ''
postAds = ""
profileAds = '
微信打赏
'
notFoundAds = '' # 开启版权声明,协议名字和链接都可以换 [params.cc] name = "署名-非商业性使用 4.0 国际 (CC BY-NC 4.0)" link = "https://creativecommons.org/licenses/by-nc/4.0/deed.zh" # 文章打赏 [params.reward] enable = true title = "打赏" wechat = "https://blog-1251237404.cos.ap-guangzhou.myqcloud.com/20190424153510.png" # 微信二维码 alipay = "https://blog-1251237404.cos.ap-guangzhou.myqcloud.com/20190424153431.png" # 支付宝二维码 ############## 评论系统 start ############## [params.gitment] # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment owner = "" # Your GitHub ID repo = "" # The repo to store comments clientId = "" # Your client ID clientSecret = "" # Your client secret [params.utterances] # https://utteranc.es/ owner = "" # Your GitHub ID repo = "" # The repo to store comments [params.gitalk] # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk owner = "" # Your GitHub ID repo = "" # The repo to store comments clientId = "" # Your client ID clientSecret = "" # Your client secret # Valine. # You can get your appid and appkey from https://leancloud.cn # more info please open https://valine.js.org [params.valine] enable = false appId = '你的appId' appKey = '你的appKey' notify = false # mail notifier , https://github.com/xCss/Valine/wiki verify = false # Verification code avatar = 'mm' placeholder = '说点什么吧...' visitor = false ############ 评论系统 end ############## ## 社交链接 [social] github = "forecho" jsfiddle = "forecho" codepen = "forecho" dribbble = "forecho" behance = "forecho" flickr = "forecho" instagram = "forecho" youtube = "forecho" vimeo = "forecho" vine = "forecho" medium = "forecho" wordpress = "forecho" tumblr = "forecho" linkedin = "forecho" slideshare = "forecho" stackoverflow = "forecho" reddit = "forecho" pinterest = "forecho" weibo = "forecho" facebook = "forecho" twitter = "caizhenghai" douban = "ipzone" rss = "/atom.xml"

启动预览:

hugo server

编译:

hugo -D

部署到云环境

我们进入腾讯云的云开发(cloudbase)控制台,选择开通一个云环境:

使用hugo生成静态页面,并部署到腾讯云的云开发环境。_第1张图片

这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。创建完成后,点击进入我们刚刚创建的云环境,进入云环境管理界面:

使用hugo生成静态页面,并部署到腾讯云的云开发环境。_第2张图片

在云环境管理界面,在右侧的网站托管中,我们可以将刚刚项目中生成好的静态页面给上传上去。当然,手动上传显得不太友好,我们也可以借助 cloudbase cli 以命令行的方式执行上传。

首先,安装cloudbase cli:

npm install -g @cloudbase/cli

执行登录命令:

tcb login

使用hugo生成静态页面,并部署到腾讯云的云开发环境。_第3张图片

在弹出的页面确认授权:

使用hugo生成静态页面,并部署到腾讯云的云开发环境。_第4张图片
也可以是使用key登录,key登录大多适用于编程调用。

接着,在hugo-site中将public目录中的文件给部署上去:

cloudbase hosting:deploy ./public  -e EndId

这里的 EnvID 替换为刚创建好的环境ID。

云环境开通静态网页托管功能,就可以通过域名访问了。

cloudbase hosting:deploy ./public  -e env-hbnfeuhx # env-hbnfeuhx是我的环境ID

云环境是提供一个免费的https的域名。但是可以解析自己的域名。
使用hugo生成静态页面,并部署到腾讯云的云开发环境。_第5张图片
因为是的域名是阿里云的,所以解析麻烦点,但是也好简单,如果是腾讯云的域名那就更加简单了。

你可能感兴趣的:(云计算,GOWEB,Experience,git,hugo,云环境,网站,建站)