写作是每个软件开发人员都应培养的一项关键技能，而写作可以从创建自己技术博客开始，让我们看一下如何使用Hugo和Firebase免费地部署自己的博客，当然你可以使用GitHub，因为GitHub建立技术博客网站太常见，我们就不再进行讨论，或许你还可以在其他免费平台建立

Hugo是一个开源静态站点生成器，而Firebase是一个Google平台，提供用于增强Web和移动开发的资源与服务，通过Hugo和Firebase建立免费技术博客之前，我们建议你要先知道如何使用Git和终端教程。

作为开发人员拥有自己的技术博客可以为你带来很多好处。首先，撰写有关技术主题的博客可以使你学习原本在主要开发人员工作中可能没有得到的知识；再者当你研究自己的作品或尝试新事物时，最终会学到很多东西，例如如何使用新技术并解决边缘案例问题等；除此之外，当你与其他读者的评论互动时，可以比较专业回答与评价问题，也可以反馈自己的技术问题。

此外，由于在为技术博客构建实例项目需要编写大量代码，因此你会更加自信于软件开发技能。一个技术博客可以为你提供一个展示你的技能和专业知识的平台，可以增加你作为开发人员的能力，这为你提供各种机会，例如工作，演讲和其他会议参与，甚至可以作为副业，同时与其他开发人员的建立更多开发话题。

如果你使用的是macOS或Linux，则安装Hugo的最简单方法是使用Homebrew：brew install hugo。

而Windows系统可以直接下载安装即可。

要安装Firebase工具之前，需要安装Node.js才能访问npm：npminstall -g firebase-tools。

开始你的博客之路，用Google帐户免费创建一个Firebase帐户，在Hugo选择一个博客主题，选择主题之后，基本根目录都有配置问题，简单配置完成运行博客。

博客常用工具：

第一，Disqus，读者可以在帖子上发表评论。

第二，建议使用RSS。

第三，添加你的社交链接：比如Twitter，Github等。

第四，文章可以没有图片，但是一定要有摘要。

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，并保存。

当这些完成后，选择 CI/CD 目录，点击 Run Pipeline 进行重新运行。

等待运行完成之后，项目就会自动部署到 Firebase 了。

从此以后，我们只需要负责写文章就好，编译，部署都提交到 gitlab 服务器上进行。

总结 基本的 Hugo 如何建立一个网站，如何部署的教程已经完成。不同的主题设置不同，比如评论，阅读统计等，这些可以参考你选择的主题中的说明进行。

祝你也可以有一个自己的博客。

文章链接 [1]

Github: https://github.com/gohugoio/hugo/releases

[2] 主题: https://themes.gohugo.io/

[3] 官方: https://gohugo.io/getting-started/quick-start/

[4] firebase 官网: https://console.firebase.google.com

[5] node.js: https://nodejs.org/zh-cn/