Hexo迁Hugo搬家记

2021-05-25 Web Blog 字数统计: 2426字阅读时长: 5分

考试周前找点乐子，感觉Hugo提供的实时反馈真的爽

于是趁着博客文件从老电脑转到新电脑的机会，也来试试Hugo

安装

Windows端安装，可以直接从Hugo官方仓库的Release界面下载对应操作系统的压缩包Releases · gohugoio/hugo (github.com)

然后找个位置解压缩就行，解压缩位置和Blog的位置没啥关系

为了方便使用hugo.exe，需要把所在路径添加到环境变量PATH

此外，电脑上还需要安装git，以下命令建议都在git bash中运行

基本使用

发布一篇博客

找个风水宝文件夹作为自己的博客根目录，新建一个博客网站叫做MyBlogSiteName（名字可修改）

hugo new site MyBlogSiteName

然后在当前目录下就能看到出现了一堆文件夹，其中有博客的配置文件config.toml

其他文件夹的功能如下：

.
├── archetypes # 储存.md的模板文件，类似于hexo的scaffolds，该文件夹的优先级高于主题下的/archetypes文件夹
├── config.toml # 配置文件
├── content # 储存网站的所有内容，类似于hexo的source
├── data # 储存网站的所有内容，类似于hexo的source
├── layouts # 储存.html模板，该文件夹的优先级高于主题下的/layouts文件夹
├── static # 储存图片,css,js等静态文件，该目录下的文件会直接拷贝到/public，该文件夹的优先级高于主题下的/static文件夹
└── themes # 储存主题，下文中将会把主题保存到这里

Hugo的博客配置文件支持toml, yml, json格式，其中每项意义可见 Configure Hugo | Hugo (gohugo.io)

新建一个文章

hugo new posts/my-new-post.md

新建一个页面（比如About页面）

hugo new about.md

启动一个Web服务器，快速实现对静态网页的生成，然后可以在本地预览自己的博客，访问 http://localhost:1313

hugo server -D # -D 显示草稿draft文件

生成渲染后的静态网页

hugo

其他命令：

# 使用方法:
  hugo
  hugo [flags]
  hugo [command]
  hugo [command] [flags]

# 节选的 command:
  new         # 为你的站点创建新的内容
  server      # 一个高性能的web服务器

# 节选的 flags:
  -D, --buildDrafts                # 包括被标记为draft的文章
  -E, --buildExpired               # 包括已过期的文章
  -F, --buildFuture                # 包括将在未来发布的文章

# 举几个栗子:
  hugo -D                          # 生成静态文件并包括draft为true的文章
  hugo new post/new-content.md     # 新建一篇文章
  hugo new site mysite             # 新建一个称为mysite的站点
  hugo server --buildExpired       # 启动服务器并包括已过期的文章

主题

Hugo提供了一大堆挺好看的主题 Complete List | Hugo Themes (gohugo.io)

我目前在用的是 Hugo Theme Pure | Hugo Themes (gohugo.io)，感觉还挺简洁的

导入主题的方法需要注意，不能直接clone到themes文件夹，而是需要在根目录下

git submodule add https://github.com/xiaoheiAh/hugo-theme-pure.git themes/pure

这样会将主题文件作为当前仓库的子模块导入，Git子模块允许我们将一个或者多个Git仓库作为另一个Git仓库的子目录，它能让你将另一个仓库克隆到自己的项目中,同时还保持提交的独立。Git - 子模块 (git-scm.com)

具体子模块的路径与原URL的信息将保存在根目录的.gitmodules文件中

否则将会在下一步GitHub Action执行时出现如下报错

No submodule mapping found in .gitmodules for path 'path/to/submodule'

部署到GitHub

首先需要去GitHub上开两个仓库，一个用来保存所有的博客文件，一个是熟悉的<username>.github.io

第一个仓库可以设置为私有，在创建完成后把博客内容全部add commit push一把梭搞上去就行。

第二个仓库参见https://pages.github.com/。

生成personal_token

在GitHub上的Settings - Developer Settings - Personal access tokens中，生成一个personal_token

需要在生成的时候勾选repo、admin:repo_hook这两个中的所有内容

注意提示信息，这个token只会出现一次，如果没有及时保存使用就再也找不到了

上传配置文件

执行以下几步：

在源码repo里新建一个github-actions分支：git checkout -b github-actions
在repo根目录新建嵌套的两个文件夹.github/workflows
在workflows里新建一个后缀为.yml的配置文件，名字自取。
写进去以下配置（从hugo官方文档修改而来）：

name: github pages # 名字自取

on:
  push:
    branches:
      - github-actions  # 这里的意思是当 main分支发生push的时候，运行下面的jobs，这里先改为github-actions

jobs:
  deploy: # 任务名自取
    runs-on: ubuntu-18.04	# 在什么环境运行任务
    steps:
      - uses: actions/checkout@v2	# 引用actions/checkout这个action，与所在的github仓库同名
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive) 获取submodule主题
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo	# 步骤名
        uses: peaceiris/actions-hugo@v2	# hugo官方提供的action，用于在任务环境中获取hugo
        with:
          hugo-version: 'latest'	# 获取最新版本的hugo
          # extended: true

      - name: Build
        run: hugo --minify	# 使用hugo构建静态网页

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3	# 一个自动发布github pages的action
        with:
          # github_token: ${{ secrets.GITHUB_TOKEN }} 该项适用于发布到源码相同repo的情况，不能用于发布到其他repo
          external_repository: <username>/<username>.github.io	# 发布到哪个repo
          personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}	# 发布到其他repo需要提供上面生成的personal access token
          publish_dir: ./public	# 注意这里指的是要发布哪个文件夹的内容，而不是指发布到目的仓库的什么位置，因为hugo默认生成静态网页到public文件夹，所以这里发布public文件夹里的内容
          publish_branch: main	# 发布到哪个branch

然后将以上内容push到GitHub，然后来到这个仓库的网站的Action，就能看到现在已经在执行了