Hugo本地环境搭建以及网站预览

本文介绍如何在Windows环境下安装Hugo环境,并且用VS code编写文章,本地进行预览调试,调试完成无问题后使用Github desktop将修改上传至Github仓库,经由Vercel自动编译部署上线,属于最基本的操作,希望对于刚上手第一次接触Hugo环境的用于能有一点启发,也作为我学习的记录。

Hugo本地环境安装

hugo下载地址:https://github.com/gohugoio/hugo/releases

版本很多,下载Hugo extended版本,不然主题一些特性无法支持,我下载的是hugo_extended_withdeploy_0.145.0_windows-amd64.zip这个包,解压缩到一个目录,注意要是英文路径,比如C:\Hugo\bin里面只有一个有用的文件就是Hugo.exe,把它的路径添加到系统环境变量即可,右键开始菜单,打开有管理员权限的命令行或者PowerShell界面,运行命令set PATH=%PATH%;C:\Hugo\bin将 C:\Hugo\bin(或者您hugo.exe文件所在其他位置), 这样就将hugo.exe 添加到您的系统变量中,我们就可以在命令行中执行hugo相关的命令了。在命令行或者PowerShell中执行命令Hugo version出现hugo的版本号信息,类似这种hugo v0.145.0-....VendorInfo=gohugoio就表示安装成功了。

本地网站预览

在命令行中使用cd命令将当前目录切换到网站本地根目录,详见这篇文章使用Github、Vercel托管免费部署Hugo博客网站,执行hugo server -D命令构建本地站点,可看到如下界面,即代表编译成功

hugo-server-d

打开浏览器,输入本地地址 http://localhost:1313 即可查看网站的本地预览效果,有不合适的地方可以进行修改,修改后不需要重新执行hugo server -D,只需要刷新页面就可以看到新的内容,修改直至无问题后提交到Github仓库就能发布到正式环境了。

文章编写

因为我使用的是VS code和github desktop,新发布文章只需要在mywebsite\content\post网站这个路径下,新建一个文件夹,比如命名为build-hugo-site,在这个文件夹下新建一个index.md的文件即可,我的博客正文内容只需要编写这个文件,要引用相关的图片也只需要放在这个目录下。模板中已经有一些实例文章,一看便知,编写新文章可以直接选择一个文件夹复制在上面修改后通过本地预览看一下效果,逐步调整。