欢迎来真孝善网,为您提供真孝善正能量书籍故事!

使用Hugo与GitHub Pages结合,实现个人博客搭建教程——博客方案篇之一

时间:10-28 现代故事 提交错误

大家好,今天小编来为大家解答以下的问题,关于使用Hugo与GitHub Pages结合,实现个人博客搭建教程——博客方案篇之一,这个很多人还不知道,现在让我们一起来看看吧!

我们来总结一下这次坑行的过程。本系列包括三个部分:

构建本地服务并将其发布到Github Pages。配置Github Action来实现CI/CD。本文是构建本地服务的第—— 部分。

为什么重建

2019年,我使用了leanote作为私人笔记服务,它可以让我直接将笔记发送到网页,免去了很多维护公众平台账户等杂务。然而个人网站带来的维护工作却让我变得繁琐,这违背了我使用leanote专注于写作的初衷。最终,个人网站被放弃。

今年我决定重新启动我的博客作为练习记录和写作的地方。

为了避免再次陷入泥潭,这次的笔记计划必须满足以下要求:

支持md,保证以后可以方便的迁移。托管源文件和站点文件的服务必须受到完全控制。该框架必须得到良好的社区支持。

框架选择

基于专注写作的愿望,WordPress 首先被排除在外,因为它太重了。抱歉,提供的管理服务太灵活,很分散注意力。我需要的博客引擎必须提供最简单的写作体验。

经过一番搜索,我发现了三个引擎:jekyll、hexo、hugo。这些是目前最受程序员欢迎的三个博客生成器。让我们对它们进行一个简单的比较。

对比维度JekyllHexoHugo 社区支持度(2022 年9 月25 日,github 星数) 45.3k35.4k62.5k 开发语言rubynodejsgo 编译速度(这里提供了585 篇文章的生成时间) 15.90s 两者之间4.90s Jekyll 有github支持,可以将markdown文件直接放入git仓库,github会自动生成网页文件。 (Github一直是亲Ruby的社区)Hexo提供了便捷的部署命令,一条命令就可以部署到Github上。 Hugo的官方文档写得很好,部署也很简单。前两者在部署时需要安装大量依赖,而hugo可以直接提供二进制文件运行,甚至不需要root权限。关于编译速度的差异,原因是Hugo是使用go语言开发的。 Go是一种编译语言,执行速度非常快。 Jekyll使用ruby,Hexo使用nodejs。两种语言都是解释型语言,执行效率比go低很多。而且nodejs比ruby更快。从上面的数据我们可以看到Hugo比Jekyll快了近10倍,这根本不是量级上的比较。

最终我选择了胡歌。虽然上手可能需要一段时间,但Hugo 几乎在所有维度上都成为了我的首选。

本地搭建

让我们开始雨果的探索之旅吧。

安装hugo

安装非常简单。我使用的是macOS,官方推荐使用homebrew。

brew install Hugo 完成后,可以使用以下命令进行验证:

Hugo 版本

创建站点

要创建新网站,您可以执行命令hugo new site 为博客命名。

image.png执行后会创建一个与命令中名称同名的文件夹,其中包含以下内容:

原型

默认.md

配置.toml

内容

数据

布局

静态

其中的主题

config.toml: 雨果配置文件

content: md 文件和html

static: 静态资源

主题: 个主题

其余的不用担心。

选择主题

Hugo没有默认主题,所以需要自己安装主题。我正在使用hugo-theme-cleanwhite。官网主题库:Hugo Themes

$ mkdir 主题

$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git theme/hugo-theme-cleanwhite 启动Hugo 服务器。您将看到主题生成的示例网站位于http://localhost:1313/

$hugoserve-thugo-theme-cleanwhite 或只是

只是雨果服务器。

配置hugo

配置文件为网站根目录下的config.toml。根据自己的需要进行修改。 Hugo-theme-cleanwhite主题下的exampleSite文件夹中的文件可供参考。默认文章将存储在./content/post 中。每当您写完一篇文章时,请运行hugo 命令。 Hugo会自动生成一个静态网站放入public文件夹中。我们只需要将文件夹的内容发布到互联网上即可。

主题的更多配置请参考hugo-theme-cleanwhite README.md

更详细的配置规则请参考Hugo官方文档

写作

您现在可以创建文章。执行命令hugo new post/hello-world.md会在content/post/下添加一个名为hello-world.md的文件。当我们修改了自动生成的头部部分后,我们就可以在下面写自己的笔记或者博文了。

---

title: "你好世界"

日期: 2022-09-25T16:00:21+08:00

类别:

- "博客"

标签:

-“雨果”

Draft: 正确

---

你好世界。

发布示例

本地部署

本地调试命令,执行它,可以通过http://localhost:1313地址直接访问本地预览网页。

Hugo服务器在本地发出命令并执行,在public/目录下生成一套完整的静态网站,可以直接复制到Web服务器上。

至此,Hugo本地解决方案的构建过程就完成了!

本作品由IvyWooo 根据Creative Commons Attribution-Noncommercial-ShareAlike 4.0 International License 获得许可。转载时请注明出处。

这篇文章的链接

OK,本文到此结束,希望对大家有所帮助。

用户评论

君临臣

看到Hugo了!我一直想试试这个!

    有17位网友表示赞同!

男神大妈

GitHub Pages配合,这个看起来就是一套完美的方案啊

    有8位网友表示赞同!

秘密

建站第九篇?你是技术狂魔吗?这篇文章要怎么深入呢?

    有16位网友表示赞同!

满心狼藉

用Action自动更新博客,是不是感觉超级酷炫?

    有13位网友表示赞同!

心贝

最近也打算换个博客平台,这个方案看起来挺吸引人的啊!

    有13位网友表示赞同!

颓废i

Hugo搭建个人博客,听起来很专业的样子。

    有17位网友表示赞同!

你是梦遥不可及

GitHub Action的应用越来越广泛了,这篇文章能带来更多启发性的内容吗?

    有9位网友表示赞同!

久爱不厌

分享一下这篇建站文章的链接吧!我想去看看。

    有10位网友表示赞同!

晨与橙与城

用Hugo搭建博客,速度应该很快吧?

    有17位网友表示赞同!

身影

个人博客的需求比较少,这个方案感觉很适合。

    有7位网友表示赞同!

自繩自縛

这个建站方案是不是对于小白来说有点复杂呢?

    有6位网友表示赞同!

强辩

期待看这篇文章的内容!分享一下你使用Hugo的经验吗?

    有8位网友表示赞同!

陌潇潇

GitHub Pages和Action结合起来确实是非常实用的技术组合,这篇博客值得一读。

    有18位网友表示赞同!

孤自凉丶

看来我得研究一下Hugo 和 GitHub Action 了!

    有10位网友表示赞同!

执笔画眉

个人博客的功能需求比较简单,这个方案应该可以轻松应对。

    有5位网友表示赞同!

半梦半醒半疯癫

对hugo了解不多,这篇文章能解释详细一些吗?

    有13位网友表示赞同!

遗憾最汹涌

有时间的话,我也想去试试搭建一个使用Hugo和GitHub的博客。

    有11位网友表示赞同!

淡抹丶悲伤

这个做法的安全性怎么样呢?

    有16位网友表示赞同!

幸好是你

希望能看到更多关于Hugo和GitHub Pages的使用案例分享。

    有20位网友表示赞同!

打个酱油卖个萌

你推荐使用什么主题框架呢?

    有9位网友表示赞同!

【使用Hugo与GitHub Pages结合,实现个人博客搭建教程——博客方案篇之一】相关文章:

1.蛤蟆讨媳妇【哈尼族民间故事】

2.米颠拜石

3.王羲之临池学书

4.清代敢于创新的“浓墨宰相”——刘墉

5.“巧取豪夺”的由来--米芾逸事

6.荒唐洁癖 惜砚如身(米芾逸事)

7.拜石为兄--米芾逸事

8.郑板桥轶事十则

9.王献之被公主抢亲后的悲惨人生

10.史上真实张三丰:在棺材中竟神奇复活