用 Hugo 和 Firebase 建立自己的博客

关注

原创最新推荐文章于 2026-11-11 21:05:08 发布 687 阅读 AI 写同款· GEO 优化 ›

WordPress技术架构解析与现代替代方案实战指南最近在技术圈看到不少关于"WordPress已被淘汰"的讨论，作为一个从WordPress 3.0版本就开始接触的老用户，我想从实际项目经验出发，客观分析WordPress在当前技术环境下的真实定位。本文不仅会探讨WordPress的局限性，还会分享我们团队在实际项目中遇到的性能、安全、二次开发等具体问题，以及最终选择的技术替代方案。 1. WordPress的技术架构与历史地位 1.1 WordPress的核心架构解析 WordPress基于经典的LAMP（Linux+Apache+MySQL+PHP）技阅读详情

点击蓝色字关注我们！

一个努力中的公众号

长的好看的人都关注了

之前就一直有人问我，“博主啊，你的博客是怎么搭建的？能不能出一个教程呢？”

每次我都是将我所用的关键技术告诉他，按道理将这些搭建博客的技术网上的文章应该有很多很多了。但是我还是打算自己写一下教程，方便更多的人来进行学习和搭建博客的使用。

Hugo

目前,我的博客由之前的 Hexo 迁移到 Hugo，Hugo 无论是安装，配置还是部署个人感觉都比 Hexo 方便太多了。Hugo 的安装仅仅需要一个安装包。可以在 Github^[1] 上找到你的对应版本，进行安装。

Hugo 是有 Go 语言写的，从 markdown 渲染 html 的速度很快。自称为 世界上渲染网站最快的框架。另外 Hugo 也有很多的主题^[2]，可以供我们选择。

安装

安装完记得将 Hugo 添加到环境变量中。在终端进行 hugo version 进行验证是否安装正确。

是的，安装就是如此的简单，官方提供了其他安装方式，你可以选择官方^[3]提供的方式。

建站

通过 Hugo 的命令我们可以快速生成我们的网站。你可以选择你喜欢的地方来执行下面的命令。

hugo new website your_website_name

这样就建立了新的站点。

此时我们的新站点无法启动。需要安装主题，你可以选择你喜欢的主题。

这里我随便搜索了一个主题进行安装。

cd themes
git clone https://github.com/vividvilla/ezhil.git

安装完成后，在根目录中 config.toml 进行配置，填写主题名称。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ezhil"

在根目录下使用 hugo server 进行项目启动。

此时我们的网站已经启动，可以看到我们的页面。

新建文章

我们执行 hugo new posts/Hello.md 我们将文章统一存放到 posts 目录下。posts 目录会新建到 content 目录下。

对 Hello.md 进行编辑。

---
title: "Hello"
date: 2019-10-12T22:15:50+08:00
draft: true
---

# Hello Hugo

这是 Hugo 的第一篇文章。

其中有着 draft 选项。当 draft 为 true 的时候，默认是不会渲染的。我们可以将 draft 改为 false ，或者在渲染启动时候添加参数 hugo server -D 就会渲染。

这样我们就已经安装完成了 Hugo。更多的主题配置可以参考当前主题的 themes/${name}/exampleSite/config.toml 。

生成静态页面

在项目根目录下直接使用 hugo 命令，会生成 public 目录，该目录下都是关于我们的 markdown 编译完成的 html 静态页面。

部署

博客已经安装完成，并且本地已经测试完成，文章也已经写好了。那么就该部署了。

部署到哪里呢？

之前我喜欢放到 Git Page ,但是我发现了更好的地方 Firebase。Firebase 上有 Hosting，每个月都有免费的流量和空间使用，对于个人来说，足够使用了，并且可以配置个人域名等，版本控制。

使用 Firebase 是稍微有点门槛的，大陆无(ti)法(zi)直接使用。

建立 Firebase 项目

首先登录 firebase 官网^[4]，登录账号后新建一个项目。

Firebase CLI 安装

首先确保本地有 node.js^[5] 环境。设置终端代理。

set http_proxy=http://127.0.0.1:1080

set https_proxy=http://127.0.0.1:1080

set http_proxy_user=user
set http_proxy_pass=pass

set https_proxy_user=user
set https_proxy_pass=pass

设置完代理之后就可以安装我们的 cli 了。

通过 npm 进行安装 npm install -g firebase-tools 这样就完成了安装。

安装完成后首先是登录。firebase login 进行登录，会打开浏览器进行授权。这个过程使用全局代理，否则有可能无法验证通过。

在项目的根目录下执行 firebase init 。选择 Hosting，通过空格进行确认。

之后选择 Use an existing project。从项目列表里找到我们刚刚创建的项目。回车继续。下一步是询问是否使用 public 目录。这里直接回车就好。因为 public 目录就是我们要进行部署的文件。

是否要重写 index.html ，这里可以选择不重写。

这样我们的项目就已经安装创建完成。

完成了创建，那么下一步就是要部署。

部署到 firebase 上

通过命令 firebase deploy 就可以将我们的编译后的网页部署到 firebase 上去。

执行完成后下方会告诉我们项目控制台的地址和项目地址，我们可以打开项目地址进行项目的查看。

但是，当我们打开项目的时候，发现上面没有样式。通过浏览器控制台可以看到样式文件并没有被请求到。

这里需要我们手动设置一下。

打开项目的 config.toml 文件，第一行的 baseURL 进行修改，将它修改为我们 firebase 给的网站地址。

重新进行 hugo 和 firebase deploy。刷新页面后，可以看到我们的网站已经有了样式，重新部署到 firebase 上了。

集成 CI/CD

话说，每次写完文章都要来一串命令，很费事，也容易出错。所以我们可以集成 CI/CD 来进行部署。

这里我选择了 Gitlab 自带的 CI/CD 功能。方便快捷。

通过命令 firebase login:ci 进行重新登录授权，此时授权完成之后就会在终端上出现一行 token。

请把 token 保存好。

在项目根目录建立 ci/cd 执行文件,命名为 .gitlab-ci.yml。粘贴下面的代码。

image: nohitme/hugo-firebase
before_script:
  - hugo version
  - firebase --version
hugo_firebase:
  stage: deploy
  only:
    - master
  except:
    - dev
  script:
    - rm -rf public
    - hugo
    - firebase deploy --token ${FIREBASE_TOKEN}

将项目上传到 gitlab 上。打开项目设置，找到 CI/CD 目录。在 Key 的位置填入 FIREBASE_TOKEN ，在 Valeu 中填入我们刚刚记下的 Token，并保存。