Hugo的使用

Hugo号称是世界上最快的构建网站的框架,我们可以简单的编写MarkDown文件,而通过Hugo进行渲染.由此便可以迅速地构建一个静态网站.此外,Hugo还有大量的开源主题,进一步地方便了开发者们.这次博客的搭建,我们就将使用Hugo

Hugo的安装

ubuntu下

1
sudo snap install hugo

Mac OS下

1
brew install hugo

注意你需要先安装好Homebrew,参见这里

创建项目

我们将通过Hugo搭建一个博客,域名为example.com

1
hugo new site example.com

此将创建一个目录,结构如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.
└── example.com
    ├── archetypes
    │   └── default.md
    ├── config.toml //网站的配置文件
    ├── content //存放所写文章
    ├── data
    ├── layouts
    ├── static //一些静态文件,可以用来存放图片,css,JavaScript文件等
    └── themes //存放主题,之后从网上下载的主题就存放于此

注意,创建完项目后再使用Hugo命令时,当前目录下必须要有配置文件,即config.toml,否则会报以下错误

1
2
Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
       Run `hugo help new` for details.

static引用时相当于根目录下的一个目录,比如引用static目录下的一张图片,直接写相对目录, 即/static/test.jpg

content可以理解为访问时网站的"根目录"

举例来说,我们创建了content/post/demo.md这个文件,网站运行时即可通过http://example.com/post/demo访问如果创建了content/index.md,网站运行时直接访问首页即是此文件

主题的配置

这里我们选用的是Even,如果你想要更多自定义的主题的话,请访问Hugo官方主题网页

下载主题

注意,执行命令时你应该在博客根目录下!

首先我们下载主题到theme目录下

1
git clone https://github.com/olOwOlo/hugo-theme-even themes/even

使用其配置文件

1
mv themes/even/exampleSite/config.toml .

编写文章

首先创建post文件夹,它将保存我们所有文章

1
mkdir -p content/post

在post文件夹下编写我们的第一篇文章,名称为demo.md

1
hugo new post/demo.md

查看此文件我们可以发现,Hugo会自动在文件上加上一些信息.此信息很重要,确保了它是否能正确渲染,请不要乱删!

1
2
3
4
5
---
title: "Demo"
date: 2021-03-01T11:29:55+08:00
draft: true
---

除了默认的参数,Hugo还提供了其它选项供我们使用

  • author 表示作者
  • categories 表示类别
  • tags 表示所属标签
  • draft 表示是否为草稿,可删

举例来说,下面是我的一篇文章的头信息

1
2
3
4
5
6
7
---
title: "Hugo & firebase"
author : "Jun"
date: 2021-03-01T11:06:32+08:00
categories : ["hugo"]
tags : ["hugo","firebase"]
---

测试运行

1
hugo serve

首先,Hugo会创建一个public目录,其中也就是它渲染的静态网页. 此后,Hugo会在本地开启一个服务,默认是http://localhost:1313/,浏览器访问这个链接即可,每次正式发布文章时可以首先在本地运行下.防止出错.

Firebase的使用

Firebase是谷歌开发的一个用于创建移动和网络应用的平台,通过它我们可以轻易地构建服务而不需要管后端的架构.

我们本次博客便部署在Firebase上面.为什么不使用Github Pages呢?我认为Firebase至少有以下几个优点:

  • 快.Firebase使用了谷歌云的CDN,相比与Github Pages国内缓慢的访问速度,我这里实测网站延迟不到90ms
  • 隐私.我们使用Github Pages需要新建一个公共的仓库,任何人都可以查看,而Firebase则可以直接上传后端
  • 廉价.Firebase本身提供了免费计划,对于个人站点绰绰有余,如果不够,官方也提供弹性收费,即用即付

注册帐号

由于Firebase为谷歌旗下产品,所以可以直接用谷歌帐号登录即可.接着我们创建一个新项目。

注意,创建过程中页面会默认生成一个 Project ID,我们也可以自己填写,它将决定我们的网站托管在 firebase 上的子域名,而且创建后就不能再修改。

命令行工具

Firebase提供了基于nodejs的命令行工具,我们将通过它使用Firebase的功能

安装

1
npm install firebase-tools

这里我们使用了npm,需要先安装nodejs,如果你没有安装,请看这里

Firebase授权

我们安装好了命令行工具后需要授权认证,这也好理解,不然Firebase怎么知道你是你呢?

1
firebase login

如果提示命令没有找到,请执行

1
npx firebase login

此后会打开一个链接,按照提示操作即可

有的读者反映会显示authorization Error,这主要是因为你的终端没有走代理. 请看这篇文章的末尾,使用proxychains便可解决。

初始化并关联项目

切换到博客根目录,执行

1
firebase init // 或者 npx firebase init
  1. 我们安装提示,选择Hosting: Configure and deploy Firebase Hosting sites
  2. 关联此前创建的项目
  3. 他会询问是否使用public目录,What do you want to use as your public directory? (public),回车即可

经过上述操作Firebase会生成一个json文件,它应该在你的博客根目录下,也就是和config.toml同级,如果不是则说明你的操作有误,没有在博客根目录下init

部署上传项目

1
hugo && firebase deploy  //或者 hugo && npx firebase deploy

此后便会上传我们的项目至Firebase,我们按照提示便可以访问

自定义域名

Firebase 默认会给我们分配一个二级域名,但我们可能会想使用自定义的域名,操作如下

添加域名

点击这里,根据提示添加你的域名,我的建议是先添加一个www.example.com,再添加一个顶级域名example.com,接着让顶级域名重定向到www上,这对我们的SEO有好处

验证所有权

我们需要为我们的域名做一个TXT记录,通过它,Firebase可以验证我们对域名的所有权,再此不做详细说明,按照提示在DNS提供商添加记录即可.

上线

返回域名提供商的 DNS 管理网站,创建 DNS A 记录,从而将网站指向 Firebase 托管.

对于我们来说,要分别为顶级域名和一个www二级域名做两条A记录

  • 对于www二级域名,第一栏填www,值填FIrebase为我们分配的IP

  • 对于顶级域名,第一栏不填或填@,值填FIrebase为我们分配的IP

    最后等待解析生效,这个时间根据DNS提供商而异.此外FIrebase还会为自动为我们分配一个ssl证书,这个过程可能比较漫长,需要我们耐心等待.在生效前访问网站均会显示隐私错误,忽略即可.