
前言
关于本主题的使用文档,参考了 LoveIt 和 MemE 主题。在阅读过程中如果有不太明白的地方,一定要用好你的浏览器,如果你是懒或是忘了的话,在这可提醒你一次了。话不多说,操作起来。
安装
不同的操作系统,安装方式可能有所不同,以下的操作都是在 macOS 上完成的。对于其他操作系统,请查看 Hugo 的安装。
安装 Hugo
NewBee 主题由 Hugo 引擎驱动,Hugo 是一个快速而现代的静态网站生成器,由 Go 语言编写。
对于 Mac 系统,Hugo 官方使用的是 Homebrew 或 MacPorts 来安装,如果你电脑里没有,请先下载一个。详情请移步:Hugo在macOS上的安装
::: tabs
@tab Homebrew
|
|
@tab MacPorts
|
|
:::
安装后验证一下是否安装成功,命令行输入:
|
|
如果输出结果类似这样:
|
|
则安装成功。
安装 NewBee
创建一个新项目,首先,创建一个目录作为你的博客根目录,示例目录文件名为: my-blog
。Hugo 提供了通过new site
命令来快速创建网站的方法:
|
|
得到以下文件(文件的位置取决于你执行命令时所在的目录):
NewBee 主题的仓库是:https://github.com/xioyito/NewBee,有以下 2 种方法来安装 NewBee 主题:
::: tabs
@tab 方法1
下载主题最新版本的 .zip 文件,解压后放到themes
目录。
@tab 方法2
把主题克隆到themes
目录:
|
|
:::
开始
Hugo 和 NewBee 都安装完毕后,就可以开始我们博客的 “Hello World” 了。
替换 hugo.toml
进入themes/NewBee/config-example
目录,复制hugo.toml
文件,替换掉my-blog/hugo.toml
文件。
新建文章
|
|
你可能需要一个关于页面,所以:
|
|
文章内容使用 Markdown 编辑,关于 Markdown 基本语法,请参考:Markdown 教程
启动本地服务器
|
|
浏览器打开:http://localhost:1313/,这就是我们网站的首页了,你可以快速预览网站效果。
tip 1. 当你运行hugo server -D时, 如果文件内容更改, 页面会随着更改自动刷新。
2. hugo server -D和hugo server的差别:后者不会渲染前置参数draft: true的文章,这意味着在预览网站时你不会看到这篇文章的任何信息。
语法高亮样式
hugo 查找文件的方式是这样的:先查找网站根目录my-blog
下有没有该文件,如果没有,再查找my-blog/themes/Newbee
下的。所以,理论上根目录下的任何文件都能覆盖掉主题文件下的对应文件。自定义时,建议在根目录下进行,而不是直接对主题文件进行修改,以免出错。
Hugo的语法高亮基于 chroma,并提供了足够的样式风格供你选择。如果NewBee主题默认的高亮样式不适合你,你可以参照如下方式修改:
先进行以下操作:
|
|
这样可以得到一个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
。
生成静态页面文件
|
|
这个命令会在根目录下生成一个public
目录, 其中包含你网站的所有静态内容和资源.
warning 在生成静态页面之前要把
hugo.toml
文件中的baseURL
修改为自己博客的网址:https://你的Github账号名.github.io
。
部署到Github
进入public
文件夹,使用 git 上传文件。
|
|
以后更新文章的时候,同样是用 hugo 生成新的页面文件,git 上传文件。
|
|
tip 上传文件到 Github 时,可能会出现和 git 的使用相关的问题,请自行百度解决。
等一会儿,就可以打开我们的网站了:https://你的Github账号名.github.io
。
tip 等待的时长和你的网络状况有很大关系。
避坑指南
一定要看这篇文章:避坑指南
