目录

用Hugo和Github搭建属于自己的博客

前期准备

第1步:安装所需软件

Hugo 是用Go编写的,支持多个平台。所以我参照官方教程安装了Git来运行Hugo,可以点击这里下载对应的系统Git并且安装。

前往Github安装最新版Hugo,像我是使用Windows 10 64位系统,那么我下载的就是hugo_0.83.1_Windows-64bit.zip。下载完成后解压。

在C盘根目录创建一个Hugo文件夹,再在Hugo文件夹中创建一个Bin文件夹,将刚才解压好的三个文件复制到Bin文件夹里。即C:\Hugo\Bin文件夹里有hugo.exeLICENSEREADME.md这三个文件。

第2步:配置环境变量

在电脑桌面右击此电脑,点击属性,在左侧点击高级系统设置,点击环境变量,点击下方的新建,点击浏览文件,选择C:\Hugo\Bin\hugo.exe

再点击下方系统变量中的Path,点击编辑,点击新建,点击浏览,选择C:\Hugo\Bin,添加完成点击确定、确定、确定。这样环境变量就设置完成了。

第3步:确认安装成功

运行Git Bash,输入以下指令:

1
$ brew install hugo

等待出现/xxx/xxx/hugo/0.83.1:xxxx的Hugo版本字样,再输入:

1
$ hugo version

出现Hugo Static Site Generator v0.83.1/extended darwin/amd64 BuildDate: unknown ,就表示安装成功啦!此时不要关闭Git Bash,接下来都要靠它来完成搭建博客的工作。

开始搭建博客

第1步:确认本地博客路径,创建 Hugo 网站

比如我的博客文件夹目录想要存放在D盘根目录,那么我在D盘新建一个文件夹MyBlog

切回Git Bash,执行以下命令,新建一个 Hugo 网站,MyBlog是名字

1
2
$ cd /d/MyBlog
$ hugo new site MyBlog

第2步:下载主题并配置

Hugo与Hexo不一样,没有默认主题,所以需要自主下载博客主题,可前往themes挑选喜爱的主题。下载完成后解压到d/MyBlog/themes文件夹里,如果没有就手动创建一个。

在下载的主题文件夹里的exampleSite找到config.toml,复制到d/MyBlog文件夹里,打开复制过来的config.toml,在前面第一个baseURL = "https://你的github用户名.github.io/"填写你的GithubPage,如果有自己的域名,可填写自己的域名网址。

第3步:新建文章

切回Git Bash,输入以下指令:

1
2
$ cd /d/MyBlog
$ hugo new post/第一篇文章.md

这时在D:\MyBlog\content\post\里就会出现第一篇文章.md了,打开并写入你想写的内容即可。

注意:新创建的 md 文档需要将原来 draft (草稿)后的 true 改为 false 才能在预览的时候加载出来。

接着可输入以下指令生成本地预览,浏览器输入http://localhost:1313/查看效果,输入Ctrl+C可终止预览。

1
2
3
$ hugo serve
或
$ hugo server -D

第4步:构建 Hugo 网站

输入cd /d/MyBlog,执行 hugo 指令来构建你的 Hugo 网站,默认会将静态站点保存到 public 目录中。

接着按顺序执行以下指令:

1
2
3
4
5
6
$ cd /d/MyBlog/public
$ git init
$ git remote add origin https://github.com/你的github用户名/你的github用户名.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

如果遇到time out 443错误,则开启全局代理,执行以下指令:

1
2
$ git config --global http.proxy http://127.0.0.1:1080
$ git config --global https.proxy http://127.0.0.1:1080

如果还是错误,则把1080改成你代理的端口号,比如我是7890。

应该不会再错误了,接下来再执行前面构建的步骤:

1
$ git push -u origin master

成功push!恭喜你,搭好了自己的博客!在浏览器访问你的github用户名.github.io就可以看到你的博客啦!

第5步:更新文章

重新走第3步,接着按顺序执行以下指令:

1
2
3
4
5
6
$ hugo
$ cd public
$ git add .
$ git status
$ git commit -m "add blog post"
$ git push

完成!撒花🌸🌸🌸

结语

博客完全属于你自己!不会有屏蔽词来限制你的写作,支持评论,支持自定义CSS,完全可以打造出属于你审美的完美博客!

一些進階操作

利用Github Pages与Github Action搭建并部署Hugo博客

Git恢复之前版本的两种方法reset、revert

主题美化与博客功能增强

Hugo+Loveit优化记