Hugo是静态网站生成器,使用go语言编写,与同类产品Hexo相比,具有简单、易用,高效,易扩展、快速部署等特点。Hugo官网在此
GitHub Pages简单来说是GitHub免费给开发者提供的一款托管个人网站的产品。GitHub Pages官网在此
使用Hugo结合GitHub Pages可快速免费建立个人博客。
1. 系统版本:
macOS Catalina 10.15.2
Hugo version: v0.62.2
2. 安装Hugo:
Hugo官方安装文档在此:https://gohugo.io/getting-started/installing/
Mac可以直接使用brew安装(其他系统请移步上面的官方安装文档):
brew install hugo
Hugo需要依赖git,请提前安装好
hugo version #查看Hugo版本
#####
Hugo Static Site Generator v0.62.2/extended darwin/amd64 BuildDate: unknown
3. 使用Hugo创建博客:
hugo new site blog #blog目录就是创建的博客目录
tree blog/
#####
blog/
|-- archetypes
| -- default.md
|-- config.toml #博客的配置文件
|-- content #博客文章存放目录(markdown文件)
|-- data
|-- layouts
|-- static #静态文件/图片/CSS/JS文件
|-- themes #博客主题模板存放目录
4. 配置博客主题:
官方主题模板地址:https://themes.gohugo.io/
这次使用Maupassant这个主题模板:https://github.com/flysnow-org/maupassant-hugo
cd blog
git clone https://github.com/flysnow-org/maupassant-hugo themes/maupassant
cp themes/maupassant/exampleSite/config.toml . #使用模板自带的配置文件替换默认配置文件
mkdir content/post #创建博客文章md文件存放路径(只有此主题模板需要放在post目录下)
修改config.toml文件(先只修改前几行,具体细节修改可看主题模板的网址按需修改):
vim config.toml
######
baseURL = "your_github_name.github.io" #修改为博客的网址,此处使用github pages地址,后面具体介绍
languageCode = "zh-CN"
title = "左舷的风的博客" #博客的名字
theme = "maupassant"
写一篇博客文章测试下:
hugo new post/my-first-blog.md
vim content/post/my-first-blog.md
#####
---
title: "My First Blog"
date: 2020-01-16T10:37:32+08:00
draft: false #此处要改为false,否则在首页不会显示!
---
#### Hello World!
draft: false #此处要改为false,否则在首页不会显示!
启动hugo登陆看下:
hugo server -D
打开浏览器,访问 http://localhost:1313/ 即可:
5. 配置GitHub:
在GitHub上创建一个新的repository:
Repository name要求必须为 你的github名字+github.io (譬如我的名字是cerberus43,就创建为cerberus43.github.io)
Repository name要求必须为 你的github名字+github.io
Repository name要求必须为 你的github名字+github.io
上传你的博客到github这个仓库(请提前与github做好ssh关联,不会的请打开搜索引擎输入关键词”github ssh“搜索真相)
hugo --theme=maupassant --baseUrl="https://your_github_name.github.io" #theme为主题模板名称,url为上一步创建的github仓库名称
#执行后会新增一个public目录,此目录就是静态文件,上传此文件夹里的文件即可
cd public
git init
git add .
git commit -m 'first commit'
git remote add origin git@github.com:cerberus43/cerberus43.github.io.git
git push -u origin master
之后,登陆https://your_github_name.github.io看看吧!
6.后记:
- 关于博客网站的页面配置,可参考此主题模板地址:https://github.com/flysnow-org/maupassant-hugo;
- 关于markdown里的图片,可参考ipic+阿里云oss实现;(已实现,改天写个文章分享)