Hugo➕Stack个人网站建站

刚搭好，只有一条推文还是卷王打卡，大家光看卷王打卡也不是个事儿，决定更新一条伪技术实踩坑的这个网站的搭建记录。

安装Hugo

建站的静态网站生成器有很多，我选的是Hugo，~~因为师兄就用的Hugo~~。
根据Hugo官方quick start。在Mac上只需要安装homebrew包管理器然后运行

1

 brew install hugo

一行命令即可安装。然而诡异的是，我一开始运行了好几次都失败了，显示无法下载。我的魔法已经全局了网络，但依然无法下载。后来的解决办法就是多运行几次🤦‍♂️……就成功了。mac和Linux都是一行命令极速安装，~~可能只有windows上的安装麻烦一点~~。

用Stack主题初始化整个项目

首先用Hugo新建一个项目名称，我取的名字是myblog。通过命令

1
2


 hugo new site myblog # 在当前目录下创建名为myblog的site
 cd ./myblog # 在新site的文件夹下操作

我选取的主题是Stack，~~因为师兄也用的Stack~~。该说不说，这个主题很漂亮，而且很多功能很强大。但是美中不足，他的文档实在是又烂又不全。虽然同时有中文文档和英文文档，但描述都不是很清晰。
去Stack 的release page下载stack，注意没有金刚钻别揽瓷器活，选择正式版而不是测试版。

1
2
3


cd ./themes # 将其下载至主题页面
wget https://github.com/CaiJimmy/hugo-theme-stack/archive/refs/tags/v3.13.0.zip 
unzip ./v3.13.0.zip            

得到文件夹hugo-theme-stack-3.13.0，将这个文件夹名字改为hugo-theme-stack。接下来执行以下几步。

将hugo-theme-stack目录下的archetypes文件夹替换其父目录myblog下的archetypes文件夹
将hugo-theme-stack/exampleSite目录下的content文件夹和config.yaml替换、复制到其父目录myblog下。
将myblog文件夹下的配置文件config.toml重命名为config__backup.toml。
删除文件夹hugo-theme-stack/exampleSite/content/post/rich-content/文件夹与myblog/content/post/rich-content/。

在myblog文件夹下使用命令

1

 hugo server

就能跑起来他的示例网站了。跑起来后可以在浏览器地址栏输入地址localhost:1313实时查看网站情况，这个网站可以随着文档的更改在更改的文档保存后实时更新。

编辑网站内容

初始界面的左侧侧边栏可以在blog/config.yaml中自定义，比如我就移去了twitter(~~怕出大问题~~)增加了leetcode。并打开了中文编辑选项hasCJKLanguage: true。
在content/page/文件夹下的几个文件夹可以修改左侧栏目里的内容。
在content/categories/文件夹下可以设定文章的分类信息，比如为某一分类增加简介与图片。若想要添加新文件，则在post页面上增加文件夹，在新增文件夹中的index.md文件中开始写新的博客。index.md文件的头部可以设置tag与categories一系列内容。以上所有的设置在Stack的中文文档和英文文档以及示例文件夹中的写法学到。

将其发布至GitHub page

在写的七七八八之后，若想在线上部署，可以先将其推到GitHub。
在GitHub创建名为你的帐号名.github.io的空项目。在文件夹myblog下输入命令

1

 hugo --theme=hugo-theme-stack --baseUrl="https://你的帐号名.github.io" --buildDrafts

注意，此时会自动运行生成前端html文件等在你myblog/public文件夹中，去myblog/public文件夹初始化git仓库然后将myblog/public文件夹下的内容push到刚刚新创建的GitHub项目中即可。此时稍等一两分钟，在浏览器地址栏中访问https://你的帐号名.github.io，便弹出了你的个人网站！

[可选项] 据朋友圈大佬WS指点，因为GitHub page屏蔽了百度爬虫，所以用netlify可以被百度搜索到，若想扩大影响力可以用。netlify的操作简单至极，用GitHub登陆网站，然后选择你在GitHub里创建的你的帐号名.github.io项目，然后他就会根据GitHub的内容自动构建，并自动保持更新。可以更换自己喜欢的网站名称，最终其生成的链接为你选择的域名.netlify.app。

后期增删改查

本地myblog操作完成后，同第一次发布一样运行。

1

 hugo --theme=hugo-theme-stack --baseUrl="https://你的帐号名.github.io" --buildDrafts

更新public文件夹中的内容，然后去public文件夹git commit和push。稍等一会儿，网站即会更新。