name - artist
00:00

      目录

      全网最全 Hugo 静态网站部署及免费 HTTPS 证书配置

        很久前就写了关于 Hugo 系列的文章,以为没人关注。直到最近越来越多小伙伴私信我希望出一篇部署教程,原来还是帮助到了大家,只是大家都沉默寡言,来了都不冒个泡悄悄学习完就溜啦😫。

        为了满足大家的愿望,顺便把 Hugo 系列结个尾,部署教程来了。

        我会写两篇关于部署的教程:

      • 一篇直接将静态网站托管至对象存储,对象存储配置自定义域名。(本文为该篇)
      • 一篇通过服务器反向代理至对象存储,域名解析服务器。

        

        默认大家已经购买了对象存储,拥有一个已备案的域名。还不知道如何操作的请先阅读《手把手教大家选购服务器和域名(域名备案)及对象存储》

        

      静态页面

        

        首先我们先配置对象存储的自定义域名,本文使用 阿里云 OSS 举例。具体步骤如下:

      • 登录 阿里云 进入 控制台
      • 选择 对象存储 OSS
      • 通过 Bucket 列表 选择一个空间
      • 选择 静态页面 进行设置

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308200029428.png

        

        阿里已经写的很详细了,仔细阅读灰色小字部分,有问题留言。

        这里的 index.html 对应 Hugo 生成的静态页面 index.html404.html 对应 Hugo 生成的静态页面 404.htmlHugo 生成静态页面的规则是:名称生成子目录,具体的内容通过子目录内的 index.html 渲染,所以开通子目录首页功能。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308200652711.png

        

        配置成功以后显示结果如下。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308200956431.png

        

      配置域名

        

      前提条件

        

      • 使用静态网站托管模式,需要绑定您的自定义域名(即您网站的域名)

      • 已完成域名备案。

      • 已创建存储空间。

        

        还不知道如何操作的请先阅读《手把手教大家选购服务器和域名(域名备案)及对象存储》

        

      配置域名

        

        官方链接:https://help.aliyun.com/knowledge_detail/31902.html

      • 登录 阿里云 进入 控制台
      • 选择 对象存储 OSS
      • 通过 Bucket 列表 选择一个空间
      • 选择 域名管理 进行设置

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308202227498.png

        

        选择 绑定用户域名 输入域名后选择 自动添加 CNAME 记录,阿里会自动配置 CNAME

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308203608149.png

        

      申请证书添加 HTTPS

        

        现在都全网 HTTPS,咱也不能落下,上 七牛云 免费申请一个一年的先用着。其实 阿里云 也有,我另一个域名就是阿里云的免费证书。

        登录七牛云后台,侧边栏菜单选择 SSL证书服务

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308203956844.png

        

        购买证书

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308204031583.png

        

        选择 TrustAsia 下的免费证书 DV域名型

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308204204667.png

        

        购买成功后点击 详情

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308204310615.png

        

        查看证书

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308204414415.png

        

        下载证书

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308204453557.png

        

        设置一个证书密码(下载后是个压缩包,这里指的就是压缩包的解压密码)。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308204532093.png

        

        解压后得到以下两个文件。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308205022929.png

        

      配置证书

        

        返回 阿里云 OSSBucket 列表传输管理域名管理,点击 证书管理

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308203641457.png

        

        将刚才那两文件使用记事本打开,把 *.crt 结尾文件的内容复制到 公钥*.key 结尾文件的内容复制到 私钥

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308210933517.png

      域名信息更新只需 1 分钟左右的时间,快去给空间存储点东西,随便传张照片试试通过 域名/照片名称 比如:mrhelloworld.com/test.jpg 能否访问,能访问即表示配置成功。

        

      取消配置

        

        如果想更换域名或者取消域名配置,按以下步骤操作。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308211452328.png

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308211500191.png

        

      文件上传工具

        

        通过 hugo 命令可以将我们的博客生成为静态网站。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308212236442.png

        

        生成的静态页面都在 public 目录下。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308212349055.png

        

        我们总不能手动一个一个通过阿里云网站传上去吧,当然不是,可以借助以下几款工具。

        阿里提供了 多款工具SDK,我一般使用以下两种,下面就详细介绍下这两种。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308212649097.png

        

      图形化管理工具 ossbrowser

        

      下载

        

        官方链接:https://help.aliyun.com/document_detail/61872.html?spm=a2c4g.11186623.6.693.36381c7a0DIqDX

        我的 Hugo 安装在 Windows 系统上,选择 Windows x64。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308212855923.png

        

      创建 AK

        

        通过 阿里云RAM后台 创建用户,链接:https://ram.console.aliyun.com/?spm=a2c4g.11186623.2.13.53bd5f81r2t2Qq

      • 云账号登录 RAM控制台
      • 选择左侧导航栏 用户管理 菜单。
      • 新建用户 然后生成 AK 再授权。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308213923029.png

        

        创建成功以后会弹出一个窗口要求你保存 AK 切记这是 用户AccessKey可供下载的唯一机会,请及时保存!

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308214140429.png

        

      授权对象存储

        

        给新创建的用户 授权 阿里云 OSS 所有权限,不授权 AK 无法操作 OSS。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200309093001270.png

        

      安装并登录

        

        安装 ossbrowser 以后打开,按要求填写信息并登入。

      • Endpoint:默认即可
      • AccessKeyId/AccessKeySecret:填写账号的 AccessKey 信息(就是刚才你保存的那玩意)。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308214529495.png

        

        登录以后长这样。然后选择你自己的空间,直接将文件夹或文件拖拽至 OSS 即可。操作非常简单自己玩两下就明白了。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308214717369.png

        

      部署

        

        使用 hugo 命令将已开发好的博客生成静态文件至 public 目录,然后将整个 public 目录拖拽至配置了域名的空间根路径下即可。至此,静态网站部署至 阿里云 OSS 完成。以后每次修改了网站,只需重复此操作即可,相同文件名会选择覆盖。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308223727129.png

        打开浏览器,访问自己的域名,不出意外你已经看到自己的网站了,恭喜你又成长了。

        如果不喜欢图形化操作,我们可以使用逼格更高,更接近程序员行为的命令行方式。

        

      命令行工具 ossutil

        

      下载

        

        官方链接:https://help.aliyun.com/document_detail/120075.html?spm=a2c4g.11186623.6.698.3d561c7ajiBukC

        我的 Hugo 安装在 Windows 系统上,选择 Windows x64。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308215707614.png

        

      配置 AK

        

        将工具解压到指定的文件夹,并双击运行 ossutil.bat 文件,假设解压至 D 盘根路径。

        CMD 窗口运行以下命令:

      1
      
      D:\ossutil>ossutil64.exe config
      

        使用交互式配置生成配置文件:

      1
      2
      3
      4
      5
      6
      7
      8
      
      D:\ossutil>ossutil64.exe config
      请输入配置文件名,文件名可以带路径(回车将使用默认路径。如果用户设置为其它路径,在使用命令时需要将--config-file选项设置为该路径): 
      未输入配置文件路径,将使用默认配置文件。 
      对于下述配置,回车将跳过相关配置项的设置,配置项的具体含义,请使用"help config"命令查看。 
      请输入endpoint:http://oss-cn-shenzhen.aliyuncs.com 
      请输入accessKeyID:yourAccessKeyID 
      请输入accessKeySecret:yourAccessKeySecret
      请输入stsToken: 
      

        我教大家一种最简单的方式,运行 ossutil64.exe config 命令以后:

      • 按一次回车使用默认配置文件名,以后每次使用命令无需指定 --config-file

      • endpoint:通过该链接:https://help.aliyun.com/document_detail/31837.html?spm=a2c4g.11186623.2.19.781b448aNLDcRr#concept-zt4-cvy-5db 找到你空间所在地域的域名信息,比如我的是上海,那么就是红色框中的内容。

        https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308220818334.png

      • AccessKeyId**/**AccessKeySecret:填写账号的 AccessKey 信息。

        

      编写脚本

        

        为了方便使用,先把 ossutil 配置为环境变量。此电脑右键属性高级系统设置环境变量

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308221650651.png

        

        与 public 目录同级创建 ossutil 目录,然后创建 ossutil.bat 脚本。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308221815712.png

        

        官方命令:https://help.aliyun.com/document_detail/50455.html?spm=a2c4g.11186623.6.734.1f3e34afZTG4NQ

        通过参考官方命令,编写一个脚本防止每次敲一堆代码 ossutil.bat 文件内容如下:

      1
      2
      
      ossutil64.exe cp -r -u D:\mrhelloworld\mrhelloworld_pure\public oss://mrhelloworld
      pause
      
      • cp:用于上传、下载、拷贝文件。
      • -r: 递归进行操作。
      • -u:更新操作。
      • D:\mrhelloworld\mrhelloworld_pure\public:需要上传的资源地址
      • oss://mrhelloworld:上传到哪个空间

        

      部署

        

        使用 hugo 命令将已开发好的博客生成静态文件至 public 目录,然后进入 ossutil 目录执行 ossutil.bat 脚本,至此,静态网站部署至 阿里云 OSS 完成。以后每次修改了网站,只需重复此操作即可,修改过的文件会选择覆盖。

      https://mrhelloworld.com/resources/articles/hugo/oss-install/image-20200308222757302.png

        打开浏览器,访问自己的域名,不出意外你已经看到自己的网站了,恭喜你又成长了。

        直接将静态网站托管至对象存储,对象存储配置自定义域名的教程到这里就结束了,下一篇教大家通过服务器反向代理至对象存储,域名解析服务器的方式。

      https://mrhelloworld.com/resources/articles/articles_bottom/end02.gif

        本文采用 知识共享「署名-非商业性使用-禁止演绎 4.0 国际」许可协议

        大家可以通过 分类 查看更多关于 Hugo 的文章。手把手教大家如何搭建个人博客。

        

        🤗 您的点赞转发是对我最大的支持。

        📖 如果我的文章为您提高了一定的工作效率,可以赞赏一下我,让我有动力写出更多好文章。

        📢 扫码关注 哈喽沃德先生「文档 + 视频」每篇文章都配有专门视频讲解,学习更轻松噢 ~

      https://mrhelloworld.com/resources/mrhelloworld/qrcode/OfficialAccounts500-500.gif

      「 感谢支持 」
       评论