如何在 BlogHub 快速创建你的网站

受到赛博硬壳委托,使用 BlogHub 发布他们的网站。正好以此为例,写篇文章,希望对你快速启动自己的博客或站点有帮助。

创建预览博客

访问并登入 BlogHub 控制台,点击申请博客,BlogHub 立即创建了一个预览博客,并可以通过自动分配的二级域名 *.bloghub.io 访问。

点击文件,预览博客的文件结构如下,其实就是一个典型的 Hugo 项目。

只保留 themes 目录

你没有看错。

接下来我们依次点击各个文件(夹)右侧的 ··· 按钮,删除/themes 外所有其他目录, 只保留 /themes

(当然你也可以全部删除再自行新建一个 /themes。)

最终应该如下图所示:

上传主题到 BlogHub

首先在 Hugo 官方主题库挑选心怡的模板,当然你也可以通过搜索引擎查找更多 Hugo 主题。

这里我们以官方主题库的 meghna 为例,点击 Download,然后在该主题的 GitHub 页面,点击 Code 按钮,选择下载 ZIP 压缩包。

回到 BlogHub,进入 /themes 目录,/themes 文件夹内点击右上角的操作,点击上传压缩包,选择刚才我们下载的 ZIP 压缩包。BlogHub 会将主题自动解压到当前文件夹。

需要注意的是,从 GitHub 下载的压缩包内目录为分支名而不是仓库名,一般会带有一个 “master“ 字样,这不是我们想要的。点击右侧的 ··· 按钮,我们将它重命名去掉。

应用 exampleSite

大多数规范的 Hugo 主题内置有一个 exampleSite 目录,里面提供了完整的示例站点,配置、插件、内容都有必要的演示,我们直接使用它来作为起点。

exampleSite 文件夹移动到根目录 /

退回根目录的配置文件,例如这里是 /config.toml,检查这里的 theme 名称是否与刚才的主题文件夹名称一致。

需要修改的是主题目录 themesDir,由于我们移动了 exampleSite 文件夹改变了相对位置关系,这里也要把 themesDir../.. 修改为 themes

点击保存并发布,如果上述操作都正确,你已经可以在二级域名下看到自己的网站。

恭喜,你已经成功在 BlogHub 创建了自己的网站。通过这种方式,你可以体验到 BlogHub 独有的优势:

  • 无需运维服务器、数据库等云资源,极低的运维成本;
  • 随时随地查看并一键发布内容,不要求手边有开发环境;
  • 获得一个真正属于你自己的网站,具有完全的自定义能力。

至此,你的网站有了一个良好的基础。通过更多学习,你才能彻底掌握它,这不是本文的重点,所以后文将会变得简略。

编辑文章与页面

了解了 Markdown 语法以后,你可以编辑 /content 文件夹下的内容,试着修改文章与页面。大胆去做吧,其实这很简单。

参照已有 MD 文件的格式,新建 MD 文件并填写差不多的内容,你就学会了创建文章与页面。

更多设置

参考 BlogHub 文档与你正在使用的主题的说明,通过 BlogHub 控制台与根目录下的配置文件,能够更细致地配置好你的网站。

例如使用自定义域名,并配置页面上的内容。

深入定制

学习 Hugo 的文档掌握原理,你对自己从 BlogHub 发布的网站拥有 100% 的自定义能力!

寻求帮助

对于有经验的用户,在博客发布时,可以通过浏览器调试工具捕捉相关网络请求,并在响应里得到故障的技术细节。

或者,在 BlogHub 用户群直接沟通。

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