基于「Hugo」搭建我的博客网站

前言

搭建我的网站，之前咱们通常会选择 WordPress，由于其使用范围广（听说全世界 80%的网站都是用它搭建的）、主题丰富、上手简单。

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

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

项目	开发语言	优点	不便之处
WordPress	php	1. 有可视化后台能够编写文章； 2. 使用范围广； 3. 主题、插件丰富。	1. 依赖过多致使加载较慢； 2. 须要服务器部署，依赖数据库； 3. 数据须要定时备份。
Hexo	nodejs	1. 静态生成，SEO 友好； 2. npm 生态有丰富的插件可用于扩展功能。	1. 本地编译生成静态文件速度较慢； 2. 调试麻烦，常常遇到 js 报错。
Hugo	go	1. 编译速度最快; 2. 开发主题很是方便。	1. 目前主题数量较少。

综合来看，我仍是比较推荐使用 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-19T23: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…