使用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
的域名。但是可以解析自己的域名。
因为是的域名是阿里云的,所以解析麻烦点,但是也好简单,如果是腾讯云的域名那就更加简单了。