ZHENG Zi'ou

其实如果只是对静态页面进行修改，不需要配什么环境，只需要对html进行修改就好。

哦，不对，因为还是会使用hugo来生成静态页面，hugo还是要配置的，配置的方法详见这个系列的第2篇Blog养成记2 Hugo+Docker在Github上建立Blog。所以重点就在如何自己生成自己喜欢的hugo模板了。

由于仅使用hugo静态页面，所以也不计划使用gulp之类的工具，可能出了hugo外唯一考虑要使用的是sass。这是因为css的结构化有些糟，而sass作为css的预编译器，有更好的结构性，更像一门编程语言，修改起来会更得心应手，(我猜😶)不会有改了A不知道会不会影响B的囧状。sass具体的配置详见前端试水系列第2篇前端试水2 使用docker镜像的sass配置。

项目结构

参考Hugo的其他theme和官网对各个文件夹的介绍，对新建主题的文件结构如下：

MyNewTheme
├── archetypes/
├── exampleSite/
├── i18n/
├── layouts/
⎮	├── _default/
⎮	├── partials/
⎮	├── page
⎮	├── post
⎮	├── shortcodes/
⎮	├── 404.html
⎮	├── index.html
⎮	└── robots.txt
├── static/
⎮	├── css/
⎮	├── js/
⎮	├── scss/
⎮	├── font/
⎮	└── img/
└── theme.toml

其中archetypes定义了如果使用hugo new，默认生成的md的文件头；exampleSite提供一个网站实例；i18n提供多语言的翻译；layouts提供主题的布局；static存放静态文件；theme.toml提供主题的信息。

Hugo官网对于每个模板都会有简单的介绍，可以借鉴一下。

其中scss主要参考Sass目录层次，建立以下scss的项目结构：

scss
├── abstracts/
├── base/
├── components/
├── layout/
├── pages/ 
├── vendors/
⎮	└── bootstrap4/
└── main.scss

abstracts存放整个项目的sass辅助工具；base存放项目中的模板文件；components存放小型组件；layout存放布局部分；pages存放有特定样式的页面；vendors存放外部库和框架；main.scss为主文件，其中引用其他文件夹中的代码，引用次序为：abstracts - vendors - base - layout - components - pages。

Resource资源链接汇总

我建立的docker for Hugo开发镜像: Docker Hub上的repo、Github上的repo。 我建立的docker for Sass开发镜像: Libsass docker镜像、Dart Sass docker镜像、Docker for Sass的Dockerfile。

Hugo官网、Hugo官网介绍各个文件夹、Hugo官网介绍Template Sass官网、Sass目录层次

版本控制