曾经尝试过用hexo搭建博客,我对它最大的不满就是需要的依赖太多,打包速度也不是很理想。后来看到了hugo,(号称是最快的站点生成器),官方的定义是:Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. 看到了这个,果断弃坑,尝试了之后发现,hugo的打包速度真是没说的。一个字“快”。曾经用hexo打包要一秒钟的,用hugo178ms解决。

安装

如果你是Windows,首先,请 点此查看如何安装chocolatey

安装git

如果你没有安装上面的chocolatey,那么请 点此下载git,并安装 如果你安装了上面的chocolatey,请打开命令行,输入 choco install git 然后继续输入"y”,等待安装完成

配置git

首先打开 GitHub 注册一个账号并新建仓库,仓库名应该是 your github name.github.io 然后打开命令行并输入 git config --global user.name 'your name' git config --global user.email 'your email' #需要输入的是注册了GitHub的邮箱

安装hugo

如果你没有安装上面的chocolatey,请 点此下载二进制文件 下载完成之后,解压,然后把hugo添加到环境变量

添加环境变量

计算机>菜单>属性>高级系统设置>环境变量>系统变量>path>编辑>编辑文本 会打开一个编辑框 如果上面的压缩包你解压到了C盘表面,那么你就在上面编辑框末尾添加一个分号”;",然后继续输入 C:\hugo_xx.xx.xx_Windows-xxbit\ 或者你可以把解压之后的文件重命名为"hugo”,那么你需要写的就是 C:\hugo\ 一路确定,然后打开命令行,输入 hugo version 如果输出了版本信息就代表安装成功了 如果你安装了chocolatey,请打开命令行,输入 choco install hugo 继续输入"y”,等待安装完成 完成以后,在命令行输入 hugo version 如果输出了版本信息,就代表安装成功了

初始化博客

打开命令行,把目录切换到其它盘符,(怕忘记备份,丢失数据) 输入 hugo new site [project-name] 这里的project-name就是存放你博客文件的目录 创建完成后,在project-name目录下会生成以下文件结构 archetypes 存放生成博客的模版 config.toml 存放 hugo 配置文件 支持 JSON YAML TOML 三种格式配置文件 content 存放 markdown 文件 data 存放 Hugo 处理的数据 layouts 存放布局文件 static 存放静态文件 图片 CSS JS文件 themes 存放主题

添加主题

hugo默认是没有主题的,我们需要去 这里 挑选自己喜欢的主题 选择好之后,打开命令行,把目录切换到project-name\themes,输入 git clone theme-URL 等待clone完成,把主题目录下examples中的config.toml复制到project-name,覆盖掉本身的config.toml

创建文章

打开命令行,把目录切换到project-name,输入 hugo new [/post/xx.md] or [/posts/xx.md] 根据你选择的主题,选择上面的一种方式 例如我的就是 hugo new /post/xx.md

文章迁移

把/hexo/source/_posts中的md文件全部复制到/project-name/content/post或/project-name/content/posts中 因为hexo的front matter和hugo的不一样,所以就要修改front matter hexo的front matter是

---
title: title
date: yyyy-mm-dd hh:mm:ss
categories:
  - category
tags:
  - tag
---

而hugo的确是

title: "title"
date: yyyy-mm-ddThh:mm:ss+08:00
categories: ["category"]
tags: ["tag"]
draft: true or false
---

在网上看到有大佬说可以用脚本批量修改front matter,但是对于我这个小白来说,还是有点困难,所以就只能手动修改了。 全部修改完成之后,打开命令行,切换到project-name,输入 hugo server 然后在浏览器输入 http://localhost:1313 来预览网站效果

提交到GitHub

打开命令行,切换到project-name,输入 hugo -t [your theme] 然后 cd public 继续输入

git init //把这个目录变成Git可以管理的仓库
git add . //不但可以跟单一文件,还可以跟通配符,更可以跟目录。一个点就把当前目录下所有未追踪的文件全部add了
git commit -m "first commit" //把文件提交到仓库
git remote add origin https://github.com/your-github-name/your-github-name.github.io.git //关联远程仓库
git push -u origin master //把本地库的所有内容推送到远程库上

等待推送完成 如果你的仓库有以前hexo的内容,你又不想要了,那么,首先打开命令行,把目录切换到project-name,然后输入

md public
cd public
git init
git remote add upstream https://github.com/your-github-name/your-github-name.github.io.git
cd ..
hugo -t your-theme
cd public
git add .
git commit -m "commit"
git push -f upstream master

等待推送完成

踩过的坑

  1. hexo和hugo的front matter是不一样的,如果不修改会显示错乱
  2. 如果你用记事本在写config.toml,编码会变成UTF-8-BOM,那么使用hugo server会报错,需要转换成UTF-8才行
  3. 如果你用记事本在写博客的其它文件,编码还是会变成UTF-8-BOM,使用hugo server不会报错,但是网页会显示乱码,解决方法同上
  4. 如果你的GitHub本身有hexo的内容,你又是按照方法1操作的,那么可能会报错

参考链接

https://jdhao.github.io/2018/10/10/hexo_to_hugo/ https://juejin.im/post/5cc41bfef265da036505031c