Hugo 建立静态网站快速入门

Last updated on 2021年9月20日 4 min read

1 源起

总有许多领域一起向往，但由于领域的壁垒，一起不能进入，不断地尝试，不断地半途而废，终于有一天，下定决心，真的进来了发觉也就进来了。比如orgmode，比如github，比如Hugo。

2 使用hugo

2.1 前提

2.2 安装Hugo

  • 单文件，放到任意目录，有建议与未来网页目录放在一起，如D:/hugo/bin
  • 设置环境变量，在PATH中增加，D:/hugo/bin，这样做是为了在所有的目录下都可以运行hugo

2.3 创建站点

在D:/hugo目录下，cmd，假设新建的站点叫blog

``` hugo hugo new site blog ```

运行完成后，会在D:/hugo目录下创建一个blog文件夹，

2.4 创建页面

hugo new about.md

这是在D:/hugo/blog根目录下创建一个about.md文件

hugo new post/first.md

这是在D:/hugo/blog/post目录下创建一个first.md目录，未来的日志一般保存在这个目录下 创建完成后，md文件头部包括

+++
 date = "2015-11-15T10:42:51+08:00"
 draft = true # 是草稿，默认不生成html，需生成的话，需在运行命令中加 -D参数

 title = "about" # 文件标题


 +++

2.5 安装主题

如果有了git之后，安装比较简单，在blog下的theme文件夹下，运行

git clone http://github.com/spf13/hyde.git

皮肤的地址可以从https://github.com/spf13/hugoThemes中获取，注意看一下皮肤的说明，有的皮肤还需要安装别的东西才能运行。

除了git安装外，也可以直接将文件夹下载，拷入theme文件夹。

安装完主题后，还需要在配置中设置，配置文件位于blog目录下，config.toml

baseURL = "https://ianying.github.io/"
languageCode = "en-us"
title = "Ian's Blog"
theme = "hyde"

2.5 运行hugo

hugo server --theme=hyde --buildDrafts --baseUrl="http://ianying.github.io" --watch

theme指明使用的主题名称（themes文件夹下的主题文件夹名称），buildDrafts指出编译草稿部分（即draft=true的文件），watch参数可以在文件修改时实时自动刷新页面。生成后我们可以在按照命令行提示在浏览器中输入http://127.0.0.1:1313/ 如果在config.toml中配置了theme的话，可以省去–theme=hyde和–baseUrl="http://ianying.github.io”

此时blog文件夹下会生成一个http文件夹，该文件夹下的文件就是生成的静态文件，可以上传github了。

3. 上传github

3.1 配置github

git config --global user.name "你的注册用户名"
git config --global user.email "你的邮箱"
git config --global color.ui auto

3.2 设置SSH Key：

方法一：

ssh-keygen -t rsa -C "你的邮箱"

然后会要求输入存储id_rsa的目录，接着是输入密码，这个密码可以与github的不同，过程中确认即可，最后会出现一个随机图形，说明生成SSH密匙成功，这样我们需要到刚刚的存储目录下打开id_rsa.pub复制里面的内容，到你的github页面上->点击右上角头像旁三角->settings->SSH keys->add SSH key->黏贴刚刚复制的内容保存。

方法二：

运行git GUI，在help菜单中生成key，已生成的key也可以在这里显示

在github中添加SSH key

在setting中，SSH and GPG key中添加，Title我设置是的计算机的名字

3.3 Github创建repositories

创建一个ianying.github.io的repositories，就是那么长。内容可以为空。 在repositories的页面中在右上角的Clone or Download按钮中可以找到https的地址

3.4 上传文件

cd public
git init # 不执行这一步也是可以的
git add . # 全部add
git commit -m 'for init blog'
git remote add origin git@github.com:username/username.github.io.git #这步可以忽略？？
git push -u origin master # origin master这块可以不要

4. 日常撰写工作流

  1. 创建md文件
cd blog
hugo new post/XXXXX.md
  1. 撰写日志，现在用的的Yu Writer–>VS code–>org mode
  2. 生成静态文件
cd blog
hugo -D
  1. 复制到git对应的本地目录
  2. git push
cd public
git add .
git commit -m 'for new blog'
git push

参考：

http://newoxygen.github.io/post/hugo%E5%BF%AB%E9%80%9F%E5%BB%BA%E7%AB%99/

http://www.zimustudio.com/hugo.html

https://gohugo.io/

Hugo
海上一民工