基于「Hugo」搭建个人博客网站

前言

搭建个人网站,以前我们一般会选择 WordPress,因为其使用范围广(据说全世界 80%的网站都是用它搭建的)、主题丰富、上手简单。

近年来,markdown 内容格式渐渐流行,我们更愿意使用 markdown 格式来写文章,写完后用静态网站生成工具把文章内容转换成 html 格式,再发布到个人网站。生成静态网站的工具中,比较优秀的有 Jekyll、Hexo、Hugo 几个。

简单比较一下动态网站框架 WordPress 与静态网站生成框架 Hexo、Hugo 的区别:

综合来看,我还是比较推荐使用 Hugo 来搭建个人网站。

安装 Hugo

MacOS 系统下,可以使用 brew 来进行安装。

brew install hugo
复制代码

安装完后,可以全局使用 Hugo 命令

hugo version
复制代码

创建个人网站

hugo new site myblog
复制代码

进入创建的 myblog 目录,可以看到生成的目录结构长这样:

.
├── archetypes
│  └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
复制代码

选择一个主题

创建完网站之后,我们可以在 Hugo 官方的 主题商店 选择一个自己喜欢的主题,并下载下来使用。

这里以 hugo-notepadium 这个主题为例,进入上一步创建的个人网站,并克隆主题到 themes 文件夹:

git clone https://github.com/cntrump/hugo-notepadium.git themes/hugo-notepadium
复制代码

.
├── archetypes
│  └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
 └── hugo-notepadium
复制代码

修改网站配置

修改站点配置文件 config.toml ,填写自己的网站信息和使用的主题名称,也可以根据 主题说明 里示例的配置信息来自定义网站内容。

baseURL = "https://example.com"
title = "MyBlog"
theme = "hugo-notepadium"
copyright = "©2020 my name."
复制代码

创建文章

接下来我们可以开始写文章了,通过:

hugo new posts/helloworld.md
复制代码

新建一篇文章。在生成的文件中使用 markdown 格式来书写文章内容。

---
title: "Helloworld"
date: 2020年04月19日T23:56:47+08:00
draft: true
---
## 说明
> HelloWorld
这是内容
复制代码

网站预览

执行 server 命令,对所有已发布和编辑中的文章进行预览:

hugo server -D
复制代码

发布内容

写完文章,预览没问题后,可以更改文章的草稿状态 draft: false,然后编译生成静态网站内容了:

hugo -t hugo-notepadium
复制代码

可以看到,几乎瞬间完成编译工作。生成的静态内容都在 public 目录下面:

public
├── 404.html
├── categories
├── css
├── index.html
├── index.xml
├── page
├── posts
├── sitemap.xml
└── tags
复制代码

部署到线上

最简单的部署方式,只需要把 public 目录下的内容上传到 Github,并使用 Github Pages 创建一个站点,就可以通过:xxx.github.io 访问了,还可以绑定自定义域名。

也可以自己写一个 shell 脚本,做到每次编译完文章后自动同步 public 目录下的内容到 Github 或者自己的服务器,来保持线上站点的内容及时更新。

总结

通过前面的步骤我们看到通过 Hugo 创建静态网站是非常方便的,并且发布前的编译速度也非常快。比起传统的动态网站,可能不足的地方在于没有可视化后台来随时新增或修改 markdown 内容,但是实际上也是可以做到的,我们可以选择开发自己的主题,在主题开发过程中,我们可以通过 getJSON 来获取 API 传递的动态数据,有了这个功能,说不定就可以很好的结合动态网站与静态网站的优势了。以后有时间再讲一下如何开发自定义主题吧。

参考

• Hugo 官方文档
• Hugo 主题商城
• hugo-notepadium

欢迎关注我的公众号,或在评论区给我留言。

原文阅读地址:idoubi.cc/posts/build...

本文来自:掘金

感谢作者:艾逗笔

查看原文:基于「Hugo」搭建个人博客网站

• 编辑
• 预览