使用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 = '<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxx"></script>' postAds = "" profileAds = '<div class="bg-white shadow"><img class=" object-cover w-auto mx-auto mt-6" src="https://blog-1251237404.cos.ap-guangzhou.myqcloud.com/20190424153337.png" alt="微信打賞"></div>' 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)控制臺，選擇開通一個云環境:

這里要注意選擇是按量計費的模式(只有按量計費才能開通靜態網站托管)。創建完成后，點擊進入我們剛剛創建的云環境，進入云環境管理界面：

在云環境管理界面，在右側的網站托管中，我們可以將剛剛項目中生成好的靜態頁面給上傳上去。當然，手動上傳顯得不太友好，我們也可以借助 cloudbase cli 以命令行的方式執行上傳。

首先，安裝cloudbase cli:

npm install -g @cloudbase/cli

執行登錄命令：

tcb login

在彈出的頁面確認授權:

也可以是使用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生成静态页面，并部署到腾讯云的云开发环境。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。