Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
Hugo-部署静态网站设计的一些思考,希望能够帮助你!!!。

以下文章来源于架构实验室 ，作者Marionxue

架构实验室

☁️技术爱好者，探索和分享运维开发领域生态技术☯️

静态网站设计的个人思考

为什么要搭建自己的静态博客系统？

1. 写好的Markdown可以快速的发布到自己的博客网站上，不需要什么一键式多平台发布、自媒体自动同步(支持的不全面)
2. 没有广告，页面干净酸爽
3. 高度自由化，支持定制化css样式，可以了解和实践一些前端的知识。
4. 事件驱动学习，养成持续学习和分享的习惯，收纳总结常遇到的问题以及处理经验，毕竟有些东西慢慢的会忘掉的。
5. 通过公开的自己的笔记，暴露问题，从而发现问题，培养和理清自己思考问题的思路

博客网站的构建与部署思考

先看一下初期的设计图如下，将生成好的静态页面推送到代码仓库里面，然后通过GITHUB自带的GitHub Action自动的部署到云端主机上，同时将域名CNAME或者A到Github Pages是上或者云主机IP上。

定制化个人博客

我们这里使用Hugo这个静态网站生成工具来制作静态网站，该工具是通过Go编写的，因此小巧且资源占用少。下面本次实验的基础环境

软件版本系统Macos 10.15.5Hugohugo v0.73.0Zzo themeZzo[1]

在下载完成hugo之后，将其添加到系统的可执行的路径下,echo $PATH获取。

hugo new site linuxermaster.github.io # 创建一个名称为linuxermaster.github.io的博客工作目录 cd linuxermaster.github.io git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo git submodule update --remote --merge hugo server --themesDir ../.. # 即可运行一个使用zzo主题的静态网站

以上就完成了静态网站的第一小步，下面继续了解hugo

├── archetypes
│   └── default.md
├── config
│   └── _default # 存储默认配置文件的目录，里面包含全局配置、菜单配置、语言配置、其他诸如友链等通信配置
├── content
│   ├── en # 存储英文版博客的目录,这里就是存储markdown文件的目录
│   └── zh # 存储中版博客的目录,这里就是存储markdown文件的目录
├── data
│   ├── font.toml # 设置字体
│   └── skin.toml # 设置皮肤的颜色
├── deploy.sh # 推送静态网页到git的脚本
├── layouts
│   └── partials
├── public # 执行hugo命令将markdown转换成html的静态页面目录
│   ├── CNAME
│   ├── css
│   ├── en
│   ├── favicon
│   ├── favicon.ico
│   ├── favicon.png
│   ├── fonts
│   ├── gallery
│   ├── images
│   ├── index.html
│   ├── js
│   ├── lib
│   ├── logo-192.png
│   ├── logo-512.png
│   ├── logo.png
│   ├── manifest.json
│   ├── sitemap.xml
│   └── zh
├── resources
│   └── _gen
├── static # 静态网站需要的一些样式文件目录
│   ├── en
│   ├── favicon
│   ├── fonts
│   ├── gallery
│   └── images
└── themes # 网站需要的模板主题目录
    └── zzo

可以将以前写的markdown存放在content/en/目录下,然后运行网站就可以看到你的笔记

☸️  k8sdev default  ~/workspaces/linuxermaster.github.io   master ●✚    hugo server -t zzo                    | EN  | ZH    -------------------+-----+------   Pages            | 248 |  52     Paginator pages  |  10 |   0     Non-page files   | 281 |   3     Static files     | 136 | 136     Processed images |   0 |   0     Aliases          |  56 |   8     Sitemaps         |   2 |   1     Cleaned          |   0 |   0   Built in 6102 ms Watching for changes in /Users/marionxue/workspaces/linuxermaster.github.io/{archetypes,content,data,layouts,static,themes} Watching for config changes in /Users/marionxue/workspaces/linuxermaster.github.io/config/_default 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

如何定制文章的简介和图片

很简单，只需要在markdown的首部添加以下yaml格式的配置说明即可:

author: "云原生生态圈" # 文章标题下显示的作者名字
title: "Hugo+Zzo主题快速搭建持久维护的个人网站" # 文章的标题
date: 2020-07-20T19:49:06+09:00 # 自定义文章的发表时间
description: "私人订制你的技术平台平台" # 文章的说明描述
authorImage: "/images/whoami/头像.png" # 作者的头像
authorDesc: "啥都不会的DevOps工程师" # 作者的自述
draft: false # 是否标记为草稿，如果为true,将不会编译进html页面
hideToc: false # 是否隐藏toc目录
enableToc: true # 是否启用toc
enableTocContent: false # 是否显示toc
authorEmoji:  # 显示在作者名字之前的表情
tags: # 文章标签,用于搜索
- hugo
- blog
- zzo
- hugo template
image: images/posts/hugo-blog.png # 显示文章的图片
socialOptions: # 显示的一些社交账号信息
  email: "marionxue@.com"
  facebook: "@marionxue"

效果如下如:

如何自定义网站底部样式

自定义网站底部的样式，需要修改css样式,由于篇幅的问题，这篇文章就不在说明了。

推送静态网站脚本

#!/bin/sh # If a command fails then the deploy stops set -e printf "\033[0;32mDeploying updates to GitHub...\033[0m\n" # Build the project. hugo # if using a theme, replace with `hugo -t <YOURTHEME>` # Go To Public folder cd public # Add changes to git. git add . # Commit changes. msg="rebuilding site $(date)" if [ -n "$*" ]; then         msg="$*" fi git commit -m "$msg" # Push source and build repos. git push origin master

正如前面的网站设计图所示，不管将网站托管到Github Pages上还是部署到云主机上,我们都会遇到访问慢的情况，因此我们可以通过域名加速缓解这个问题,比如通过又拍云推广合作等，写技术类的文章，避免不了需要一些图来辅助解释说明，因此可以将图片放在一些对象存储上，例如七牛，oss等，我这里暂时就存在七牛上，但是七牛的bucket绑定个人域名需要备案，所以首先需要有一个备案的域名，域名备案需要一台云主机，我使用的是滴滴云([1c/2G]/68元/年),滴滴云的特惠链接:https://i.didiyun.com/29WG0vRdqDG

Reference

[1]

Zzo theme:https://github.com/zzossig/hugo-theme-zzo.git

阅读原文

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。