博客网站搭建-Hugo上手指南

七彩的河 included in 博客网站搭建

2023-03-14 1935 words 4 minutes

Contents

前几天刷CC98看到一个利用HuGo和ZJUgit快速搭建个人博客的帖子，图文并茂，步骤清晰，不免心动，也想把自己的学习笔记也都post出来，然一套下来难免磕磕绊绊，一些恼人的问题也是十分着火，于此记之，得有此帖。

1. HuGo

HuGo是一个可以离线快速生成网页内容的程序库，在windows上是一个单独的.exe文件，下载好后可以把它的路径添加到系统环境变量Path中

1-1. 下载Hugo:

hugo github release 如下图，下载windows-amd64那一个安装包，注意如果没看到这个安装包，请先点击 show all xxx releases

1-2. 解压安装包并添加环境变量

例如这里我添加到 D:\Program Files\HuGo 文件夹下

接着就把 D:\Program Files\HuGo 路径添加到系统环境变量Path中，如果不会添加环境变量，自行百度，添加好后命令行键入hugo显示如下输出

说明已经配置好了，只不过还没建立本地网站库，所以显示error

2. ZJUgit

在看到那个帖子使用ZJU Git快速搭建个人博客前，我还不知道有这个zju git，后来我赶紧注册了一下，并创建了第一个 group 和第一个 project. 以下创建过程图示来源于刚刚提到的帖子。创建一个Group，注意，真正的组织名是Group URL后面的部分

在组织中创建一个project

打开新创建好的Project，点击右侧的Clone，复制HTTPS URL，以此Project为例，为 https://git.zju.edu.cn/otto/blog.git

将项目克隆到本地, 此后这个项目的文件夹就是你的网站内容数据库了。

3. 在本地使用Hugo生成站点

3.1 主题配置

在克隆下来的项目文件夹中打开终端，输入hugo new site --force .，然后就会在项目文件夹中生成如下的文件夹和文件。

一般的，网站必须配置好前端的样式属性才可以正确显示内容，通俗来讲，接下来要做的是安装主题 themes, 如你所见, 也即是在 themes文件夹下操作。这里先到hugo主题官网(点击这里去主题官网)。

如上图所示，点进去一个主题下载，实际上你会来到一个 github 仓库，你要做的仅仅是把仓库克隆到刚刚提到的themes文件夹下。或者下载zip压缩包然后解压到themes文件夹下。这里我选择的是 ananke。

接着就是第一个重头戏, 配置 config.yml, 这里是指根目录的那一个:

打开后编辑内容:

baseURL: "待定外链站点"     # 等会再填充
languageCode: "zh-cn"
title: "xxx先生的个人博客"
theme: ananke   # themes下的一个主题名称
paginate: 5 #首页每页显示的文章数

3.2 使用本地服务, 预览内容

3.2.1 网站内容编写

网站内容或者说你需要发布的文章都需要放在指定文件夹 content/post/ 目录下，没有就自己新建一个，文件格式当然是大家喜闻乐见的 markdown 格式（好心的博主怕你不知道markdown语法，这里推荐了一个简单的练手网站: $Nice Markdown$）如图为示例文件夹结构，可以先不管里面的文件夹，只看文件，例如 Softwarelntro.md。有两种方式，一个是在根目录下打开命令行窗口，键入hugo new Softwarelntro.md

打开新建的文件，可以看到以下内容:

---
title: "Softwarelntro"
date: 2023-03-13T10:32:48+08:00
draft: true
---

其中标题 Softwarelntro 可以自行根据文章内容修改，同时把draft一行删掉表示已发布内容（这样才会显示），例如本篇文章：

在文件Softwarelntro.md里随便写点什么吧！

3.2.2 初始化与服务启动

在项目根目录下打开cmd命令行窗口，依次执行

hugo
hugo server

两个命令, 第一步是初始化，第二步是启动服务

这里可能会遇到一个错误, 提示该主题与hugo版本不兼容, 这里你可以再去前面提到的官网下载别的主题试试, 多试几个, 总有一个兼容的。点击屏幕显示的localhost或者复制url到浏览器打开，就可以看到你刚刚发布的文章内容啦！怎么样有木有超级兴奋！笔者由于网上资料零零散散、参差不齐，又不像调试代码那样可以debug，实际上很多周折。那么到了这一步算是部署好了本地网站服务，接下来就是迁移到外链了。

4. 将博客部署到git.zju上

以下内容又有大部分内容来自最初碰到的帖子

4.1 git push到远程仓库

git add .
git commit -m "update"
git push

4.2 配置CI/CD Pipeline

打开ZJU Git上的项目，选择CI/CD->Editor，填写 CI/CD 配置文件，并点击Commit changes

pages:
  tags:
    - pages-builder
  stage: deploy
  script:
    - dummy
  variables:
    BUILDER: 'hugo'
    WORKING_DIR: ''
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

4.3 终章

等待部署完毕后你和校内的其他同学就可以利用http://[组织名].pages.zjusct.io/[项目名]来访问你的博客啦，也可以侧边栏点击Settings->Pages，可以获取博客链接。

实际上这里如果你直接访问这个链接，往往是一个 404 页面，因为这里有个隐藏彩蛋，还记得那个 config.yml 吗？那个外链我们还没有填写呢！所以此时我们在本地修改config.yml, 将刚刚的 url 复制到 baseURL 后的引号内。此后再执行

git add .
git commit -m "update"
git push

将更改提交到远程, git push这一步可能报错，因为刚刚远端也有更改，所以先执行 git pull 将远程分支的改变拉取到本地，随后再把本地内容 push 到远程。那么到这里，一个基本的博客就部署完成了。