网站搭建|使用hugo搭建个人博客

转自:kermsite.ml/index.php/archives/134/

由于过程过于复杂,分成两篇写,本篇为部署到本地

即使是利用了现成的平台和工具,搭建一个个人博客也并非容易的事情。首先你需要在本地配置好一个写博客的环境,其次需要将本地的内容推送到云端,然后还需要把托管平台和云端连接。完成这些也只是开始,你需要设计(或者直接下载现成的)网站样式,需要配置域名,需要有足够多的内容来充实自己的网站。等等。。。。但是整个过程中也会学到许多。还有什么比在互联网上搭建一个完全属于自己的小空间更加令人体验到成就感呢?

题外话:其实我自己已经有一个使用typecho搭建的动态博客了。从部署的体验上要比Hugo好上太多。把文件放到服务器网站目录,开个数据库,跟着引导一步步走就可以了。哪有这样每一个操作都要跟命令行打交道的。不过使用typecho也有成本:使用PHP,需要单独购买服务器,(作者更新没有Hugo勤快,)等等。但是用静态也有好处,一次性可以搭多个站点,数据不容易丢失。总之看个人情况吧。

官网:https://gohugo.io/vercel:https://vercel.com/主题:https://themes.gohugo.io/themes/hugo-theme-stack/

在本地安装Hugo

这里使用hugo的一大原因就是它Windows下有单文件的版本,只要把文件下载下来并添加到环境变量就可以使用,非常方便。

首先到官网下载Windows版:Releases · gohugoio/hugo (github.com)

我这里顺便提供一个加速的链接:

https://github.91chifun.workers.dev/https://github.com//gohugoio/hugo/releases/download/v0.89.4/hugo_extended_0.89.4_Windows-64bit.zip

下好之后找个空文件夹放了,比如我这里用的D:\myblog

修改系统的环境变量,将hugo.exe所在文件夹添加到里面。需要重启计算机

打开终端(在文件夹里面,按住Shift同时右键单击,就可以看到在此处打开命令提示符在Windows终端中打开

输入hugo version如果有输出说明安装ok。

转到你准备存放博客的文件夹:

hugo new site myblog #设成你想要的博客名

有这样的输出说明已经安装好博客了,不过现在还没有内容,也没有主题,我们稍微设置一下

Hugo主题

和其他静态博客生成程序略有不同的是,Hugo必须配置一个主题才能访问。我这里使用的是slack主题,下载地址:

官方:https://github.com/CaiJimmy/hugo-theme-stack/archive/refs/tags/v3.5.0.zip加速:https://github.91chifun.workers.dev/https://github.com//CaiJimmy/hugo-theme-stack/archive/refs/tags/v3.5.0.zip

下载后把 hugo-theme-stack-master 改名为 hugo-theme-stack 并放到站点目录的 theme 文件夹下。

exampleSite 文件夹中的 assetsconfig.yaml 复制到站点目录下。后者是 Hugo 站点的配置文件,已经写入了主题的可配置字段。

观察发现英文文档里面有这样一句话:

Clone / Download this repository to theme folder, and edit your site config following exampleSite/config.yaml.

Note: Remove config.toml if there is one in the site folder.

所以必须要删除站点目录下的config.toml文件才行,否则还是一片空白

然后为了之后写博客方便,可以把模板也复制过来,将\themes\hugo-theme-stack\archetypes复制到\archetypes中,进行替换。

完成之后,使用

hugo server

就可以在本地运行服务了:

转到http://localhost:1313/

使用

hugo new post/test.md

创建页面。也可以不加post,直接输入文件名,实际上都是添加到content文件夹里面的。

使用markdown编辑软件对文件进行编辑,值得注意的一点是如果要发布这篇文章,一定要将draft设为false,否则不会对其进行生成(你也可以在\archetypes中直接把它默认为true

再次访问网站,可以看到我们的页面已经添加上了:

对于本页面上的所有内容都可以在网站根目录下的config.yaml中进行更改。可以参考官方的文档。

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部