2024 春季学期第一次作业总结报告 段晗祈 52285903003

博客搭建流程

1 博客本地搭建

  • 新建 hugo 博客工程 在下载了 hugo 的目录下使用命令行输入 （hugo release页面：https://github.com/gohugoio/hugo/releases/）
./hugo new site myblog
  • hugo 主题选择 hugo 主页： https://themes.gohugo.io/ 选取主题：m10c （https://themes.gohugo.io/themes/hugo-theme-m10c/）
cd myblog
git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c
  • 配置修改 在 hugo.toml 中修改配置
<!-- 指定主题 -->
theme = "m10c"
<!-- 设置目录中的首页，文章列表和关于页面 -->
[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    identifier = "tags"
    name = "Tags"
    url = "/tags/"
    weight = 2
  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 3
<!-- 个人信息和SNS链接 -->
[params]
  author = "段晗祈"
  description = ""深度学习在读 PhD""
  menu_item_separator = " - "
  [[params.social]]
    icon = "github"
    name = "Github"
    url = "https://github.com/AquariusAQ"
  • 创建文章 在命令行中输入
../hugo new post/博客搭建总结报告.md

然后在 .\myblog\content\post\博客搭建总结报告.md 中将 draft 改为 false

  • 本地启动 在命令行中输入
../hugo.exe server

此时便可以看到主页以及文章列表

2 博客 github 部署

  • 创建仓库

在 github 上创建一个 repository，命名为 AquariusAQ.github.io

  • 本地编译博客 在命令行中输入
../hugo

此时，public 文件夹内便是编译好的静态页面

  • 推送静态页面到 github 在命令行中输入
# 初始化git
git init
# 添加远程仓库
git remote add origin https://github.com/AquariusAQ/AquariusAQ.github.io.git
# 添加本地修改
git add .
# 提交本地修改
git commit -m "init"
# 推送本地修改到远程
git push --set-upstream origin master
  • 配置 .gitmodules 在项目文件夹中创建 .gitmodules 文件，并写入主题仓库地址：
[submodule "themes/m10c"]
    path = themes/m10c
    url = https://github.com/vaga/hugo-theme-m10c

接着推送到github

# 先拉下修改
git pull
# 添加远程仓库
git remote add origin https://github.com/AquariusAQ/AquariusAQ.github.io.git
# 添加本地修改
git add .
# 提交本地修改
git commit -m "update .gitmodules"
# 推送本地修改到远程
git push
  • github 仓库设置
    • 在 AquariusAQ.github.io 仓库的 Settings 中的 Pages 选项卡里，在 Build and deployment->Source 中选择 GitHub Actions，从而使 github 来构建页面
    • 点击 browse all workflows，搜索 hugo 并点击 configure，保持默认的配置文件，点击 Commit changes 提交修改

等待编译结束后，便可以在 https://aquariusaq.github.io/ 看到部署好的博客页面

3 博客内容填充

使用

../hugo new about.md
../hugo new post/new.md

等方式，创建新的博客并编写，详细内容可进入 https://aquariusaq.github.io/ 阅读。

博客主题及其选取原因

选取的主题是：m10c （https://themes.gohugo.io/themes/hugo-theme-m10c/）

该主题使用极简化风格，鲜明简洁地展示了个人主要信息、关于页跳转，以及右侧的文章列表，并且可以使用 markdown 语法进行编写，部署快速。

博客页面布局及其设计思路

左侧为个人信息、主页跳转、关于页跳转，右侧是文章列表。这样的布局兼具信息量充足、跳转方便、界面简洁、陈列美观等优点。 这种布局左侧为首页，右侧为文章列表，合二为一，既方便阅览，又排版美观。

博客功能实现及其技术选择

选择了 hugo 博客，其作用类似一个脚手架，在保证博客必要功能的基础上，可以方便地将 markdown 博文内容和各种主题无缝衔接。 部署上使用了 github 的网站搭建功能，并且 github action 支持 hugo 编译，将这一步骤交给 github 进行，进一步简化了搭建和博文发布流程。 搭建过程详见博客搭建流程。

博客制作过程中遇到的问题及其解决方法

  • 启动时失败：ERROR TOCSS: failed to transform “css/main.scss” (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to ’libsass’.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

hugo 扩展版才能将主题中使用到的 scss 编译为 css，因此需要卸载 hugo 标准版，安装扩展版本。

  • 部署到 github 后 build 失败： Error: fatal: No url found for submodule path ’themes/m10c’ in .gitmodules Error: The process ‘/usr/bin/git’ failed with exit code 128

这是因为使用到了主题项目作为该 github 项目的子模块，因此需要在 .gitmodules 文件中添加该主题的 github 项目地址