Hugo环境搭建和部署

hugo号称是The world’s fastest framework for building websites,是由go语言编写的,编译速度和运行速度都是杠杠的。不像hexo依赖于node.js,项目依赖模块多,hexo g生成网页也比较慢。和hexo比起来,hugo效率非常高,我更喜欢hugo的简洁,但是,我还是在这里分享一下一位大神的hexo建站大攻略吧,毕竟我也用了几天hexo。hexo史上最全搭建教程。 在这里,我整理了本站在Windows下搭建、部署及扩展应用的具体过程,具体如下:

1、到https://github.com/gohugoio/hugo/releases找到对应自己操作系统下载最新的安装包,我用的是win64,下载的是hugo_0.70.0_Windows-64bit.zip。

下载

下载后解压就行,其实只有一个文件有用,那就是hugo.exe,我把它放在E:\hugo\bin下。

解压

然后要在系统变量path下,把E:\hugo\bin加进去。

可以使用命令行:

setx Path "%Path%;E:/hugo/bin" /M

添加变量

2、打开cmd,输入hugo version,

hugo version

看到这样的提示,说明hugo安装成功了。

提示

3、安装成功后,用hugo来创建自己的博客站点,先用命令行cmd进入E:\hugo文件夹下,再使用hugo new site blog命令来创建一个博客新站点(其中blog为你的站点目录名字,可以随意改).

hugo new site blog

看到这些,说明创建成功。

提示

dir查看一下,果然多了个blog文件夹。

查看

cd blog进去,再dir看看。

查看

4、需要说明的是,然后站点创建成功了,但是hugo已经简洁到不自带主题的程度了,也就是说,在运行之前,我们需要弄一个主题,先去官网https://themes.gohugo.io/下载一个吧,至于想自己制作主题,还是以后学透了官方技术文档再说吧。

这里我选择m10c主题,以他为例子,说一下使用的方法: 把下载解压后的m10c文件夹copy到themes文件夹下,如果你的电脑安装了git,那么可以使用git clone命令,比如在themes文件夹下使用下面的命令:

git clone https://github.com/vaga/hugo-theme-m10c.git

如果看到这样的提示,就说明已经把这个主题下载完成了

提示

果然在themes文件夹下多了个主题文件夹

提示

5、启动博客:打开cmd,切换到blog所在位置(E:\hugo\blog),输入以下命令:

hugo server -t hugo-theme-m10c -D

-t 是指定主题,–D 包括草稿(大写)

如图所示,说明启动成功,可以打开http://localhost:1313/来预览效果

提示

光标在底部闪烁,说明调试程序正在监听,hugo的优点是,在监听状态下,如果你做任何程序上的修改(包括主程序、主题、文章等任何文件),它都会自动为你刷新,让你直接看到修改后的结果。ctrl+c是停止命令。

6、接下来就是创建文章,我们继续在根目录(E:\hugo\blog)下创建,使用下面的命令:

hugo new post/my_first_blog.md

如图则创建成功,

提示

my_first_blog.md将在E:\hugo\blog\content\post下生成。 打开 my_first_blog.md,默认内容为下:

title: "My_first_blog"
date: 2020-05-15T22:20:37+08:00
draft: true

其中draft 表示是否是草稿文件,编辑完成后请将其改为 false,否则编译会跳过草稿文件。

7、我们再来创建一个about页面

hugo new about.md

它的位置在E:\hugo\blog\content下,可以理解为一个独立的页面,就是“关于我”的页面,而上面创建的my_first_blog.md,是博客文章,属性不同。

8、我们打开浏览器,访问http://localhost:1313/来看看吧:

提示

看吧,创建的about和My_first_blog都自动出来了,说明我们成功了。 至于页面的编辑,使用的是MarkDown语言,都多编辑器都支持,比如VS Code、Sublime,还有各种网页在线的,都可以用。

9、至此,我们的hugo算是初步部署成功,但是目前的调试,只是把文件存在我们电脑的内存里进行访问,我们还需要执行一条命令来把我们调试无误的内容,生成能放在服务器的文件,很简单,只要在当前根目录(E:\hugo\blog\)下,运行:

hugo -t hugo-theme-m10c

看到这样的界面,说明文件生成成功了。

当然,如果在blog的根目录(E:\hugo\blog\)里的配置文件config.toml中指定了主题,就可以直接运行hugo命令,就可以生成文件了。指定主题方法就是加上一句:

theme = “hugo-theme-m10c”

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-theme-m10c"

提示

它们存放在E:\hugo\blog\public里面

提示

我们把这些文件(当然都是静态的),可以FTP传到你的主机上,也可以放到gitgub、coding、gitee等,它们都支持pages服务,当然,这里不做详细说明,可以自行百度。

通过前面的步骤我们看到通过 Hugo 创建静态网站是非常方便的,并且发布前的编译速度也非常快。比起传统的动态网站,可能不足的地方在于没有可视化后台来随时新增或修改 markdown 内容,但是实际上也是可以做到的,我们可以选择开发自己的主题,本站就是自己开发移植的hexo主题,以后有时间再讲一下如何开发自定义主题吧。