Hugo搭建自己的blog
之前一直使用pugo作为blog的搭建工具,最近有一些新的功能需要使用,就换成Hugo来搭建了。 下面记录整个过程。
1 最终搭建的链接和效果图
博客访问入口 https://www.michaelapp.com/
2 搭建博客系统结构图
特性:
(1) 支持MarkDown
(2) 支持评论
(3) 支持自定义Menu
(4) 支持统计
(5) 支持搜索
(6) 支持Google统计
搭建的系统图:
3 使用到的工具 Caddy
Caddy 实现HTTPS和反向代理功能,其能自动下载和更新HTTPS证书,其主要特点是配置极其简单.
下载:https://caddyserver.com/download
Caddy配置文件路径 /etc/caddy/Caddyfile,如无该文件,自行建立一个 配置(/etc/caddy/Caddyfile)如下: 外部端口80, 本地端口2000
https://www.michaelapp.com {
proxy / 127.0.0.1:2000
}
4 使用到的工具Hugo和主题
https://github.com/gohugoio/hugo/releases 下载hugo_0.53_Windows-64bit.zip
创建主页
$ mkdir blogtest
$ cd blogtest
$ hugo new site myselfsite
输出下面内容,表示创建OK!
Congratulations! Your new Hugo site is created in E:\blogtest\myselfsite.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
查看创建的目录
$ ls -l myselfsite
drwxr-xr-x 1 Think 197121 0 1月 30 14:37 archetypes/
-rw-r--r-- 1 Think 197121 82 1月 30 14:37 config.toml
drwxr-xr-x 1 Think 197121 0 1月 30 14:37 content/
drwxr-xr-x 1 Think 197121 0 1月 30 14:37 data/
drwxr-xr-x 1 Think 197121 0 1月 30 14:37 layouts/
drwxr-xr-x 1 Think 197121 0 1月 30 14:37 static/
drwxr-xr-x 1 Think 197121 0 1月 30 14:37 themes/
$ cd myselfsite
查看站点
$ hugo server
Watching for changes in E:\blogtest\myselfsite\{content,data,layouts,static}
Watching for config changes in E:\blogtest\myselfsite\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
此时查看到的是一个空的页面 下面建立一篇博客
$ cd myselfsite
$ hugo new post/first.md
$ hugo server --buildDrafts --watch
此时查看到的仍然是一个空的页面,由于还没有主题
$ cd myselfsite
$ git clone https://github.com/rujews/maupassant-hugo themes/maupassant
$ hugo server --theme=maupassant --buildDrafts --watch
此时再访问 localhost:1313 就可以看到内容了
5 config.toml 参数配置
config.toml可以配置出更多的功能(菜单,统计,评论,分页数,阅读数等)
baseURL = "https://www.michaelapp.com/"
languageCode = "zh-CN"
title = "Michael.Pan的博客"
theme = "maupassant"
googleAnalytics = "UA-xxxxx-1"
hasCJKLanguage = true
copyright = "© 2019. All rights reserved."
relativeurls = true
## 保持分类的原始名字(false会做转小写处理)
preserveTaxonomyNames = true
## 是否禁止URL Path转小写
disablePathToLower = true
# 分页
paginate = 10
paginatePath = "page"
archive-paginate = 50
[author]
name = "Michael.Pan"
[params]
author = "Michael.Pan"
subtitle = "专注于物联网、人工智能、AR/VR、Android等软件设计和研发"
keywords = "iot,ar,vr,ai,go语言,golang,Michael.Pan,博客,项目管理,软件架构"
description = "专注于物联网、人工智能、AR/VR、Android等软件设计和研发"
[params.features]
enable = true
[menu]
[[menu.main]]
identifier = "archives"
name = "全部"
url = "/archives/"
weight = 2
[[menu.main]]
identifier = "about"
name = "关于"
url = "/about/"
weight = 5
##更多详见 https://utteranc.es
[params.utteranc]
enable = true
repo = "panyingyun/utterances" # 存储评论的Repo,格式为 owner/repo
issueTerm = "pathname" #表示你选择以那种方式让github issue的评论和你的文章关联。
theme = "github-light" # 样式主题,有github-light和github-dark两种
[params.busuanzi]
busuanzi = true
其余更多配置可以参考: https://github.com/rujews/maupassant-hugo
6 打包Blog为服务
使用下面的命令,生成public目录,即blog的全部文件
$ cd myselfsite
$ hugo
有几种方法将Caddy 和 静态文件联系起来。
Caddy + Caddy Hugo插件的方式,看到过,但没试过。
这里选择 Macaron(go web server) + 二进制打包的方式进行。
Macaron原生就支持二进制打包,这样部署起来非常方便,主要代码如下。
func StartHttpServer(addr string) {
macaron.Env = macaron.PROD
m := macaron.New()
m.Use(macaron.Logger())
m.Use(macaron.Recovery())
m.Use(macaron.Static("public",
macaron.StaticOptions{
FileSystem: bindata.Static(bindata.Options{
Asset: public.Asset,
AssetDir: public.AssetDir,
AssetNames: public.AssetNames,
AssetInfo: public.AssetInfo,
Prefix: "",
}),
},
))
m.Use(macaron.Renderer(macaron.RenderOptions{
TemplateFileSystem: bindata.Templates(bindata.Options{
Asset: templates.Asset,
AssetDir: templates.AssetDir,
AssetNames: templates.AssetNames,
AssetInfo: templates.AssetInfo,
Prefix: "templates",
}),
}))
//Test Web
//m.Get("/:name", appserver)
m.RunAddr(addr)
}
其余代码请参见 https://github.com/panyingyun/blog 这样部署的好处,可以查看用户访问日志和响应时间
[Macaron] 2019-01-30 15:37:44: Started GET /posts/2016/2016-02-14-Google-Java-Code-Style/ for 45.32.52.106
[Macaron] [Static] Serving /posts/2016/2016-02-14-Google-Java-Code-Style/index.html
[Macaron] 2019-01-30 15:37:44: Completed /posts/2016/2016-02-14-Google-Java-Code-Style/ 200 OK in 817.549µs
[Macaron] 2019-01-30 15:37:50: Started GET /posts/2015/2015-11-23-CentOS7.0/ for 45.32.52.106
[Macaron] [Static] Serving /posts/2015/2015-11-23-CentOS7.0服务器软件安装/index.html
[Macaron] 2019-01-30 15:37:50: Completed /posts/2015/2015-11-23-CentOS7.0/ 200 OK in 1.806836ms
[Macaron] 2019-01-30 15:38:26: Started GET /posts/2014/2014-12-05-DPI/ for 45.32.52.106
[Macaron] [Static] Serving /posts/2014/2014-12-05-DPI和px直接的关系/index.html
[Macaron] 2019-01-30 15:38:26: Completed /posts/2014/2014-12-05-DPI/ 200 OK in 1.105492ms
[Macaron] 2019-01-30 15:38:48: Started GET /posts/2013/2013-09-25-/ for 45.32.52.106
[Macaron] [Static] Serving /posts/2013/2013-09-25-查看android-签名文件的有效期限/index.html
[Macaron] 2019-01-30 15:38:48: Completed /posts/2013/2013-09-25-/ 200 OK in 4.605274ms
[Macaron] 2019-01-30 15:38:55: Started GET /posts/2013/2013-09-25-/ for 45.32.52.106
[Macaron] [Static] Serving /posts/2013/2013-09-25-Android进程的内存管理分析/index.html
[Macaron] 2019-01-30 15:38:55: Completed /posts/2013/2013-09-25-/ 200 OK in 675.09µs
[Macaron] 2019-01-30 15:38:59: Started GET /posts/2013/2013-09-25-/ for 45.32.52.106
[Macaron] [Static] Serving /posts/2013/2013-09-25-待研究内容/index.html
[Macaron] 2019-01-30 15:38:59: Completed /posts/2013/2013-09-25-/ 200 OK in 789.254µs