主页
文章
分类
系列
标签
关于
快速开始
发布于: 2022-4-21   更新于: 2023-11-26   收录于: web
文章字数: 2196   阅读时间: 5 分钟   阅读量:

前言

关于本主题的使用文档,参考了 LoveItMemE 主题。如果你在使用过程中有任何问题,可以在 Issues 提问1

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

安装

不同的操作系统,安装方式可能有所不同,以下的操作都是在 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

得到以下文件(文件的位置取决于你执行命令时所在的目录):

hugo-content

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 -Dhugo 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

部署

一切准备就绪后,是时候把我们的网站放到网络上了。你可以使用 NetlifyRenderFirebaseGithub 以及更多。下面简要介绍部署到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 等待的时长和你的网络状况有很大关系。

避坑指南

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


  1. 提问之前请先看完主题文档。 ↩︎