博客搭建-01 Hugo安装和使用
Contents
准备一些需要用的工具和软件：
- Hugo: 静态网站生成工具，用来编译静态网站的, 输出在：public 目录
- GitHub: 用来部署和托管网站，网站仓库：username.github.io
- WinSW: 把 win 下的命令行程序包装为 service 运行, 这里用来包装
hugo server，启动本地实时预览服务 - Cloudinary: 云存储，用作图床, 注册后即可使用
- GiTalk: 网站评论插件
Hugo 安装和体验
windows 安装
体验 Hugo
创建网站：blog, blog 是网站的路径
1 2 3 4 5 6$ hugo new site blog # 进入 blog 目录，可以看到 hugo 生成的相关文件： $ cd blog && ls archetypes config.toml content data layouts static themesHugo 生成的文件及目录说明：
config.toml: 是网站的配置文件，包括baseurl, title, copyright等等网站参数。
其他几个文件夹的说明：
- archetypes: 储存.md的模板文件
- content：储存网站的所有内容
- data: 储存数据文件供模板调用
- layouts：包括了网站的模板，决定内容将如何呈现
- static：包括了css, js, fonts, media等，决定网站的外观，该目录下的文件会直接拷贝到/public
- themes：用于存放主题
初始化仓库并指定 GitHub 源
1 2$ git init $ git remote add origin https://github.com/iJayer/blog-demo.gitHugo 提供了一些完整的主题, 下载这些主题：
1 2 3$ git clone --recursive https://github.com/spf13/hugoThemes themes # Note: 此时，这些主题存放在 themes 目录或选用自己喜欢的主题渲染网站(这里有一份 Hugo Themes 主题比较的文章)：
even 主题(used on my blog): https://github.com/olOwOlo/hugo-theme-even
添加 even 主题：
1 2$ git submodule add -b master https://github.com/olOwOlo/hugo-theme-even themes/even $ cp themes/jane/exampleSite/config.toml ./添加 jane 主题：
1 2 3$ git submodule add -b master https://github.com/xianmin/hugo-theme-jane.git themes/jane $ cp -r themes/jane/exampleSite/content ./ $ cp themes/jane/exampleSite/config.toml ./- 在配置文件：config.toml 中，可配置本网站使用的主题
1 2 3theme = "even" # Note: config.toml 中配置的主题名字应和主题目录名称一致
使用 Hugo 发布和预览文章
创建新页面：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15$ hugo new about.md # 进入 content 目录可以看到，此时多了一个 markdown 文件: about.md, 打开文件可以看到时间和文件名等信息已经自动加载到文件的开头，包括创建时间，页面名，是否为草稿等 # 文件的内容可通过 archetypes/default.md 模板进行定制 # 从主题目录下拷贝其定义好的模板文件对 Hugo 生成的默认模板文件进行替换 $ cd blog $ cp themes/even/archetypes/default.md ./archetypes/ # 覆盖 # 拷贝完成后，亦可按自己需求作简要修改 $ vim archetypes/default.md # ... # 基于定义好的模板生成文章 $ hugo new post/welcome.md $ hugo new post/golang/go-func.md- 效果预览: 添加一些内容后，运行 hugo 启动本地服务查看：
1 2 3 4 5 6 7 8$ hugo server -w -t even --buildDrafts # 参数说明： # -t：使用 even 主题渲染我们的页面 # -w: 参数-w意味监视watch，此时如果修改了网站内的信息，会直接显示在浏览器的页面上，不需要重新运行$hugo server，方便我们进行修改 # --buildDrafts: 注意到 about.md 目前是作为草稿，即 draft 参数设置为 true，运行 Hug o时要加上 --buildDrafts 参数才会生成被标记为草稿的页面 # # Note: 创建的文章 draft: true 属性，即为草稿，如要发表该文章请改为 false在浏览器打开：http://localhost:1313 即可看到我们刚刚创建的页面
Note: 观察当前目录下多了一个文件夹
public，这里面是 Hugo 生成的整个静态网站，如果使用 Github pages 来作为博客的 Host，你只需要将 public/ 里的文件上传就可以，这相当于是 Hugo 的输出。
命令 hugo new 说明
使用 hugo new 命令生成的文章中，前面加号包括的那几行是用来设置文章属性的, 这些属性使用的是yaml语法：
- date: 自动增加时间标签，页面上默认显示n篇最新的文章
- draft: 设置为false的时候会被编译为 HTML，true 则不会编译和发表，在本地修改文章时候用 true。
- title: 设置文章标题
- tags: 数组，可以设置多个标签，逗号隔开，hugo 会自动在你博客主页下生成标签的子 URL，通过这个 URL 可以看到所有具有该标签的文章。
- categories：文章分类，跟Tag功能差不多，只能设置一个字符串
修改 Hugo 的配置文件
config.toml可直接拷贝themes/even/exampleSite/config.toml到网站目录做简要修改即可：1 2$ cd blog $ cp themes/even/exampleSite/config.toml . # 覆盖- 修改 baseURL - 网站发布地址
在生成之前先确定你想将此网站发布在哪儿，在 config.toml 里面配置
baseURL为访问此网站的基本 URL 路径：1baseURL = "https://username.github.io/"
修改页面博文数量显示
paginate = 15 # 首页每页显示的文章数 archive-paginate = 50 # 归档、标签、分类每页显示的文章数目
启用 GiTalk 评论，为博客添加 Gitalk 评论插件
对应 Hugo 的 config.toml 配置
1 2 3 4 5[params.gitalk] owner = "iJayer" # Your GitHub ID repo = "blog-comments" # The repo to store comments clientId = "xxxxxxxxxxxxxxxx" # Your client ID clientSecret = "xxxxxxxxxxxx" # Your client secret
其中，repo 就是教程中所说的 github 上面为保存 comments 而创建的 repo，clientId 跟 clientSecret 就是你自己创建的 oauth 授权信息。If not, Click here to register the repo
编辑博文
默认情况下，Even 主题将博文放在 content/post/ 下面，你需要在这下面编辑你的博文。Hugo 是支持分目录的，这点非常好，比如可以这么分：
|
|
编写完成之后，本地查看一下你的博文，没有问题的话先提交到你的博文管理的 repo：
|
|
生成静态页面
然后，运行 hugo 命令，它将编译并生成网站所需的静态页面和文件并输出到 public 目录：
1 2 3 4 5 |
$ hugo # 或指定输出目录(e.g: docs) $ hugo -d docs |
Note: 你可以将生成的目录放到 nginx 或 tomcat 等服务器下对外提供服务，不过这需要自己有服务器，接下来我们就可以利用 Github Pages 来部署我们的网站啦 😀。
Links
Thanks to the authors 🙂