使用Hugo搭建个人博客Mac+Docker

最新推荐文章于 2026-06-14 12:55:51 发布

原创最新推荐文章于 2026-06-14 12:55:51 发布 · 2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#docker #容器 #go

本文介绍了为何选择Hugo作为静态网站生成器，包括其秒级加载速度、Macdown支持、跨平台部署便利性，以及作者的个人使用经历。从Mac安装、主题定制到Docker部署的详细步骤都有涵盖。

Hugo 是什么？

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。了解更多点击原文

为什么选择Hugo ?

刚开始写内容之前，选择的是fastadmin 搭建的博客系统，框架运行需要（nginx，mysql，后台，前台），随后部署在云机器上（1核2G）+ 1M带宽，访问时候加载了大量的静态文件，体验非常差，性能就不要提了，在尝试使用1个月之后就下线了，不要问为什么不扩容，因为没钱！系统下线，机器留着。

fastadmin下线后，除了博客这个需求、还有记笔记之类的需求，就选择了有道云笔记，手动将博客迁移至有道云。之后发布的内容会分享链接到小伙伴的群里供查阅。如果文档上有图片之类的需求，就要单独续费VIP了，之后开通了会员每个月18RMB。还可以接受嘛。

作为技术同学，还是非常希望有自己的个人站点，于是又起了搭建博客的念头。

Hugo 依靠Go语言进行开发，生成静态html非常快，我选择hugo的主要原因：

    1，主题好看。
    
    2，支持Macdown。
    
    3，生成的页面速度为秒级。
    
    4，生成的静态文件可以托管在各大平台（绑定域名即可访问）。

FALLBACK

windows的同学请选择查看官方文档

1，Mac 安装 Hugo & 基本使用

    brew install hugo

FALLBACK

1.1，创建站点

    hugo new site blog（自定义名称）

FALLBACK

执行成功后

1.2，运行站点

进入目录

 cd ./blog

FALLBACK

进入目录后查看站点结构（如下图）

运行

hugo server

FALLBACK

浏览器访问1313端口的地址（如下图）

2，安装Hugo主题

我选择的是HBS(Hugo Bootstrap),其它安装方式可参考这里，安装这个主题的前置条件有git，Hugo0.84.0，npm，Go，请自行安装。原主题的Github地址

新建站点安装：

git init

git submodule add https://github.com/razonyang/hugo-theme-bootstrap
themes/hugo-theme-bootstrap

cp -a themes/hugo-theme-bootstrap/exampleSite/* .

hugo mod npm pack

npm install

hugo server

FALLBACK

以上命令执行成功后，浏览器刷新后得到下图内容，到此安装hugo+安装主题成功！

这个主题有很多我不需要的所以删除了很多内容diff代码

精简后的首页展示站点halobug，代码仓库

到此Mac 上安装hugo完成。

3，Docker运行Hugo

3.1 制作Dockerfile

    #安装hugo 主题相关依赖 NPM
    
    FROM node:16.2.0 as node_modules
    
    LABEL MAINTAINER halobug<halobug.cn@gmail.com>
    
    ENV LANG en_US.UTF-8
    
    ENV LANGUAGE en_US.UTF-8
    
    ENV LC_ALL=en_US.UTF-8
    
    RUN echo "Asia/Shanghai" > /etc/timezone
    
    WORKDIR /app
    
    COPY ./blog/package.json /app
    
    RUN  npm i --registry=https://registry.npm.taobao.org
    
    #build hugo 生成静态文件
    
    FROM klakegg/hugo:0.85.0 as hugo
    
    WORKDIR /src
    
    COPY ./blog/ /src/
    
    COPY --from=node_modules /app/node_modules /src/node_modules
    
    # 生成静态文件
    RUN hugo
    
    # nginx web 服务器
    FROM nginx:1.19.7-alpine
    
    RUN  rm -rf /usr/share/nginx/html/*
    
    COPY --from=hugo /src/public /usr/share/nginx/html

FALLBACK

3.2 build docker 镜像

    docker build -t hugo-blog:1.0 .

FALLBACK

build 成功后截图

3.3 使用容器运行Hugo生成的静态文件

    docker run -it --rm -p 1313:80 hugo-blog:1.0

FALLBACK

浏览器访问 http://127.0.0.1:1313

查了下文档，打包后会使用baseUrl配置的地址

3.4 修改 config.toml 的baseURL 配置

文件路径 ：blog/config/_default/config.toml
改为 ：baseUrl = "/"

FALLBACK

重新执行 3.2 和 3.3

nginx 运行hugo静态文件到此成功。

如果部署到服务器直接使用build后的镜像或者在服务器上重新build（自行安装docker）

4，书写文章

hugo new posts/new-post/index.md

FALLBACK

更多用法，请参考官方文档。

使用Hugo搭建个人博客Mac+Docker

Hugo 是什么 ？

为什么选择Hugo ?

1，Mac 安装 Hugo & 基本使用

2，安装Hugo主题

3，Docker运行Hugo

4，书写文章

Hugo 是什么？