您诸位好啊,我是无尘。
身为一名技术人,怎么能没有一个属于自己的博客系统呢?难道要买一台云服务器?新用户还好,优惠力度不小,赶上个购物节,小几百就能买上几年的。然而非新用户就尴尬了,续费金额属实不便宜啊。
不卖关子了,说说今天的主角 Hugo,Hugo是由Go语言实现的静态网站生成器。可以将生成的静态页面部署到github。
准备工作:
- 有github账号
- 有安装 git
- 会使用 markdown 编写文档
身为技术人,我这里默认诸位已经准备好了,废话不多少,赶紧实战:
框架搭建
- 在 Hogo框架下载地址 下载自己合适的安装包:
我这里使用的是 windows-64,下载完成后,将安装包放到自己想安装的路径,解压即安装完成。如下图,只有简单的三个文件。
- 查看是否安装成功
在刚才解压的文件夹里面(hugo.exe所在文件夹),以管理员身份打开 cmd 控制器,输入hugo version
,看到如下图,说明安装无误。
生成个人博客站点
- 在 hugo.exe 所在文件夹中,管理员身份打开 cmd 控制台,输入
hugo new site myblog
,此处 “myblog” 是你自己的站点名字,可以自行定义。 - 执行完上面命令后会在 hugo.exe 文件夹中生成 myblog 文件夹及相关文件。
主题下载
-
这里是 Hugo主题下载地址 ,你可以自行选择喜欢的主题,我这里以 Hugo.386 为例:
-
如果你电脑已经安装了 Git ,可以使用 git 来进行下载:
- 打开 git bash ,切换到博客根目录(myblog文件夹中)
- 执行
git clone https://gitlab.com/maxlefou/hugo.386.git themes/hugo.386
- 下载完成后,主题在 myblog\themes\hugo.386 目录中。
如果你还没有安装 git ,也可以直接下载安装包文件,然后在myblog\themes 中新建 hugo.386 文件夹(主题文件夹名),将安装包解压到此处即可。
-
一般主题都带有示例文件,例如我的这个主题:
-
我们将 exampleSite 文件夹中的文件复制到博客根目录(myblog文件夹)中,直接覆盖替换。
-
这里说明下,不同主题示例中的内容略有不同。在我们的博客站点中 myblog/content/post/xxx.md ,这里是存放你的文章的地方,我们这里把主题文章示例覆盖博客文章来预览。
-
config.toml 为配置文件,后续我们可以进行站点配置(博客地址、构建配置、标题、导航栏等等)。
-
-
在博客根目录(myblog),cmd 执行
hogo server --theme=hugo.386 --buildDrafts
来启动站点服务。 -
在浏览器中打开地址 http://localhost:1313/ 查看是否启动成功
–theme : 指定主题
–buildDrafts : 引入 content 中的草稿文件
完美!
我的主题遇到的错误:
发现 content\post\rich-content.md 有问题,直接将此文件删除掉,重新构建
hugo server
//这里是简写,因为配置文件里已经说明了主题使用哪个。
部署到 GitHub
-
登录你的 GitHub 账号,创建一个仓库,注意:创建仓库的名称必须是你github的昵称且必须小写再加上.github.io
例如我的昵称是 wuchengshi,则输入 wuchengshi.github.io
-
cmd 切换到根目录下(myblog), 运行
hugo --theme=hugo.386 --baseUrl="https://wuchengshi.github.io" --buildDrafts
-
会在博客根目录 myblog 生成 public 文件夹,里面就是编译好的静态页面文件。在public目录下:
- 运行 git bash ,执行
git init
将public文件夹变成 git 本地仓库 - 执行
git add .
将文件夹所以文件放入暂存区 - 执行
git commit -m "my hugoblog"
提交暂存区到本地仓库中 - 执行
git remote add origin https://github.com/wuchengshi/wuchengshi.github.io.git
添加远程版本库 - 执行
git push -u origin master
将本地仓库代码推送到远程库
- 运行 git bash ,执行
-
最后,在浏览器中访问 https://wuchengshi.github.io/ ,即可看到自己的博客网站。
欢迎关注我的公众号“微客鸟窝”,有什么问题可与我沟通。