使用阿里云OSS+Hugo搭建静态博客
前文
因为各种原因,需要给师兄做一个科研课题组的介绍页面,想要和Y叔的页面差不多,看了一下Y叔的页面,使用的是Hugo的Coder主题……这个主题正好之前有做过,现在再做一遍温习一下,也顺便写一篇笔记下来。
只不过之前一直都是在github仓库里面做的静态博客,使用的是Hexo+Github或者Hugo+Github;上一个月用阿里云OSS做了一个临床诊断学的小组作业网页,感觉特别合适用来做这种静态博客或者页面,这次正好,借着此次机会,用Hugo+OSS给师兄做一个页面~
直接进入正题
搭建笔记
1、下载Hugo并进行本地配置
首先从https://github.com/gohugoio/hugo/releases中下载我们所需要的Hugo程序(我选择的是hugo_extended_0.136.5_windows-amd64.zip)
下载完毕之后,我们需要配置本地目录,对于我来说,我将exe文件存入F:\Hugo\bin中。
在系统属性>环境变量>系统变量>Path中新增加环境变量F:\Hugo\bin(这里的路径取决于你的本地目录)
在目录中使用git bash验证一下是否安装成功(这个我在搭建hexo博客时便下载使用了,可以去网上找到相关教程,Hugo的使用和Hexo差不太多,很多都是可以用到git bash的,当然,你也可以win+R使用cmd)
输入$ hugo version
如果显示出版本信息,那么就说明没什么问题了。
2、准备一个OSS存储桶
之后便是去阿里云创建一个OSS存储桶,用来存储我们静态博客的所有内容并且提供给所有人浏览。
具体配置如下:
这里建议使用非大陆地域进行配置,方便域名的绑定。
之后进入我们刚刚创建好的bucket设置页面中,在数据管理>静态页面中设置默认的访问页面,在hugo中,基本都是使用index.html
与404.html
两个页面名称的,所以我们直接设置默认首页和默认404页为以上两者就好。
3、准备域名并绑定
这个没什么好说的,就注册一个就好了……可以在阿里云注册,这样后续绑定就不需要手动解析了,他会自动绑定好并添加解析……
在Bucket配置>域名管理中绑定注册好的域名,之后我们便可以通过域名访问我们的Bucket了~(可以顺便配置一个免费的ssl证书,阿里云里面就有)
4、创建静态博客
准备好上述后,我们就只差一个有内容的博客了,使用hugo创建站点特别方便,只需要在hugo的目录中git bash然后输入hugo new site xxx
即可,xxx就是你的博客名称,我这里使用的是david00.top
进入我们刚刚创建的博客文件夹,可以看到这些文件:
这些以后我们自定义博客的时候都会用到的~
接下来我们需要去找一个好看的主题,很多主题都可以在hugo的主题站(https://themes.gohugo.io/)里面找到,这里我使用Coder主题为例。
Coder主题给出了主题使用方法如下:
- Add the repository into your Hugo Project repository as a submodule,
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder
. - Configure your
hugo.toml
. You can either use this minimal configuration as a base, or look for a complete explanation about all configurations here. Thehugo.toml
inside theexampleSite
is also a good reference. - Build your site with
hugo server
and see the result athttp://localhost:1313/
.
因为我们并没有将hugo与git仓库绑定,所以我们需要直接从github上下载主题包而不是使用git。
下载主题包到博客目录的themes文件夹,解压,重命名主题包文件夹为hugo-coder,之后在该文件夹中找到exampleSite并将其中的hugo.toml复制粘贴并替换到博客主目录中。
完成这些过后,在博客主目录运行git bash,执行hugo server -D
出现以上信息,说明博客已经在本地部署完毕了,我们可以在本地http://localhost:1313/中查看我们的博客
之后将博客主目录中的public文件夹的内容全部上传到我们准备好的bucket中,就完成最简单的手动部署了。(真正上传是要在执行完hugo --cleanDestinationDir
后而不是hugo server -D
)
当然,我们还可以实现自动化部署,这些之后再说。
5、优化美化我们的博客
创建子目录
Coder主题给了四个默认子目录,分别为About,Blog,Projects,Contact,不过都是空的,得自己创建,创建方法也很简单,打开我们的git,输入以下代码就好了。
hugo new about.md
,hugo new projects.md
,hugo new contact.md
这样我们就完成了三个子目录的创建,因为blog目录主要用来存放文章,所以我们输入hugo new posts/测试用的文章.md
这样来将文章存入posts中,主题将blog读取文件夹设置为posts所以我们以此也顺便建立了posts文件夹。
与此同时,千万要注意一点,在阿里云oss控制台,bucket的静态网页设置页面,开通子目录!不然你的子目录是无法正常显示的。
hugo常用代码
hugo #生成静态网页
hugo new xxx.md #创建新文章
hugo server-D #本地服务器运行
hugo --cleanDestinationDir #删除public文件夹重新生成静态网页
hugo server --disableFastRender #关闭快速渲染来生成静态网页,一般用不上
这么看来和hexo的cgd三连差不多哈哈哈!
还需要注意一点,我们上传的public文件一般都是执行完hugo --cleanDestinationDir
后上传的,如果用hugo server-D
你的所有跳转url都将是localhost(笑)
自动化部署
网上有很多教程,不过大多数都是依靠github上传再传至oss的,对于我这种懒人肯定是麻烦的,用oss的原因就是不想走github……
所以我这里使用的是另一种方法,用ossutil来进行上传,这个阿里云专门有一个教程,可以看看:https://help.aliyun.com/zh/oss/developer-reference/install-ossutil
结束
至此,一个简单的静态页面就折腾完成了,可喜可贺可喜可贺~
技能点+1,顺便整理一下目前我会做的所有方案
github + hugo
最开始接触的搭建方法之一,很朴素,原始站点目前已弃用
github + hexo
最开始接触的搭建方法,很朴素,原始站点目前依旧保留,也就是0号站
ECS云服务器 + shiny server
花销比较大,不过不在意花销的话用起来也不错,原始站点目前已弃用(没钱)
轻量应用服务器 + shiny server
在课题组折腾的,不过基本没什么应用场景,根本搭载不了几个应用(笑死)
轻量应用服务器 + typecho
本站的搭建方法,原始站点就是本站
OSS + hugo
本文章所讲述的搭建方法,原始站点正在解析
OSS单纯搭建
很朴素的html搭建,用来做临床诊断学小组展示作业了,原始站点保留但不能说(个人信息过多……)
目前搭建的站点数量:10
谁还记得这是一名临床医学生……
14 条评论
以前就听说过储存桶可以弄静态网页,真不错
对于简单页面来说很方便
对象存储上传下载带宽能有多少ww
对于公有云的对象存储和内容分发的计费方式我试图理解了好久,最后发现还是源站一把梭来的省事
我也看不懂它的计费,但个人来说感觉花费很低……(小破站承载不了我的图库……)
历经3天的认真工作(摸鱼),我初步探索清楚了。目前OSS 标准存储计费方式为存储费用+流量费用+请求费用+附加
存储费用按量计费,可选使用各种活动的时候容量包抵扣,分为多种OSS类型,但存储单价没有多少差距,主要在流量和附加费用
流量区分内外网/CDN和上传下载(流入流出),内网流量免费,CDN相比直接外网有一定折扣,外网下行费用高于上行
请求费用计算各类请求如HTTP GET等,按万次计费,有免费容量
附加费用包含比如低频存储的一些操作(没用过,只用过标准存储不甚了解)
==
这样看,如果你想建站还是选NAS存储或者块存储服务吧,OSS存储服务弱结构高可用适合服务读写而非主动上下载数据
我也考虑罢CDN和OSS一起挂上了(笑)
谢谢Youmu大佬指点迷津!去了解了一下NAS存储,确实适用性更强,待有机会折腾一个出来哈哈哈
非常厉害,给你点赞!
我搭建静态博客的方法看来我需要抽空总结一下写一篇文章了,但工作量比较大,毕竟需要重建仓库然后截图那些。
毕竟我搭建的方法目前还没看到有人写这类文章。写出来也肯定会被喷。
不厉害,基本现学现卖……
什么方法竟然还会被喷Σ(っ °Д °;)っ,拭目以待
我就是这么搭的
嘿嘿,实惠好用的方法~
厉害喔,我的hugo站点托管在vercel+github,现在一直没管过了 ,因为更新一次太麻烦了,不想动电脑
不依托单独的服务器的话更新确实麻烦一些,所以比较适合不会怎么更新的介绍页面
🤥羡慕会十八般武艺的医学生
十八般武艺(划掉),找一条后路(正解)(bushi)