JWangL5's Blog
分类 系列 文章 相册 关于我
JWangL5's Blog

Hugo+GitHub Pages搭建博客

卢旺  收录于  类别 前端技术
     约 2010 字   预计阅读 5 分钟 

自从网易博客不再运营之后，不止一次地萌生过想要重开一个博客的想法，但每每又觉得自己的文字并没有太多价值，就一直没有实际行动。但不可否认的是，把长段的文字写出来或是把之前不理解的东西搞明白并输出，哪怕没有别人看也会是一件能够让自己高兴、甚至自豪的事情。这段时间想要重新再次学习《Molecular driving forces》一书，希望能够借着这个博客，把系统梳理的笔记做出来。

传统的博客建立都比较麻烦，前端需要自己写网页代码，后端还需要自己调配服务器；为了低成本、高效率地完成这件事，选择了相对不那么麻烦但性能还不错、识别Markdown的静态网页Hugo模板，其可以在本地下载、安装并按照特定模板样式将md文件渲染为html网页，最后只需要将其上传、托管到Github Pages上。

这里是一些参考资料：

下载和安装步骤可以直接参照官方说明，这里仅记录几点经验：

  • 可以直接在Github上下载编译好的Hugo_extend版本，下载解压后得到的exe文件是一个命令行工具，直接配置环境变量即可使用（还需要根据官网下载GO和一个插件确保高级功能也能顺利运行）

  • 在特定目录输入命令hugo new site site_name即可自动生成一个文件夹，作为博客站点的目录；其中content是存放md文件的地方，asserts是图片等附件的存储路径，themes是主题的下载目录，hugo.toml是站点的配置文件

  • 主题的下载可以从官方主题市场中挑选，随后在Github上将其下载到themes文件夹下即可（themes/主题名/下载解压出来的文件）

  • 随后只需要根据主题的说明文档完成配置即可（即主页的头像、栏目、Logo等等）

  • Hugo会识别content目录下的内容并渲染，需要将blog正文的md文件放在centent/posts目录下，文件命名需要正常一点（英文数字下划线），否则无法转化为网址链接；文件内容也按照正确格式写，比如开头是这篇博文的配置数据，需要用TOML格式书写

    （参考这个主题对头文件的说明）

    （先去搬运一点之前写相对有价值的文章进来，别看起来太空旷哈哈哈哈）

  • 使用hugo serve -D命令可以在本地运行出服务器，观察并调整配置效果；其中，-D参数是渲染Draft草稿的含义

    PS：在需要修改css样式时，务必使用hugo serve --noHTTPCache --ignoreCache --disableFastRender命令，来确保看到最新的css效果

本博客使用了DoIt主题，整体都很满意，但正文有点窄、且行距较密有点不舒服，这里进行了手动的修改。对样式的修改在本质上是修改或覆盖原主题的scss文件，可以使用浏览器的调试工具，来判断需要修改哪一个class或id标签，也可以直接观察修改后效果测试参数。如下是本博客的修改内容：

  • 在/themes/DoIt/assets/css/_page/_index.scss中做如下修改

    （在_core/_media.scss文件中也需要同步修改）

    1
2
3
4

    .pages{
	max-width: 1200px;
  width: 72%;
}

  • 在/themes/DoIt/assets/css/_custom.scss中加上一行.content{ line-height: 2rem; }来增大行距

  • 在/theme/DoIt/assets/css/_page/_single.scssz的第111行，去掉h4、h5、h6，让它们只加粗，不显示前面的蓝线

  • 在/theme/DoIt/layouts/taxonomy/list.html的第43-47行，修改为如下代码，从而在Series页面能够使用banner图

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    {{- with .Params.banner -}}
<div class="banner">
    <img src="{{ . }}" style="width: 100%;"/>
</div>
{{- end -}}
<div style="margin-top: 20px;"></div>
{{- /* Introduction*/ -}}
{{- with .Params.introduction -}}
<div class="introduction" style="text-indent:2em; line-height:2em;">
    {{- . -}}
</div>
{{- end -}}
<div style="margin-top: 50px;"></div>

  • 在/theme/DoIt/layouts/plugin/image.html的第41行，将sizes="auto"属性注释掉，从而来适配新版本chrome（121.0.6167.85）下contain-intrinsic-size: 300px 150px属性的默认内容

  • 首先，安装Git工具到本地；并且在Github上新建一个仓库，需要注意的是仓库名必须叫做用户名.github.io，并且选择公开权限

  • 将打开需要发布的博客目录，输入命令hugo --baseURL="https://用户名.github.io/"

    （baseURL如果配置进hugo.toml就可以不再每次都输入了）

  • 进入public文件夹，开始构建Git仓库并上传（最后一步需要输入密码登陆）

    1
2
3
4
5

    git init
git add .
git commit -m "博客更新"
git remote add origin https://github.com/用户名/用户名.github.io.git
git push -u origin master

  • 随后就可以在用户名.github.io上访问啦~

更新于 2023-09-27
返回 | 主页