Hugo + Netlify 搭建和部署博客网站

准备 #

  • GitHub 账号(已有)
  • Netlify 账号(已有,使用GitHub登陆)

Mac 本地安装 Hugo #

brew install hugo
hugo version

Mac 本地初始化 Hugo 项目 #

mkdir Site
cd ~/Sites
hugo new site huangyang-me

添加一个主题(以 typo 为例):

https://tomfran.github.io/typo-wiki/setup/

cd huangyang-me
git init
git submodule add https://github.com/tomfran/typo.git themes/typo

编辑网站配置文件 hugo.toml

baseURL = 'https://huangyang.me.netlify.app/'
languageCode = 'zh-cn'
title = '黄杨的博客'
theme = "typo"

Mac 本地运行 #

hugo server -D

-D 参数表示也显示草稿(draft: true)的文章,如果去掉 -D,只会显示正式发布(draft: false)的内容。

浏览器访问 http://localhost:1313/

写一篇文章 #

hugo new posts/hello.md

content/posts/ 即为文章保存目录。

建议的文章的组织方式:

content/
└── posts/
    ├── my-first-post.md
    └── second-post.md

发布文章 #

先生成静态文件:

hugo --gc --minify

输出在 public/ 文件夹。

部署到 Netlify:

git add .
git commit -m "Add: 新文章"
git push

或写成一行:

it add . && git commit -m "更新文章" && git push  # 发布

Netlify 会自动构建并发布到线上。

推送到 GitHub #

在 GitHub 新建一个仓库(huangyang-me),不要勾选 README。