用Hugo搭建个人博客与用GitHub Pages预览HTML

2,006 阅读2分钟

第一步:下载hugo(Windows用户)

  1. hugo下载地址下载hugo-xxx-Windows-64bit.zip压缩包
  2. 解压,把hugo.exe放到D:\Software\hugo\里去(没有该路径就创建)
  3. 把目录D:\Software\hugo\加入环境变量中去
  • 打开资源管理器→右键点击此电脑→属性→高级系统设置→环境变量→双击Path→新建→把目录D:\Software\hugo\写入→确定即可
  1. 重启终端,执行命令hugo version来查看hugo的版本。此命令成功执行即代表安装成功。

打开hugo官网,点击Quick start,按照里面的step2-7操作

第二步:创建一个新站点

  1. 打开终端,在用户目录(/c/user/jj)里新建一个目录bb,之后都在此目录下操作。
mkdir bb
cd bb

2.hugo new site Yibo-Hao.github.io-creator

#此命令用于新建一个站点Yibo-Hao.github.io-creator,bb目录中会新建一个目录Yibo-Hao.github.io-creator

第三步:增加一个主题

  1. code Yibo-Hao.github.io-creator #用VSCode打开目录
  2. 新建终端并且执行命令git init把该目录初始化为一个Git仓库
  3. git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke#设置主题ananke
  4. echo 'theme = "ananke"' >> config.toml#设置主题ananke

第四步:可以在里面写点内容了

hugo new posts/第一篇博客.md

#在目录Yibo-Hao.github.io-creator/content/content/posts/中新建了一个Markdown文件第一篇博客.md

#编辑好后记得改为draft:false(把草稿改为否)

第五步:预览写好的博客

hugo server -D#用于预览草稿

hugo server#用于预览非草稿

#运行结果会给出一个网址,Ctrl+单击即可打开

第六步:自定义我的站点

在VSCode中打开文件config.toml来编辑

baseURL = "https://example.org/"
languageCode = "zh-Hans"   #语言设为中文简体
title = "bb的博客"         #站点名称设为bb的博客
theme = "ananke"

第七步:建立静态页面

hugo

#该命令在站点目录下新建一个public目录,这个public目录其实就是个网站,里面是我们的博客。

#下面的步骤将会教我们如何看到这个网站(即用 Github Pages预览HTML)

以下第八步到第十步也是“用 Github Pages预览HTML”的步骤

第八步:把public目录变成一个本地仓库

  1. 在站点目录新建文件.gitignore,并把/public/写入该文件中。

    #此步骤是为了让站点仓库忽略public目录

cd public
git init
git add .
git commit -m 第一次部署

第九步:新建远程仓库Yibo-Hao.github.io

  1. 在Github中新建一个空仓库,命名为Yibo-Hao.github.io
  2. 把本地仓库public推送到远程仓库中去
git remote add origin git@github.com:Yibo-Hao/Yibo-Hao.github.io
git push -u origin master

第十步:用Github Pages预览HTML

  1. 刷新远程仓库
  2. 点击settings
  3. 找到Github Pages,选择master并保存
  4. 这时Github Pages里会出现个网址https://Yibo-Hao.github.io/,点进去即可看到这个远程仓库的HTML预览,也就是我们的博客。

第十一步:再写一篇新博客

cd ..    #切换到站点目录
hugo new posts/第二篇博客.md
hugo
cd public
git add .
git commmit
git pull
git push -m 第二次部署