如何与Hugo和Cloudflare建立博客,以及为什么要这样做

2022-02-20 08:45:56

互联网已经不像以前那么好了。信息被储存在Facebook、Nextdoor等有围墙的花园中。谷歌搜索结果充斥着搜索引擎优化垃圾邮件。Wordpress是一个烂摊子,它通过惯性不断地发出嘎嘎声;中等,虽然干净,但在付费墙后面;Reddit和Twitter越来越多地将其价值隐藏在注册和/或付费墙背后;如果你想获得报酬,Substack是可以接受的,但它是另一家商业企业,在繁荣时期将文章离线。像Geocities这样的早期简易网页建设者强调了链接腐烂的问题:当资金耗尽时,大量网站可能会从网络上消失。

具有讽刺意味的是,旧媒体公司在网上保存档案方面比大多数公司做得更好,尽管它们也(可以理解)走上了付费墙的道路。2022年,信息显然想要商品化。事实上,在2022年,信息正被内容扼杀。早在21世纪初,我们就认为博客会颠覆传统媒体。事实证明,在这个过程中的某个地方,正是网络广告做到了这一点。在线广告生活在内容中。

“内容”一词被如此广泛地使用,这一事实证明,营销的思维方式已经深入到我们大脑的最深处(“天哪,鲍勃,你一定能制作出一些精彩的内容”)。内容是填充物。内容平淡无奇。内容是货币化的。创建一个博客来讲述故事,分享想法、观点和信息,或者展示照片、视频、歌曲和你创作的东西。不要创建内容。做一个真正的人类博客。

通过创建博客和分享一些真实的东西,你可以成为你想看到的变化的一小部分。不要把想法发布到一个封闭的平台上,考虑创建一个运行在开源技术上的博客,并把它放在一个易于使用的平台上,这个平台有一个慷慨的免费层(这是微不足道的,如果它成为一个问题就可以移动)。一定要在社交媒体上分享自己的博客帖子;毕竟,这会让你的网站更有可能被搜索引擎很好地索引,你的帖子也会出现在搜索结果中。不过,不要让读者和搜索引擎优化操心,因为这会把博客变成一份工作。保持它的乐趣。(请不要在你的博客上显示广告!)

在本文中,我将介绍一种使用Hugo、Git和Cloudflare构建博客的方法,除了每年的域名注册费之外,您还可以免费(即不按月收费)托管该博客。我不打算在这里解释git(因为它不在本文的讨论范围内),但你可以复制/粘贴我正在做的事情,并搜索有关如何使用它的更多信息。我将深入介绍Hugo,以便您可以建立一个类似于媒体的博客,并详细介绍Cloudflare的设置。我会给你所有的命令,你需要运行,以获得一个网站上发布的博客文章在互联网上,但要从中受益,你需要至少适度的技术,尤其是不要害怕使用终端OSX或Linux上。按照下面的5个步骤,你的第一篇帖子将在30分钟内直播(或退款)。

如果你想要一个使用Hugo创建新博客帖子的预览,请跳到下面的第5节,如果这听起来像是你可以处理的事情,请回到这里。(除此之外,一切都很有趣,再见。)

首先,您需要Cloudflare和Github上的帐户,所以请先获取它们:

为了这个例子,我们将使用Cloudflare注册域,但是使用哪个域注册器并不重要。如果您在另一个注册器上,则需要按照以下步骤之一进入Cloudflare的域服务器,以便连接主机。如果您使用的是Cloudflare,那么将域与页面关联起来会更顺畅一些。

Cloudflare的搜索相当智能,所以你可以输入一个或多个单词,它会找到概念上附近的可用域。为了这篇文章,我注册了Tantalizingslot。赢,每年3.16美元,之后每年续约4.16美元。(请注意高昂的续费,尤其是使用Godaddy或Name便宜等欺诈注册商时。)

Hugo官方网站上有很好的初始设置文档,我将在这里总结:

根据您的平台,选择以下选项之一。(如果你是mac用户,而且这些东西对你来说都是新的,那就用自制软件吧)。

#对于mac(如果你喜欢macports,请查看https://guide.macports.org/#installing)port install hugoport install git#for mac(如果您喜欢自制软件,请查看https://docs.brew.sh/Installation)brew安装hugo brew安装git#对于ubuntuapt安装hugoapt安装git

现在我们将让Hugo为该站点设置初始目录结构。显然,用你的网站名称替换TantalizingSlot;如果你用你的域名来命名这个网站,这是最简单的,但严格来说你不必这么做。运行以下命令:

这将创建一个带有您指定名称的目录,以及其中的一些初始文件和目录。如果你愿意的话,可以四处看看,但在接下来的几个步骤中,我会为你指出你需要的一切。

现在我们需要获取并安装一个主题。很多Hugo文档都会指导您将主题作为git子模块安装,但我们不会在这里这样做,因为它会以令人困惑的方式破坏Cloudflare。相反,我们只需克隆主题,从中删除git元数据,并将其直接包含在我们的网站中。(这意味着,如果你想在将来应用主题更新,你就必须重新克隆,并复制到你的站点中。我把主题视为构建和破解的基础,所以我很好地用这样的方式暗示了“叉”。如果这些括号对你没有意义,不要担心。25分钟或以下的博客文章。

请注意,在某种程度上,您可以在主题之间切换,但在预期的文件布局、属性等方面,主题之间存在差异,因此它们不是100%兼容的。最好先用一两篇帖子来尝试不同的主题,然后在整个网站上坚持下去。我在这里安装了新闻编辑室,这是一个相当干净的主题。如果你选择了一个不同的主题,而有些东西的工作方式与我在下面描述的不一样,请查阅主题的文档以获取更多信息(或者使用新闻编辑室只是为了启动和运行)。

#首先获取新闻编辑室的副本,并删除git metadatacd/tmpgit克隆https://github.com/onweru/newsroom.gitcd新闻编辑室。git exampleSite i8n#然后将主题(新闻编辑室)移动到我们的网站cd~/tantalizingslot#如果没有';在MV/tmp/newsroom themesmkdir static/images上找到你创建网站时所在的位置

因此,你的博客文件夹结构中应该有主题/编辑室。

显然,baseURL和标题应该适合你的博客。如果你安装了一个不同于新闻编辑室的主题,那么就把它设置为主题(如果你以后再使用主题,你只需要在这个配置文件中切换主题并重建网站;不过记住我上面的警告)。在这里阅读相关和丑陋的url设置。我发现这种组合最适合在本地模式和实际发布的站点上运行,而默认设置会导致混乱的行为。你可以稍后再尝试。

接下来,我们将在本地初始化git存储库(意思是:我们将告诉git开始跟踪您的博客文件),然后使用git将存储库上载到Github。过一会儿,我们将连接Cloudflare,以便在您将更改上传到Github时进行检测,这将触发他们的软件发布您的博客。

#仍然在你的博客文件夹git initgit add*git status#show what';s";已更改";,考虑到这是一个全新的git commit-m";建立新的博客";

现在转到Github,创建一个新的存储库,最好与Hugo站点的名称匹配。为此,在Github中:

如果你知道你在用SSH做什么,就用它。否则,单击HTTPS并复制url,该url应该类似于https://github.com/yourname/tantalizingsloth.git.我将按照这里的HTTPS说明保持较低的标准。暂时将url粘贴到文本编辑器中。如果您使用的是HTTPS,请按照链接的说明获取个人访问令牌(您只需选中“回购”复选框)。复制并粘贴令牌,并将其安全地存储在计算机上。你总是可以制造额外的代币,所以如果你失去了它就不是世界末日。

#将url替换为Git remote add origin上获得的HTTPS urlhttps://github.com/yourname/tantalizingsloth.gitgitbranch-m maingit push-u origin main#出现提示时,输入您的个人访问令牌,而不是密码

现在,如果单击返回Github主页,您将看到刚才推送到它的存储库。不要担心一些空目录不存在;几分钟后,当我们添加第一篇帖子时,他们就会出现。

现在我们要设置Cloudflare。有几个组件需要连接在一起。一旦完成,所有这些都会自动工作,所以这只是一次设置。点击次数很多,但这里没有太多毛茸茸的东西。

点击网站。如果您在Cloudflare中注册了您的域,那么您应该会看到列出的站点,您可以继续下一步。如果您在其他地方注册了域,请单击“添加站点”,然后按照说明将域注册器配置为指向Cloudflare。

这有点令人困惑。在Cloudflare上,网站大致相当于域。网页是网站实际托管的地方。希望Cloudflare将来能减少这些分离。

创建一个项目如果你没有看到你的存储库列表,点击表单底部附近的Cloudflare页面链接(我们将存储库设置为“私有”,所以Cloudflare还看不到它)。这将带您到Github这里有一个bug,当您在Github中单击“保存”时,它会带您回到Cloudflare主页。但是,您之前在Cloudflare中填写的表单位于不同的浏览器选项卡中。单击返回该选项卡,您应该会看到存储库列表刷新,以包括您刚刚授权的存储库列表。如果您在这里迷路了,只需回到4b的起点,您应该会看到这次列出的存储库。

在设置构建和部署屏幕上:Framework Preset-none(你可能会在这里选择“Hugo”,但Cloudflare只支持Hugo主题的一个子集;我们将在本地构建博客,每次只推原始HTML,这将让我们可以自由地尝试任何主题)

Build output directory-public(这告诉Cloudflare在git存储库中查找网站内容的位置)

忽略开始的构建。现在它不会特别有用。

设置自定义域如果使用外部注册器,请按照Cloudflare提供的说明操作;否则单击激活域

提交表格后,有时它会进入错误的状态;如果是,请刷新页面

几分钟后,域应更改为“活动”(如果使用外部注册器,则需要更长时间)

祝贺给自己击掌。我们已经完成了所有的设置。让我们去创建一个真正的博客帖子!

举个例子,我的第一篇帖子将以greatsloth这个名字为基础创建文件——纯粹是作为一种组织工具。把它换成任何符合你需要的东西。我喜欢将文本文件的名称与博客帖子中的图像名称保持关联,以便将来更容易管理它们(例如,我想删除博客帖子并删除相关图像)

首先,找到一些你想在帖子中使用的图片,并将它们移动到Hugo希望图片所在的文件夹,即static/images。你可以使用子目录来保持有序——只要确保在下面的步骤中调整URL,如果你这样做的话。(当然,你也可以在写文章时添加更多图片。)

我们将启动Hugo,这样你可以在编辑时预览你的网站。在你写文章的时候让它继续运行。

此命令在content/posts文件夹中创建一个文件供您写入。在新的终端窗口(并已导航到博客目录)中运行:

在content/posts/greatsloth上打开文本(或标记)编辑器。md.首先,我们将更改帖子的属性(请注意,雨果已经为您制作了大部分内容):

现在打开浏览器选项卡http://localhost:1313你应该看到你的帖子列表。进步

返回文本编辑器,在标题下方(即底部,最后三条破折号下方)书写:

#这个懒惰真的很棒。我钦佩她。[了解更多信息](https://lmddgtfy.net/?q=great%20sloth)##和熊相比!这是一只熊。它';它不如树懒好。

刷新浏览器以查看它的作用。你会用降价法写文章;我已经使用了一些您可能最想使用的功能作为快速示例。比较你在浏览器中看到的内容和上面的语法。

继续写你的帖子,直到你满意为止。完成后,我们将向全世界发布该网站。

这会在公用文件夹中构建站点的静态版本,即使用设置的主题呈现帖子,并创建连接页面。每次你想发布时都要运行它,因为Cloudflare将从你的域中提供公共内容。

git status#可选,但良好的实践git add*git commit-m";一篇关于树懒的帖子";git推送源主

(如果忘记了“个人访问令牌”,请转到第3节,制作一个新的令牌,然后再次尝试git push命令。如果这很烦人,请学习如何将SSH与Github结合使用。)

现在你完成了。在大约5分钟内,你的帖子将自动出现在你的网站上。

如果你想弄清楚为什么有些东西没有发布(或者想看一篇新帖子被发布):

在所有部署下,您应该在状态列中看到标记为“正在进行”的生成

在主题目录下浏览以调整总体布局。在变得太粗糙之前,请阅读主题文档,因为他们可能会对如何组织更改提出建议。如果您使用的是新闻编辑室,您可能需要进行以下编辑:

请注意,如果修改了样式,但没有显示更改,则需要清除Cloudflare中的缓存。你可以在网站上找到这个。您可能还需要在浏览器中按住shift-f5键以跳过浏览器缓存。

你的网站与Cloudflare没有天生的联系。如果您想在将来离开Cloudflare(如果他们以某种方式变得邪恶,或者您考虑的是另一个提供商),您需要促进以下几点:

将域更改为指向新服务器(按照提供商的指示)

设置将“公共”目录的内容发布到新位置的方法。这可能不涉及自动检测git推送到Github,所以要准备好为此设置新的连接(可能是像FTP上传一样粗糙的东西)

你可以看看像fly这样的供应商。伊奥或弗雷克。你也可以配置github直接为你的博客服务。