Hugo可以让你轻松生成静态网站,比如个人博客、API文档、公司主页等,你只需要提供markdown格式的文本,它就能帮你渲染成各种你想要的样式,只需要安装想要的主题,写好对应的markdown内容,就能快速编译出一个静态网站。
参考官方:http://gohugo.io/getting-started/installing/
首先初始化你的网站,假如 mysite 是存放网站相关文件的目录:
hugo new site mysite
这会在当前路径创建一个 mysite 目录,进入该路径:
cd mysite
目录如下:
▸ archetypes/
▸ content/
▸ layouts/
▸ static/
▸ themes/
config.toml
config.toml
是网站的配置文件,包含一些基本配置和主题特有的配置。
这几个文件夹的作用分别是:
在创建页面之前需要安装想要的主题,官方有收集一些:https://themes.gohugo.io/
在这里我用我博客的主题xhugo
作示例,下载到themes目录:
git clone https://github.com/imroc/xhugo.git themes/xhugo
在配置文件config.toml
里加一行,配置本网站的主题:
theme = "xhugo"
注: config.toml
中配置的主题名字应和主题目录名称一致
新建页面:
hugo new posts/hello.md
此时会在 content
路径下创建文件,由于参数中还带有 posts 路径,所以最终创建的文件路径是 content/posts/hello.md
, 每次创建的文件都根据 archetypes/default.md
生成的,包含一些页面的特定配置,比如标题、分类等,不同的主题还有自己支持的一些配置,需要看主题的说明。
写好 mardown 之后可以本地预览:
hugo server
在浏览器打开 http://localhost:1313 就能看到效果,并且改内容页面也能实时自动更新。 注: markdown 用什么编写就取决于你自己了,我自己有时用vim,有时用 vscode(装 markdown 的插件)
在生成之前先确定你想将此网站发布在哪儿,在 config.toml
里面配置 baseURL
为访问此网站的基本URL路径:
baseURL = "https://imroc.io/"
然后
hugo
对,你没看错,直接执行 hugo
就可以了,它编译并生成网站所需的静态页面和文件,输出到当前目录的 public
目录下,当然你也可以改变输出目的地,如:
hugo -d docs
你可以将生成的目录放到 nginx 或 tomcat 等服务器下对外提供服务,不过这需要自己有服务器,接下来我教大家如何利用 Github Pages 来做到永久免费。
Github Pages 是 Github 推出的一项功能,可以免费托管静态网站,将你的静态文件放在仓库里,然后在仓库的 Settings
里面,翻到下面的 GitHub Pages
部分,可以将此仓库设置为你的静态网站文件的存放仓库。
其实 Github Pages
仓库分为两种。
<github账号名>.github.io
,比如我的 github 账号为 imroc
,那么我的 Github Pages
主仓库就为 imroc.github.io
,这个仓库的名字其实也就是访问你网站的域名。static
仓库并设置为 Github Pages
仓库,那么我可以通过 imroc.github.io/static/
访问到里面的页面和文件静态文件存放位置有三种:
注: Github Pages
主仓库除外,必须是 master 分支。
一般都会先新建第一种 Github Pages
主仓库作为网站主要托管,根据你的账号名创建仓库,如: imroc.github.io
, 提交静态文件后在仓库的 Settings
里面,翻到下面的 Github Pages
部分,根据自己需要设置 Github Pages
文件存放位置:
如果你想要将你网站的 hugo
源文件和编译后的静态文件目录放在一个仓库,那可以选择 master
下的 docs
目录作为 Github Pages
目录,编译的时候执行:
hugo -d docs
建议写个脚本,每次更新内容执行下脚本网站就可以更新,如(deploy.sh
):
#! /bin/bash
set -eux
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
# Build the project.
hugo -d docs
# Add changes to git.
git add .
# Commit changes.
git commit -m "$msg"
# Push source and build repos.
git push origin master
这样,每次运行:
./deploy.sh
或
./deploy.sh "本次更新描述"
就可以更新网站了。
另外,别忘了给脚本可执行权限哦
chmod +x deploy.sh
新建一个仓库存放源文件(此仓库不需要设置 Github Pages
),如 blog
仓库,编译结果放在主仓库里,如 imroc.github.io
仓库。
进入hugo创建的网站目录并设置 git 的远程地址:
cd mysite
git remote add origin https://github.com/imroc/blog.git
将 Github Pages
的仓库下载到当前目录并命名 public
:
git clone https://github.com/imroc/imroc.github.io.git
mv imroc.github.io public
新增脚本 (deploy.sh
):
#! /bin/bash
set -eux
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
# Build the project.
hugo # if using a theme, replace by `hugo -t <yourtheme>`
# Go To Public folder
cd public
# Add changes to git.
git add .
# Commit changes.
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back
cd ..
git add .
git commit -m "$msg"
git push origin master
这样执行脚本也可以更新网站,只不过分成了两个仓库,我也是用的这种做法,因为 Github Pages
主仓库只允许 master 分支作为网站内容,所以源文件就存在了另一个仓库 blog
github 给我们提供了免费域名,但是我们还可以绑定自己的域名。
很简单,在仓库的 Settings
里的 Github Pages
部分,有个 Custom domain
的设置,将其设置为你需要绑定的域名(它会新建一个 commit,就是创建一个 CNAME
文件,内容是你填的域名),你也可以自己手动创建一个 CNAME 文件,效果是一样的。
注: 由于自定义域名需要仓库里面有个 CNAME
文件,用上面的第二种方式(源文件与编译结果在不同仓库)管理的话,每次编译会覆盖 public
目录下除 .git
目录的文件,CNAME
文件可能就不在了,没关系,在源文件的 static
目录下放入 CNAME
文件即可保证每次编译的结果里面都会有 CNAME
文件。
下一步就是登录你的域名提供商的后台管理,设置DNS解析:
如果你想要绑定自己域名的根域名(如:imroc.io),新建两个A记录,分别指向下面两个IP:
192.30.252.153 192.30.252.154
如果你想要绑定自己域名的二级域名(如:blog.imroc.io),新建一个 CNAME
记录,值为你的 github 域名,如: imroc.github.io
如果绑定了自定义域名,github pages 原则上是不能启用https的,但是可以借助 cloudflare
nameserver
nameservers
设置为 cloudflare
上的(即让 cloudflare
来管理 dns)Crypto
-SSL
为 Full
http://imroc.io/*
设置为 Always Use HTTPS
最后等待一段时间生效