基于wowchemy和Hugo搭建个人博客
本文基于wowchemy,一个面向hugo这个博客框架的搭建方案,在win10下进行。
先看看网站效果:demo
概述
hugo安装后,有一种new site的方式,直接创建站点,然后,下载主题到themes文件夹的方式来使用相应的主题,这种方式通用,可以使用hugo官方提供的不少主题。但由于本文使用了academic主题,貌似被wowchemy托管了,就相当于基于wowchemy方式搭建了。
BTW,也可以基于wewchemy快速搭建个人网站,用github快速创建站点,并部署在netlify的方式,并基于netlify提供的CMS作为后台在线编辑站点内容的方式,wowchemy官网上来就是这样的部署方式,非常快捷。
本文采用另一种方式:在本地构建academic的hugo仓库,并部署到github上。
1、环境准备
- 下载hugo,并配置环境
这里可以有两种方式。第一种:用命令行choco/scoop方式下载hugo,该方式还需要下载choco/scoop这样的windows包管理工具。要用powershell终端下载包管理工具,而不是bash或者cmd。
第二种是去官方下载windows的zip包,这里要特别注意要下extend版本的。
解压后生成hugo.exe所在的一个文件夹。
然后把hugo.exe配置到系统变量的path中。
- 安装go,并配置环境
由于一般的hugo建造网站方式,在hugo new site生成的网站文件夹下打开bash,然后hugo server
就可启动本地的服务,在localhost:1313
就可访问到本地hugo生成的站点,但是使用该academic主题在网站文件夹下通过hugo server
启动站点时,会缺少可执行的go文件,所以需要安装go。
Windows 下可以使用 .msi 后缀(在下载列表中可以找到该文件,如go1.4.2.windows-amd64.msi)的安装包来安装。
将安装的目录:Go\bin 目录添加到 Path 环境变量中。添加后,重启命令窗口才能生效。
2、Fork Academic 主题repo到自己的github
academic作为一个template,应该是和网站文件夹作为一个整体。
将academic templatefork后,clone到本地,这就是用于在本地修改文件的仓库。
ps:最好用ssh方式来clone,以免每次push都要输入用户名和密码,当然如果https方式clone的,也可以用相应的办法每次都输入用户名和密码。
3、修改本地仓库,进行配置和写文章
config是一些有关该站点的配置,可以修改title和站点部署的url。
content/post里面写academic主题所要展示的文章。
在academic主题文档有很详细的配置信息。
4、部署站点到github
先新建一个repo,命名为你的githubName.github.io
。
然后cd到clone到本地的academic主题网站文件夹中,执行以下命令
# 更新网站文件夹的子模块
git submodule update --init --recursive
# 将github.io那个仓库作为网站文件夹的子模块,并设置为网站文件夹的public文件夹,执行完本行,会生成public文件夹,并关联到远程仓库
git submodule add -f -b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public
之后,每次网站文件夹修改过文件(格式设置或者新增文章等),生成静态文件,都会生成到public文件夹中,public文件夹再和github.io那个仓库相关联,就完成了本地网站文件夹部署到github上的动作。
在修改本地网站文件夹(除了public文件夹)后,可以执行hugo server
,在本地(localhost:1313)查看效果。
这里,可以在修改网站文件夹的文件后push到远程仓库(fork了academic template的那个仓库),但其实没有必要,因为最后展示的网站都是基于github.io那个repo来展示效果的。
待新增文章等等,本地调试ok后,可执行以下命令,生成静态文件到public中,并push到远程仓库。
hugo #生成静态资源到public文件夹
cd public
git add .
git commit -m "Build website"
git push origin master #public仓库push到github.io那个仓库
待push完之后,就可以按照 yourGithubName.github.io
来访问你的个人网站了!
最后,是自己的站点:plancer16