使用GitHub+hugo搭建静态个人博客

优点

全是静态文件,访问速度快
免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台
可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的
博客内容可以轻松打包、转移、发布到其它平台

准备工作

已注册并验证邮箱的GitHub账号

确保您已安装Git for Windows

您已下载合适版本的Hugo

创建仓库

新建一个名为<你的用户名>.github.io的公开仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库

必须是你的用户名,其它名称无效

必须是公开仓库,私有无效

你的网站访问地址就是 http://test.github.io

由此可见,每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

几个注意的地方

注册的邮箱一定要验证,否则不会成功;
仓库名字必须是:username.github.io,其中username是你的用户名;
仓库创建成功不会立即生效,需要过一段时间,大概10-30分钟,或者更久

绑定域名

当然,你不绑定域名肯定也是可以的,就用默认的 xxx.github.io 来访问,如果你想更个性一点,想拥有一个属于自己的域名,那也是OK的。

首先你要注册一个域名,自己百度!

绑定域名分2种情况:带www和不带www的。

域名配置最常见有2种方式,CNAME和A记录,CNAME填写域名,A记录填写IP,

如果设置顶级域名,即不带www方式只能采用A记录,所以必须先ping一下你的用户名.github.io的IP,然后到你的域名DNS设置页,将A记录指向你ping出来的IP

将CNAME指向你的用户名.github.io

然后到你的github项目根目录新建一个名为CNAME的文件(无后缀),里面填写你的域名,例如

https://blog.icland.xyz/

另外说一句,在你绑定了新域名之后,原来的你的用户名.github.io就无法访问了,必须用你绑定的域名

配置文件夹及Git用户登录

新建一个你喜欢的目录

在该目录下右键打开Git bash here

输入以下命令

git config --global user.name "abcdef" # 你的github用户名,非昵称
git config --global user.email  "xxx@qq.com" # 填写你的github注册邮箱
git init # 初始化目录
git clone https://github.com/skyxingcheng/skyxingcheng.github.io.git # 替换为你仓库的地址
git pull # 将仓库文件都拉到本地目录

配置Hugo初始化

解压你下载的hugo_0.80.0_Windows-64bit.zip得到hugo.exe

hugo version #通过检查版本号验证hugo是否运行正常
hugo new site ./ --force #强制在当前目录创建网站

你的文件目录结构就像这样

安装主题

git clone https://github.com/flysnow-org/maupassant-hugo.git themes/maupassant

在根目录下的 config.toml 文件中添加一行

echo theme = "maupassant">> config.toml # 启用主题

本地测试

创建一个示例文章

hugo new post/my-first-post.md

然后打开post/my-first-post.md文件将draft: true改为draft: false # 该选项为草稿不可见

在下面几行随便写点东西

启动Hugo

hugo server

使用浏览器访问localhost:1313

即可打开本地预览

实战操作

执行命令编译网站

hugo -d skyxingcheng.github.io # 替换你自己的目录 该目录为Git项目名,在前面你已经clone到本地

执行命令上载到GitHub

cd skyxingcheng.github.io # 进入仓库目录
git pull # 拉回并更新本地文件
git add * # 添加本地文件
git commit -m "updates $(date)" # 添加上载信息
git push # 推送到GitHub

若绑定好域名则使用自定义域名访问反之使用<username>.github.io访问

至此基本操作已完成

界面个性化和美化

未完待续

End For Page

Q.E.D.