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

Page content

前期准备

第 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,输入以下指令:

brew install hugo

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

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 是名字

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 ,输入以下指令:

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

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

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

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

hugo serve

hugo server -D

第 4 步:构建 Hugo 网站

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

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

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错误,则开启全局代理,执行以下指令:

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

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

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

git push -u origin master

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

第 5 步:更新文章

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

hugo
cd public
git add .
git status
git commit -m "add blog post"
git push

完成!撒花🌸🌸🌸

结语

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

相关參考