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

祝你也能够有一个本身的博客。

公众号

我的公众号 代码猎奇站