之前一直使用pugo作为blog的搭建工具,最近有一些新的功能需要使用,就换成Hugo来搭建了。 下面记录整个过程。

1 最终搭建的链接和效果图

博客访问入口 https://www.michaelapp.com/

HomePage

2 搭建博客系统结构图

特性:

  • (1) 支持MarkDown

  • (2) 支持评论

  • (3) 支持自定义Menu

  • (4) 支持统计

  • (5) 支持搜索

  • (6) 支持Google统计

搭建的系统图: Architecture

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可以配置出更多的功能(菜单,统计,评论,分页数,阅读数等)

我的blog配置如下:

baseURL = "https://www.michaelapp.com/"
languageCode = "zh-CN"
title = "Michael.Pan的博客"
theme = "maupassant"
googleAnalytics = "UA-xxxxx-1"
hasCJKLanguage = true
copyright = "&copy; 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