Hugo 配合 Gitlab,Firebase 搭建属于自己的博客

原文首发于 ISLAND

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

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

Hugo

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

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

安装

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

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

建站

通过 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 官网，登录账号后新建一个项目。

Firebase CLI 安装

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

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 如何建立一个网站，如何部署的教程已经完成。不同的主题设置不同，比如评论，阅读统计等，这些可以参考你选择的主题中的说明进行。

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

公众号

个人公众号 代码猎奇站