使用 Hugo 搭建个人博客

使用 Hugo 搭建个人博客

前言

一直想搭建一个博客,用来记录一些东西,比如学习过程,读书笔记,刷题记录,成体系的或者零散的知识。因为我发现之前很多东西用过之后马上就忘记了,下次再用或者想和别人交流的时候还需要再次搜索,效率很低。

后来在B站看到Up主 CodeSheep 的一个 Hugo教程,然后自己又折腾摸索了两三天,终于把博客搭起来了。

其实使用 Hugo 搭建博客整个过程还是挺简单的,倒是在选择 Theme 的时候纠结了很久。

这篇文章就是梳理一下整个过程,并记录一下踩过的坑。

使用 Hugo 时需要提前了解的

内容说明
git && GitHub下载 Hugo 主题时需要用到,生成站点后也可以部署到 GitHub Page,非必须
Markdown博文主要是通过 Markdown 格式书写和修改,建议学习一下

Hugo 是什么

The world’s fastest framework for building websites

简而言之,Hugo 就是用 Go 语言写的一个静态网站生成器。选择自己喜欢的主题,修改 config 文件进行个性化配置,写博客,然后一个命令就可以生成站点的 html 文件。

网上关于 Hugo 的教程很多,大家也可以自行搜索,本文末尾我也放了几个链接。

安装 Hugo

简单起见,直接在 这里 下载编译好的 Hugo 二进制程序,当然也可以源码安装,具体过程可以参考官方文档。

Hugo 支持 Linux,MacOS,Windows 等多种平台,选择自己平台对应的文件下载就好,我这里选择 Windows 64 bit。

下载好,解压出来的文件一共就三个,一个 Hugo 可执行文件,一个 licence,一个 README 文件。随便把文件夹放在哪里,然后把文件夹路径加到环境变量 Path,然后就可以使用啦。

生成站点

hugo new site myBlog

很简单,一条命令搞定,执行这条命令就会在当前目录下生成一个 myBlog 文件夹,名字可以换成自己的,这个 myBlog 就是站点的根目录。
Windows 环境命令行可以用 cmd 控制台,或者安装 git 用 git bash,命令都是一样的

先来看看站点根目录下主要有什么内容

  • content 存放自己写的 about 和博文
  • static 存放静态资源,比如图片
  • themes 存放自己下载的 Hugo 主题

下载主题

Hugo 本身生成的站点是没有主题的(或曰 皮肤),这也给我们留下很多选择余地。可以到 这里 或者 这里 选择自己喜欢的主题,我的博客选择的是 maupassant,点 download 就会去到该主题的 GitHub,把仓库 clone 下来,放到 myBlog/themes 下。

cd myBlog/themes
git clone https://github.com/flysnow-org/maupassant-hugo.git

没有安装 git 也可以直接下载打包好的 zip 文件,不过还是墙裂建议大家装一下 git。

配置 config.toml

下载好的主题中,一般都会有 README 文件,和 exampleSite 文件夹,把 exampleSite 下的 content,config.toml等复制到站点根目录 myBlog 下,然后根据自己需求修改 config.toml。文件中的内容都直来直去,很容易看懂,良心主题作者还会详细写注释或者 README 文件进行说明,可以看一下这位Up主的视频。主要修改的地方就是 baseURL,title,theme,author,还有 menu,about 等内容。
注意 theme 一定和 myBlog/themes 下自己所使用的的主题的目录名是一致的。

创建文章

hugo new post/firstBlog.md

这条命令会在 myBlog/content/post 目录下新建一个名为 firstBlog 的 Markdown 文件,这就是第一篇博文,并且创建的文章都会有一些文件头内容,比如

内容说明
titl文章的标题,可自定义
tags文章的标签,可自定义
categories文章的分类,可自定义
date文章创建日期,系统自动填写
toctrue or false,是否开启文章目录,如果开启,会根据 Markdown 文件的标题语法自动创建目录
drafttrue or false,是否是草稿,发布前记得修改为 false

这些文件头的格式和内容在 myBlog/archetypes 下的 default.md 文件中写明,这个文件可以按照自己的需求修改,比如我的

+++
title='{{ replace .Name "-" " " | title }}'
tags=[]
categories=[]
date="{{ .Date }}"
toc=true
draft=true
+++

about的内容修改类似于创建新文章,不同主题的 about 可能存放在不同路径,比如 content/about/index.md 或者直接 content/about.md,可以根据自己的主题和需求进行修改。

本地运行和调试

hugo server

然后浏览器打开地址 http://localhost:1313/ 就可以看到自己的博客了,可以边修改边查看效果

部署

其实现在阿里云,腾讯云,华为云之类的云服务器都有学生套餐,一个月也就10块钱,前几天华为云和牛客还有个活动,一年的服务器只要 9.9,我就捡了个漏。

这里主要说一下怎么使用 GitHub Page 部署我们的网站。其实 GitHub Page 本来就是给用户来展示自己仓库和项目的静态网页,利用它部署网站,不仅可以省去服务器和域名的钱,还方便更新文章,当然以后有了自己的域名还可以关联过来。

  1. 首先,当然是要有一个 GitHub 账号,这个就不说了,很简单的,拿邮箱注册一个就好
  2. 新建一个仓库,一定要命名为 yourname.github.io,yourname 就是自己的 GitHub 用户名
  3. 配置一下自己本地的 git 用户信息,引号内的内容改成自己的 GitHub 的用户名和注册邮箱
git config --global user.name "yourname"
git config --global user.email "youremail"
  1. 生成网站的最终页面,在站点的根目录执行命令,yourname 改成自己的 GitHub 用户名,这条命令会在根目录 myBlog 下生成一个 public 文件夹,这就是最终的网站,将这个文件夹下的内容部署到服务器或者上传到自己的 GitHub 仓库中就可以让别人访问了。
hugo --theme=maupassant --baseUrl="https://yourname.github.io"
  1. 将 public 下的文件推到 GitHub 仓库的 master 分支
cd public
git init
git add .
git commit -m "发布第一篇博文"
git remote add origin https://github.com/yourname/yourname.github.io.git
git push -u origin master

打完收工,这样博客就可以通过地址 https://yourname.github.io 访问了。

以上过程中可能需要输入自己 GitHub 的账号密码,可以通过 ssh-key 的方式关联远端仓库(可以理解为记住账号密码),具体操作可以参考 廖雪峰的 Git 教程

总结

  1. 下载安装 Hugo 和 git
  2. 生成新的站点
hugo new site myBlog
  1. 下载安装主题
cd myBlog/themes #进入存放主题目录
git clone https://github.com/flysnow-org/maupassant-hugo.git #clone 一个 Hugo 主题到本地
  1. 配置 config 文件
  2. 写文章
hugo new post/firstBlog.md #在站点根目录 myBlog 下
  1. 本地调试,打开地址 http://localhost:1313/ 即可查看
hugo server
  1. 部署到 GitHub
git config --global user.name "yourname" #配置自己的 GitHub 用户名
git config --global user.email "youremail" #配置自己的 GitHub 邮箱
hugo --theme=maupassant --baseUrl="https://yourname.github.io" #生成站点
cd public #进入生成的站点
git init #初始化一个 git 本地仓库
git add . #将 public 下所有文件添加到本地仓库暂存区
git commit -m "发布第一篇博文" #将暂存区文件添加到本地仓库并添加描述
git remote add origin https://github.com/yourname/yourname.github.io.git #关联本地仓库与远端仓库
git push -u origin master #将本地仓库推送到远端仓库并指定分支为 master

后记

使用 Hugo 搭建自己的站点真的很方便,不过需要熟悉一些 Markdown 的语法和 Git 命令,这里推荐一些资料。