Back
Featured image of post 谁说男人不能快?Hugo 新手搭建指北

谁说男人不能快?Hugo 新手搭建指北

当然你是女生也能用。

初识 Hugo

Hugo 是一个静态网站的生成器,2013年问世。

Hugo 一般只需几秒钟就能生成一个网站(每页少于 1 毫秒),被称为“世界上最快的网站构建框架”,这也是我采用Hugo 而非 Hexo 的原因。

虽说 Hexo 扩展全,主题多,文档也不少,但是他每次写完文章渲染都要很长一段时间(可能是我太挑剔了哈哈)

而 Hugo,能在一秒内完成渲染,而且进入本地预览模式下,每次做的更改都不需要像 Hexo 一样重新退出 Hexo 预览模式 然后 Hexo g && Hexo s,只需要执行 Hugo server - D即可预览到每一个变化。

演示

不知道你们怎么想,反正我这个 Hexo 前用户是心动了💓


部署 Hugo

Hugo 的部署非常简单

安装

如果您是 Windows 用户,我推荐使用 Scoop 来安装 Hugo

scoop install hugo-extended

如果您是 macOS 用户,Brew 来安装就简单多了

brew install hugo

生成站点

首先先进入你想要的目录

cd /path/2/site

然后使用 Hugo 快速生成一个站点

hugo new site /path/to/site

这样就在你选择的目录生成了初始站点。

配置

Hugo 的默认配置是 .TOML 格式(也可以选择YAML,JSON)

有些主题(比如我正在用的 Stack )自带了配置文档,直接进入主题目录下的 exampleSite 将 config.toml 移动到根目录并替换即可。

开始创作

首先我们试试创建一个 about页面

hugo new about.md

about.md将自动生成,目录是 content/about.md,打开则会发现结构如下:

+++
date = "2015-10-25T08:36:54-07:00"
draft = true
title = "about"

+++

正文

自己照葫芦画瓢编辑即可。

创建第一篇文章,放到 post 目录,方便之后生成聚合页面。

hugo new post/test.md

打开文件可以看到结构

---
date: "2015-10-25T08:36:54-07:00"
title: "first"
draft: true
 
---

不同的主题结构下能指定不同的功能,看自己的主题的readme吧~

进入最终阶段

首先,进入站点根目录,执行

hexo server -D

进入本地的预览模式。

如果预览没啥问题的话,就可以部署啦!

进入文章,删除 draft: true,取消文档的草稿模式

然后开始生成文章的静态页面,直接执行

hugo

即可生成静态页面。

部署

我推荐的组合是 GitHub+Vercel 这个组合

第一是 拿Vercel 搭博客的人还不是很多,还没有被 GFW 看上来干什么污染,而且国内速度挺快(相比较其他而言)

另一个是 能够自带SSL,不用操心

最后是: 官网真的好好看啊!!!!

OK 不多说开始教程

首先呢你得有一个 GH 和 Vercel 账号

你的Vercel 不能是 QQ邮箱,QQ邮箱无法注册

前置操作

生成 SSH 密钥

首先打开终端,输入以下命令进入 .ssh 目录

$ cd ~/.ssh
# Checks to see if there is a directory named ".ssh" in your user directory

使用 ssh-keygen 生成密钥

$ ssh-keygen -t rsa -C "your_email@example.com"
# Creates a new ssh key using the provided email
Generating public/private rsa key pair.
Enter file in which to save the key (/home/user/.ssh/id_rsa):

直接 enter 跳过,使用默认的文件名,接下来显示

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

按照提示输入密码, 密钥生成成功之后会显示以下内容

Your identification has been saved in /home/user/.ssh/id_rsa.
Your public key has been saved in /home/user/.ssh/id_rsa.pub.
The key fingerprint is:
…………………此处是密钥内容…………………… your_email@example.com

设置 GitHub 中的 SSH keys

这里可以选择在用户设置中添加密钥(Settings –> SSH GPG keys)或者往单个项目中添加密钥。这里以用户设置中添加 SSH 密钥为例。

  • 向用户设置中添加:打开 github 首页,点击右上角的用户头像,选择 Settings 左边找到 SSH and GPG keys ,选择 New SSH key ,将 .ssh 目录下 id_rsa.pub 文件里的全部内容复制进去,点击 Add SSH key 完成密钥的添加。
  • 向单个项目中添加:打开 username.github.iorepository ,在菜单中选择 Settings -> Deploy keys -> Add deploy key ,后面的步骤和上面一样。

输入以下命令测试是否成功

$ ssh -T git@github.com

如果出现以下内容则表示配置成功

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

准备部署页面

先去 GitHub 新建一个 repo

GH

得到 ssh 账号

ssh

然后进入hugo 根目录下的 public 目录,打开终端

git init
git remote add origin 刚刚得到的 ssh 账号
git add -A
git commit -m "first commit"
git push -u origin master

这样你的文章就 push 到了 GitHub 里

正式部署

进入Vercel 的仪表盘界面

Vercel

选择右上角的 “Import Project”

Import

选择那个大大的 “Continue”

Deploy

粘贴你的repo地址,一路继续就行了

没其他问题的话,你会来到这个界面

main

至此,你已经完成部署了,要用自己的域名的话呢,点击头像旁边的 “Visit Domains” 即可。


小结

Hugo 的体验我还是很满意的,极快的生成速度,所见即所得的本地预览,快速的部署,都是他的加分点。

但同时,由于用户“似乎”没有Hexo 多导致的用户文档缺失(中文)和主题比较少,以及对我来说有点不知所云的配置文件,是他不如 Hexo 的地方。

但我还是选择了Hugo,毕竟

天下武功,唯快不破

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus