个人博客是展示自己经历或成就的理想场所。把个人简历、一些非常酷的小项目或生活体验写到博客里是一种非常棒的感觉。
一些喜欢写博客的小伙伴肯定想过,要是有一个属于自己的博客网站就好了。
所以,本篇文章的目的就是和大家分享一种自己动手搭建博客的方案:Hugo + Github pages
介绍
在动手搭建之前,有必要给小伙伴们介绍 Hugo 和 Github pages 分别是什么。
Github 想必大家不陌生了,它是全球最大的同性网站。托管个人、团队或组织的项目。
Hugo 是一个用 Golang
写的静态网站生成器,非常简单、高效,而且易于扩展。你可以用它更换不同的主题,生成静态博客网站,配合 Github pages,全球各地的网友都可以访问到你的网站。
以下的站点用 Hugo 和 Github pages 搭建,下面介绍部署过程。
step1. 申请一个 Github 仓库
1. 注册 Github
如果已有账号,直接登录
2. 了解 Github page 创建过程
进入 Github Pages 官网,了解创建过程。
3. 创建仓库
- 点击
Github
右上角头像旁边的 "+", - 点击
New repository
进入创建仓库页面 注意:仓库名的格式为
.github.io ,username 是你Github
的账号名。- 点击页面最下方的
Create reporitory
即创建成功 - 访问
https://
看看是否能够访问成功.github.io
step2. 安装 Hugo
Hugo 有多种安装方式,具体怎么安装要看你的电脑系统。
Hugo 官网安装指南
我的电脑是 win10 系统,可以下载 exe
文件直接安装即可,也可以下载源码编译安装。
这里 win10 源码编译过程:
克隆文件到本地
$ git clone https://github.com/gohugoio/hugo.git
安装
$ cd hugo $ go install
编译成
exe
文件$ go build -o hugo.exe main.go
- 将
hugo.exe
添加到环境变量中
将hugo.exe
移动到你想放入的文件中,例如我将该文件放到D:\software\Hugo\bin
文件中,在系统变量path
中添加该目录即可 测试 Hugo
$ hugo version hugo v0.94.0 windows/amd64 BuildDate=unknown
step3. 构建本地站点
1. 新建 Hugo 站点
进入你想存放 Hugo 的目录,执行以下命令:
# blog 是站点名称
$ hugo new site blog
目录解析:
config.toml
: 我们需要更改的配置文件content
: 存放所有的博客文章static
: 存储静态文件,例如背景图片,徽标,CSS
,JS
等。此目录中的文件将直接复制到/public
中。该文件夹的优先级高于主题下的/static
。themes
: 存放下载的主题archetypes
: 存储的.md
模板文件,其优先级高于theme
文件下的/archetypes
文件。layouts
: 存放.html
模板,优先级高于theme
文件夹下的/layouts
文件夹public
: 在执行hugo
命令后,生成的静态文件存放的目录
step4. 选择 Hugo 主题
进入Hugo 主题官网,选择一个你喜欢的主题。
以 KeepIt 主题为例。
执行以下命令:
$ cd blog
$ cd themes
$ git clone https://github.com/Fastbyte01/KeepIt.git
下载完成后,修改 config.toml
文件,修改之前的内容如下
# blog/config.toml
baseURL = "http://example.org/"
languageCOde = "en"
title = "Hugo Site"
我们进入刚刚下载的主题 Github 仓库,进入 exampleSite 文件中,可以看到开发者已经给我们提供里示例,可以直接复制过来。
复制过来的部分内容如下:
baseURL = "https://[your github username].github.io/"
languageCode = "en"
defaultContentLanguage = "zh-cn"
title = "StrideDot"
theme = "KeepIt"
注意:将 [your github username] 改成你的 Github
用户名。
step5. 创建第一个博客
安装过程完成了,现在终于可以创建我们的第一个博客了。
$ cd blog
$ hugo new about.md
注意:需要去掉 about.md
文件中的 draft=true
,否则站点无效。
测试站点:
$ hugo server
在浏览器中输入 http://localhost:1313
,回车,页面将我们刚刚下载的主题显示出来了。
step6. 部署到 Github
前面的安装和测试都是准备工作,我们的目的是将 markdown
语法生成静态文件,并发布到我们刚刚申请的仓库中。
执行如下命令:
$ cd blog
$ hugo
进入 public
目录,我们看到 Hugo 帮我们生成了一大堆静态文件。
现在我们把这些静态文件推送到在 step1 申请的 stridedot.github.io
仓库中
$ cd public
$ git init
$ git add .
$ git remote add origin https://github.com/username/username.github.io.git
$ git commit -m 'first commit'
$ git push -u origin main
刷新 Github
仓库,可以看到文件已经推上去了。
到现在,我们的站点已经成功发布。
在浏览器中输入 https://stridedot.github.io
,看到的页面跟我们在本地的一摸一样。
以上即是创建个人博客的整个过程,感兴趣的小伙伴们赶紧试试吧!!!