0%

hugo搭建静态博客

Hugo是一个用Go语言编写的静态网站生成器。静态网页是指存放在服务器中的的HTML文件,经渲染后呈现给用户,相比一些动态网站,其内容相对稳定,不需要数据库支持 Hugo官方网站:https://gohugo.io/,使用前需准备好Git(方便操作)和Github账户(如果想搭建基于Github的博客的话)即可

下载及安装

下载最新版本https://github.com/gohugoio/hugo/releases

压缩到任意位置(如果长久使用可以放在系统目录下,如果是在window上的话,则是C盘),然后设置环境变量(不设置也行,使用时加路径即可)

使用下述命令,无报错输出则为正常

./hugo.exe version
./hugo.exe --help

生成博客目录

新建一个博客路径

./hugo.exe new site myblog
cd myblog/

提示:Congratulations! Your new Hugo site is created in XXX 说明OK了

hugo会生成以下几个文件夹以及config.toml文件:

  • archetypes:设定自定义的头文件
  • content:存放网站内容页,也就是博客文章,.md格式
  • data:存放网站所要用到的一些配置、数据文件、自定义模板,toml/yaml/json格式
  • layouts:存放的是网站的模板文件,渲染content目录下的内容
  • static:存放js/css/img等静态资源
  • themes:存放主题相关文件

接着挑选主题,可以在Hugo官网上选择https://themes.gohugo.io/

我选择了hugo-nuo主题(PS. 觉得hermit也不错),切换到themes目录,下载该主题

git clone https://github.com/laozhu/hugo-nuo.git

激活hugo-nuo主题需要将./themes/hugo-nuo/exampleSite/config.toml文件替换当前myblog目录下的config.toml文件;config.toml文件是hugo的全局配置文件,用来配置整个站点的信息

尝试运行下hugo看看主题是否生效:../hugo.exe server -D,然后浏览器中打开http://localhost:1313/

创建博客post目录,并利用hugo生成第一个post.md

../hugo.exe new post/first-post.md

我们会发现first-post.md头文件部分跟主题是一样的哈,里面draft: true表示这篇文章还是草稿状态,hugo默认是不会渲染草稿状态的文章,可以在完成博客后将其改成false;PS. 上述启动hugo网站时我加了-D参数,所以其还是会显示草稿

因为是测试,所以可以先将主题中示例的内容以及配置文件先都搬过来,后续在依次修改

cp -R ./themes/hugo-nuo/archetypes/post.md ./archetypes/
cp -R ./themes/hugo-nuo/exampleSite/content/* ./content/
cp -R ./themes/hugo-nuo/static/* ./static/
cp -R ./themes/hugo-nuo/exampleSite/data/* ./data/
cp -R ./themes/hugo-nuo/exampleSite/assets/* ./

接下来则是按照个人情况修改网站的一些配置,比如博客名称等等

如果是使用某个主题的话,可以先查看主题主页的使用说明:https://github.com/laozhu/hugo-nuo

hugo-nuo主题还有中文帮助文档(更加方便了~):https://laozhu.me/post/hugo-nuo-theme/,因为各个主题的配置不尽相同,需要根据文档来修改

部署到Github上

首先在Github上建个仓库,命名为:kaigu1990.github.io(其中kaigu是github用户名),然后修改config.toml配置文件

baseURL = "https://kaigu1990.github.io"

接着运行../hugo.exe -D命令调试下,其会在站点目录下生成一个public文件夹(如果你在配置文件中加入publishDir = "xxx",那么则会生成xxx文件夹)

然后将public文件夹里的所有文件push到上述仓库中

cd public/
git init
git add .
git commit -m 'Add a first blog'
git remote add origin https://github.com/kaigu1990/kaigu1990.github.io.git
git push -u origin master

最后我的备用站点(静态网页)就OK了,如https://kaigu1990.github.io/

后续只剩下慢慢添加文章以及以主题模板为基础,做一些个性化的配置修改

以我现在的粗浅的理解来看,静态博客网站比较简洁,选择好主题后,只要把文章以md格式上传即可;对于类似wordpress等博客系统而言,其功能更加多点,通过鼠标点点点即可添加好多插件。。。所以如果喜欢简单页面的人来说,hugo足够满足一般的需求(总能找到满意的主题~),但想增加一些好玩的插件,而自己不会写代码的话,就有点心有余而力不足了(比如我想添加分类页,就暂时不知道咋搞)。。。

参考资料:
在Github使用Hugo搭建个人博客
用 Hugo 30 分钟搭建静态博客

本文出自于http://www.bioinfo-scrounger.com转载请注明出处