使用阿里云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.html404.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主题给出了主题使用方法如下:

  1. Add the repository into your Hugo Project repository as a submodule, git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder.
  2. Configure your hugo.toml. You can either use this minimal configuration as a base, or look for a complete explanation about all configurations here. The hugo.toml inside the exampleSite is also a good reference.
  3. Build your site with hugo server and see the result at http://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.mdhugo new projects.mdhugo 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

谁还记得这是一名临床医学生……

最后修改:2024 年 11 月 03 日
如果觉得我的文章对你有用,请随意赞赏
正文到此结束
本文作者: 文章标题:使用阿里云OSS+Hugo搭建静态博客
本文地址:https://www.david03.top/index.php/archives/195/
版权说明:若无注明,本文皆 Davidの3号基地 原创,转载请保留文章出处。