使用hugo生成靜態(tài)頁(yè)面，并部署到騰訊云的云開(kāi)發(fā)環(huán)境。使用云開(kāi)發(fā)的靜態(tài)頁(yè)面功能提供網(wǎng)頁(yè)支持。并做好ssl。這個(gè)比github和coding的好處就是在國(guó)內(nèi)加載速度快。簡(jiǎn)單方便快捷。

安裝基礎(chǔ)環(huán)境（Windows）

需要用到的軟件和下載地址如下。

進(jìn)入下載地址：

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

默認(rèn)下載最新版。如果go官網(wǎng)上不去，自己搭梯子，或者使用中文網(wǎng)，或者谷歌中國(guó)下載。

go和nodejs在Windows下安裝很簡(jiǎn)單，直接雙擊默認(rèn)下一步就OK。

在終端下驗(yàn)證，如果沒(méi)有路徑自己手動(dòng)添加路徑。

hugo把zip安裝下載到后解壓，然后手動(dòng)把文件夾添加到系統(tǒng)環(huán)境變量path中。

最后都在cmd里面驗(yàn)證一遍。

安裝騰訊云云開(kāi)發(fā)命令行工具（CLI）

npm i -g @cloudbase/cli

通過(guò)查看版本驗(yàn)證是否成功。

使用hugo創(chuàng)建站點(diǎn)

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" # 自動(dòng)檢測(cè)是否包含中文/日文/韓文，該參數(shù)會(huì)影響摘要和字?jǐn)?shù)統(tǒng)計(jì)功能，建議設(shè)置為true hasCJKLanguage = true # 設(shè)置頁(yè)面生成形式，將默認(rèn)的網(wǎng)站路徑/修改成.html uglyURLs = true googleAnalytics = "" # UA-XXXXXXXX-X## 評(píng)論系統(tǒng) changyanAppid = "" # Changyan app id # 暢言 changyanAppkey = "" # Changyan app key disqusShortname = "forecho-blog" # disqus account name livereUID = "" # LiveRe UID # 來(lái)必力[markup.highlight] codeFences = true # 高亮markdown的代碼塊 guessSyntax = true # 高亮markdown中沒(méi)有標(biāo)注語(yǔ)言的代碼塊 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年開(kāi)發(fā)經(jīng)驗(yàn)，尋求技術(shù) Leader 工作機(jī)會(huì)。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 # 是否使用不蒜子統(tǒng)計(jì)站點(diǎn)訪(fǎng)問(wèn)量 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 = ''# 開(kāi)啟版權(quán)聲明，協(xié)議名字和鏈接都可以換 [params.cc] name = "署名-非商業(yè)性使用 4.0 國(guó)際 (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" # 支付寶二維碼############## 評(píng)論系統(tǒng) 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 = '說(shuō)點(diǎn)什么吧...' visitor = false############ 評(píng)論系統(tǒng) 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"

啟動(dòng)預(yù)覽：

hugo server

編譯：

hugo -D

部署到云環(huán)境

我們進(jìn)入騰訊云的云開(kāi)發(fā)(cloudbase)控制臺(tái)，選擇開(kāi)通一個(gè)云環(huán)境:

這里要注意選擇是按量計(jì)費(fèi)的模式(只有按量計(jì)費(fèi)才能開(kāi)通靜態(tài)網(wǎng)站托管)。創(chuàng)建完成后，點(diǎn)擊進(jìn)入我們剛剛創(chuàng)建的云環(huán)境，進(jìn)入云環(huán)境管理界面：

在云環(huán)境管理界面，在右側(cè)的網(wǎng)站托管中，我們可以將剛剛項(xiàng)目中生成好的靜態(tài)頁(yè)面給上傳上去。當(dāng)然，手動(dòng)上傳顯得不太友好，我們也可以借助 cloudbase cli 以命令行的方式執(zhí)行上傳。

首先，安裝cloudbase cli:

npm install -g @cloudbase/cli

執(zhí)行登錄命令：

tcb login

在彈出的頁(yè)面確認(rèn)授權(quán):

也可以是使用key登錄，key登錄大多適用于編程調(diào)用。

接著，在hugo-site中將public目錄中的文件給部署上去：

cloudbase hosting:deploy ./public -e EndId

這里的 EnvID 替換為剛創(chuàng)建好的環(huán)境ID。

云環(huán)境開(kāi)通靜態(tài)網(wǎng)頁(yè)托管功能，就可以通過(guò)域名訪(fǎng)問(wèn)了。

cloudbase hosting:deploy ./public -e env-hbnfeuhx # env-hbnfeuhx是我的環(huán)境ID

云環(huán)境是提供一個(gè)免費(fèi)的https的域名。但是可以解析自己的域名。

因?yàn)槭堑挠蛎前⒗镌频?#xff0c;所以解析麻煩點(diǎn)，但是也好簡(jiǎn)單，如果是騰訊云的域名那就更加簡(jiǎn)單了。

總結(jié)

以上是生活随笔為你收集整理的使用hugo生成静态页面，并部署到腾讯云的云开发环境。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。