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

  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.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

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

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