我从2010年开始搭建个人独立博客网站一直用的都是Wordpress系统,到今年(2019)边学边用已经使用了9年多了,从刚开始的2.+版本到现在的3.99版我一直认为Wordpress是最好的博客系统。但是使用Wordpress的一个弊端就是你会把主要精力都放在了完善功能和美化主题上,因为Wordpress的主题、插件和各种教程多如牛毛, 不能够专心的去写文章违背了我建博客的初心。

随着年龄的增长我逐渐认识到不能再这么折腾下去了,如果博客里没有高质量的文章再漂亮的界面也只是个摆设而已。在发现了Hugo后我决定放弃Wordpress,下面列出一些理由仅供参考:

  • Wordpress需要主机PHP和数据库支持,Hugo是生成纯静态网页文件可以免费部署到Github Pages上或一切服务器主机上
  • Wordpress的主题和插件太多了,如果你有个不安份的心会把主要精力都放在修改主题和插件上(比如我),最后折腾到怀疑人生
  • Hugo的安装和使用都是简洁高效的,特别是本地服务器预览非常棒(至于我为什么使用Hugo而不是Hexo完全是机缘巧合)
  • Hugo可以使用Markdown编辑器写文章
  • 老了不想再折腾了,烦透了Wordpress的频繁更新

下面并不是一个完整的教程,只是我的一个操作记录,边学边用一直是我的建站指导思想。

安装Git和Hugo

首先安装Git,下载地址:https://git-scm.com/downloads 选择对应系统安装文件下载,如果不会安装使用请到网上搜索详细安装配置教程,这里不另说明。

然后安装Hugo下载地址:https://github.com/gohugoio/hugo/releases 下载二进制包安装
Windows用户直接下载适合自己系统版本的压缩包文件,比如 hugo_0.XX.X_Windows-64bit.zip然后解压在你本地的博客目录就可以了,比如D:\Hugo并得到文件D:\Hugo\hugo.exe
如果想在任意目录中使用可以添加到 Windows 的系统环境变量的 PATH 中即可(详细操作请搜索网络)。

使用Hugo构建网站

在D:\Hugo目录右键打开Git Bash,创建命令如下:

hugo new site [blog] # []内填写你的目录名称,例如我的站点名称是blog

创建完成后,在blog/文件夹下会生成以下文件结构:

.
├── archetypes # 存放生成博客的模版
├── assets # 存放被 Hugo Pipes 处理的文件
├── config # 存放 hugo 配置文件 支持 JSON YAML TOML 三种格式配置文件
├── content # 存放 MD 文件
├── data # 存放 Hugo 处理的数据
├── layouts # 存放布局文件
├── static # 存放静态文件 图片 CSS JS文件
└── themes # 存放主题

这样就生成了一个空的网站,如果要预览这个网站还要先安装一个Hugo主题才行。

安装主题并生成本地网站

可以在官网上下载https://themes.gohugo.io/很多免费开源的主题,基本上所有的主题都会自带安装方法,并且每个主题的config配置文件基本是不一样的。
我使用的是”飞雪无情”版本的Hugo maupassant主题,你可以这样安装

cd blog
git clone https://github.com/rujews/maupassant-hugo themes/maupassant

也可以下载下来放到themes/文件夹内,然后在Hugo的配置文件config.toml(yaml,json)中进行主题配置,详细配置请参考:https://github.com/rujews/maupassant-hugo

本地预览网站,在博客目录右键打开Git Bash输入以下命令,启动Hugo本地服务:

hugo server -D

浏览器打开http://localhost:1313/即可查看网站效果。

终止服务可以使用快捷键:Ctrl + C

为博客添加新页面和文章

发布文章的命令为:

hugo new post/new-post.md

页面为:

hugo new new-page.md

编辑content/post/目录下的.md文件更新文章,写文章前请配置好Front Matter我的文章是这样配置的

+++
title = "标题"
date = "2019-07-19T08:05:22+08:00" # 发布时间
categories = ["分类名称"]
tags = ["标签"]
url = "/web/1.html" # 强制指定文章URL
toc = true # 开启文章目录
+++

然后在第2个+++下面使用Markdown语法写文章即可
注意:如里有draft参数是控制网站上该页面是否显示。设置为false或者去掉该参数文章才能显示。使用自定义文章摘要可以在文章中插入<!--more-->之前的内容会自动作为页面摘要。
到此一个本地博客就制作完成了,如果需要部署到网络上请继续往下看。

发布博客到Github并使用Github Pages免费托管

为了部署到网络上,需要将本地博客文件打包成静态HTML文件。打包命令如下,maupassant是主题名:

hugo -t maupassant

此时会在blog/里生成一个public/文件夹,里面就是生成好的博客HTML文件,理论上可以部署在任何服务器主机上。

下面以部署到Github Pages为例做个简要说明:

首先在GitHub上创建一个Repository,命名为 youname.github.io(youname是你的账户名),如果没有GitHub账户可以免费注册一个。

然后进入public/目录按照正常Git命令操作

$ cd public
$ git init
$ git remote add origin https://github.com/youname/youname.github.io.git # youname换成你的账户名
$ git add -A
$ git commit -m "操作说明"
$ git push -u origin master

上传成功就可以在浏览器里访问你的博客了:https://youname.github.io/

关于Git和GitHub的使用我也一知半解正在学习中,这里就不做详细说明了。

使用中遇到的问题

首次上传到GitHub成功后,博客更新后再次上传就一直出错,在网上参考了大量的教程也不得要领。后来想到GitHub已经被微软收购了肯定会开发Windows桌面客户端,在网上搜了一下还真有GitHub客户端只提供windows 64bit和mac版本。
抱着试试看的态度下载安装使用后发现一切都正常了,而且图形化操作异常简单推荐GitHub新手使用,网上也有很多使用教程不会的可以搜一下,我做为一名新手在这里就不班门弄斧了。

后记

大概半个月前在网上闲逛的时候看到了“烧饼博客”上的一篇文章《使用 Hugo 生成静态博客教程》让我突然发现原来博客还可以这么玩,由于原文写的并不是太详细我就开始在网上搜索大量的Hugo相关教程。
大大小小的坑一路踩下来终于把博客部署到了Github Pages,又花了几天时间把我原来的Wordpress博客上的文章拷贝了过来,只是目前本站的主域名:imfang.net还是解析在Wordpress博客上,Github Pages上的博客暂时做为备份使用二级域名:blog.imfang.net
我会同时在这两个博客上更新文章,如果哪天我的主机商不再提供赞助了那就到了正式和Wordpress说再见的时候了。

最后感谢烧饼博客让我认识了Hugo,感谢飞雪无情分享的漂亮主题,以及在网络上分享Git,Github,Hugo经验的所有开源爱好者们。