# Hugo(一)Github Pages 搭建个人博客 # 序言 Hugo 号称构建网站最快的框架,看过其他相关资料,hexo 在文章数量大的前提下,建站成静态文件的速度很慢,另外从主题(themes)这个角度去考虑,简单也是我的首选,于是从 hugo 下手自己的第一个博客网站。 # 安装 1. mac 安装 hugo ```shell brew install hugo ``` 2. 确认安装成功,可用命令行检查版本号进行测试 ```shell hugo version ``` 3. 其他平台可用直接下载二进制包进行使用,无需编译 # 构建 hugo 项目 1. 新建博客站点 ```shell hugo new site MyBlogHugo ``` 2. 创建完站点后的文件结构 ```shell MyBlogHugo ├── archetypes │ └── default.md ├── config.toml ├── content ├── data ├── layouts ├── static └── themes ``` # 添加 LoveIt 主题 1. Why choose it? 在 {{< link "https://themes.gohugo.io//" "Hugo 主题市场" >}} 挑了半天,还是决定用 {{< link "https://github.com/dillonzq/LoveIt" "LoveIt" >}} 这个主题。 这个 themes 简单好看,功能齐全,作者也一直在努力更新,还支持多语言版本,包括 seo、搜索等功能都有,可以参考 {{< link "https://hugoloveit.com/zh-cn/" "demo 地址" >}}。 2. 将主题作为子模块 ```shell cd MyBlogHugo git init git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt ``` # 启动 hugo server 1. 启动 hugo 作为本地调试使用,在浏览器打开 http://localhost:1313/ 即可查看效果。 ```shell hugo server --disableFastRender ``` 参数含义: disableFastRender:实时将文章的内容更新到站点,不需要重启也能边修改边观看效果。 2. 生成静态文件,会在MyBlogHugo 下面生成 public 的静态文件目录 ```shell hugo ``` 3. 我是使用 LoveIt 主题自带的 exampleSite 的 config.toml 来进行修改和配置的。 ```shell cd MyBlogHugo cp themes/LoveIt/exampleSite/config.toml . ``` 4. 创建博客文章之前,我会使用example 的默认创建初始化详情来进行配置和修改. ```shell cp themes/LoveIt/archetypes/default.md archetypes/ # 这样,你每次创建文章的时候,都会使用这里的默认配置进行创建 hugo new posts/test01.md ``` 5. default.md 查看 ```shell \--- title: "{{ replace .TranslationBaseName "-" " " | title }}" subtitle: "" date: {{ .Date }} lastmod: {{ .Date }} draft: false #是否作为草稿,如果为 true,不会生产静态文件到 public 目录 author: "赵叔" authorLink: "" description: "" tags: [] categories: [] hiddenFromHomePage: false hiddenFromSearch: false featuredImage: "" featuredImagePreview: "" toc: enable: true #是 否展开右边目录栏 math: enable: false lightgallery: false license: "" \--- ``` # 配置 Github Pages 1. 登录 github,在设置那里创建个人 repo 仓库,一共 2 个,一个是 .github.io 作为个人站点 public 的静态文件,一个是 MyBlogHugo 作为除了 public 这个静态目录的所有文件的仓库。记得创建空repo,不要添加 README 文件哦。 2. 初始化仓库 MyBlogHugo,public 目录要忽略,不上传 ```shell cd MyBlogHugo echo "!public/" >> .gitignore git init git remote add origin git@github.com:ZhaoUncle/MyBlogHugo.git git add . git commit -m "no public" git pull --rebase origin master git push -u origin master ``` 3. 初始化仓库 zhaouncle.github.io ```shell cd public git init git remote add origin git@github.com:ZhaoUncle/zhaouncle.github.io.git git add . git commit -m "my blog hugo" git pull --rebase origin master git push -u origin master ``` **之后就可以打开 http://\.github.io 进入到你的博客了。**