我从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,创建命令如下:
1 | hugo new site [blog] # []???????????????????blog |
创建完成后,在blog/文件夹下会生成以下文件结构:
1 2 3 4 5 6 7 8 9 | . ??? 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主题,你可以这样安装
1 2 | 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本地服务:
1 | hugo server -D |
浏览器打开
终止服务可以使用快捷键:Ctrl + C
## 为博客添加新页面和文章
发布文章的命令为:
1 | hugo new post/new-post.md |
页面为:
1 | hugo new new-page.md |
编辑content/post/目录下的.md文件更新文章,写文章前请配置好Front Matter我的文章是这样配置的
1 2 3 4 5 6 7 8 | +++ 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是主题名:
1 | hugo -t maupassant |
此时会在blog/里生成一个public/文件夹,里面就是生成好的博客HTML文件,理论上可以部署在任何服务器主机上。
下面以部署到Github Pages为例做个简要说明:
首先在[GitHub](https://github.com/)上创建一个Repository,命名为 youname.github.io(youname是你的账户名),如果没有GitHub账户可以免费注册一个。
然后进入public/目录按照正常Git命令操作
1 2 3 4 5 6 | $ 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客户端](https://desktop.github.com/)只提供windows 64bit和mac版本。
抱着试试看的态度下载安装使用后发现一切都正常了,而且图形化操作异常简单推荐GitHub新手使用,网上也有很多使用教程不会的可以搜一下,我做为一名新手在这里就不班门弄斧了。
## 后记
大概半个月前在网上闲逛的时候看到了“烧饼博客”上的一篇文章[《使用 Hugo 生成静态博客教程》](https://sb.sb/blog/migrate-to-hugo/)让我突然发现原来博客还可以这么玩,由于原文写的并不是太详细我就开始在网上搜索大量的Hugo相关教程。
大大小小的坑一路踩下来终于把博客部署到了Github Pages,又花了几天时间把我原来的Wordpress博客上的文章拷贝了过来,只是目前本站的主域名:[imfang.net](http://imfang.net/)还是解析在Wordpress博客上,Github Pages上的博客暂时做为备份使用二级域名:[blog.imfang.net](http://blog.imfang.net/)。
我会同时在这两个博客上更新文章,如果哪天我的主机商不再提供赞助了那就到了正式和Wordpress说再见的时候了。
最后感谢[烧饼博客](https://sb.sb/)让我认识了Hugo,感谢[飞雪无情](https://www.flysnow.org)分享的漂亮主题,以及在网络上分享Git,Github,Hugo经验的所有开源爱好者们。