前言

关于本主题的使用文档，参考了 LoveIt 和 MemE 主题。如果你在使用过程中有任何问题，可以在 Issues 提问¹。

在阅读过程中如果有不太明白的地方，一定要用好你的浏览器，如果你是懒或是忘了的话，在这可提醒你一次了。话不多说，操作起来。

安装

不同的操作系统，安装方式可能有所不同，以下的操作都是在 macOS 上完成的。对于其他操作系统，请查看 Hugo 的安装。

安装 Hugo

NewBee 主题由 Hugo 引擎驱动，Hugo 是一个快速而现代的静态网站生成器，由 Go 语言编写。

对于 Mac 系统，Hugo 官方使用的是 Homebrew 或 MacPorts 来安装，如果你电脑里没有，请先下载一个。详情请移步：Hugo在macOS上的安装

::: tabs

@tab Homebrew

1

~ % brew install hugo

@tab MacPorts

1

~ % port install hugo

:::

安装后验证一下是否安装成功，命令行输入：

1

~ % hugo version

如果输出结果类似这样：

1

~ % hugo v0.91.2+extended darwin/amd64 BuildDate=unknown

则安装成功。

安装 NewBee

创建一个新项目，首先，创建一个目录作为你的博客根目录，示例目录文件名为: my-blog。Hugo 提供了通过new site命令来快速创建网站的方法：

1

~ % hugo new site my-blog

得到以下文件（文件的位置取决于你执行命令时所在的目录）：

NewBee 主题的仓库是：https://github.com/xioyito/NewBee，有以下 2 种方法来安装 NewBee 主题：

::: tabs

@tab 方法1

下载主题最新版本的 .zip 文件，解压后放到themes目录。

@tab 方法2

把主题克隆到themes目录：

1
2

~ % cd my-blog
my-blog % git clone https://github.com/xioyito/NewBee.git themes/NewBee

:::

开始

Hugo 和 NewBee 都安装完毕后，就可以开始我们博客的 “Hello World” 了。

替换 hugo.toml

进入themes/NewBee/config-example目录，复制hugo.toml文件，替换掉my-blog/hugo.toml文件。

新建文章

1

my-blog % hugo new "posts/first-post.md"

你可能需要一个关于页面，所以：

1

my-blog % hugo new "about/_index.md"

文章内容使用 Markdown 编辑，关于 Markdown 基本语法，请参考：Markdown 教程

启动本地服务器

1

my-blog % hugo server -D

浏览器打开：http://localhost:1313/，这就是我们网站的首页了，你可以快速预览网站效果。

tip 1. 执行hugo server -D后，网站的首页不一定在1313端口上，得看命令执行后终端（控制台）给出的具体信息。

2. 执行hugo server -D后, 如果文件内容更改, 页面会随着更改自动刷新。

3. hugo server -D和hugo server的差别：后者不会渲染前置参数为draft: true（draft是草稿的意思）的文章，这意味着在预览网站时你不会看到这篇文章的任何信息。

自定义样式

hugo 查找文件的方式是这样的：先查找网站根目录my-blog下有没有该文件，如果没有，再查找my-blog/themes/Newbee下的。所以，理论上根目录下的任何文件都能覆盖掉主题文件下的对应文件。自定义时，建议在根目录下进行，而不是直接对主题文件进行修改，以免出错。

一般样式

如果你想更改某些样式，只需要在 my-blog/static/css 目录里创建一个文件 custom.css ，然后在里面加入你自己的样式即可。

语法高亮样式

Hugo的语法高亮基于 chroma，并提供了足够的样式风格供你选择。如果NewBee主题默认的高亮样式不适合你，你可以参照如下方式修改：

先进行以下操作：

1

~ % hugo gen chromastyles --style=你喜欢的样式名称 > syntax.css

这样可以得到一个syntax.css文件，文件的位置取决于你执行上述命令时所在的目录，然后将其复制到my-blog/static/css文件夹下即可。一般情况下不用再对其进行修改，当然也不是不可以，这完全取决于你的心情。

如果你还想把深色模式下的语法高亮样式也更改了，操作同上面一样，只要在命令行操作时把syntax.css换成syntax-dark.css即可。

tip 如果语法高亮有显示问题，对syntax.css进行修改就行，深色模式则修改syntax-dark.css。

部署

一切准备就绪后，是时候把我们的网站放到网络上了。你可以使用 Netlify、Render、Firebase、Github 以及更多。下面简要介绍部署到Github的过程，更多方式请移步 部署和托管。

准备

在 Github 上的部署，我们需要用到 Github Page，它是 GitHub 提供的一个网页寄存服务，可以寄存静态页面，非常适合博客的搭建。首先在自己的 Github 账号里创建一个 Repository（仓库），命名为你的Github账号名.github.io，例如我的仓库名xioyito.github.io。

生成静态页面文件

1

my-blog % hugo

这个命令会在根目录下生成一个public目录, 其中包含你网站的所有静态内容和资源.

warning 在生成静态页面之前要把hugo.toml文件中的baseURL修改为自己博客的网址：https://你的Github账号名.github.io。

部署到Github

进入public文件夹，使用 git 上传文件。

1
2
3
4
5
6

my-blog % cd public
public % git init    # 初始化仓库
public % git remote add origin https://github.com/你的Github账号名/你的Github账号名.github.io.git    # 链接远程仓库
public % git add .
public % git commit -m "first commit"
public % git push -u origin master

以后更新文章的时候，同样是用 hugo 生成新的页面文件，git 上传文件。

1
2
3
4
5

my-blog % hugo
my-blog % cd public
public % git add .
public % git commit -m "first commit"
public % git push

tip 上传文件到 Github 时，可能会出现和 git 的使用相关的问题，请自行解决。

等一会儿，就可以打开我们的网站了：https://你的Github账号名.github.io。

tip 等待的时长和你的网络状况有很大关系。

避坑指南

一定要看这篇文章：避坑指南