用hugo搭建个人博客

2022-05-07
2 min read

目录
第一章
第1节.创建Hugo
第2节.插入图片
第3节.创建第2篇博客
第二章.购买域名
第三章.配置DNS

第一章

第1节.创建Hugo

Hugo文档
工具: Hugo是用Go语言实现的一个博客生成器,目前世界上最快的博客生成器。

步骤 第1步.安装hugo

brew install hugo
hugo version

Windows用户安装:
1.去Hugo releases页面下载hugo_xxx_Windows-64bit.zip
2.解压,把hugo.exe放到D:/Software/hugo/hugo.exe
3.把D:/Software/hugo/加到PATH
4.重启终端,运行hugo version
用VSCode打开终端运行hugo -v,看到版本号即成功安装。

第2步.创建博客的生成器

博客名是你github用户名,全小写

hugo new site lixueqin-4119.github.io-creator 
//rm -rf lixueqin-4119.github.io/ 写错可以删掉
ls
code lixueqin-4119.github.io-creator/ 

第3步.添加主题

cd lixueqin-4119.github.io-creator/ 
git init
//安装主题
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \"ananke\" >> config.toml //ananke主题

第4步.创建新的文章

hugo new posts/开博大吉.md 
code . 

上面的原信息不能改,draft默认不会公布,写完笔记后记得改为false。

现在我们就可以愉快的写笔记啦。

第5步.Start the Hugo server

hugo server -D 

点击read more就可以看到我们的文章了。
打开控制台,也能适配手机。
本地预览ok了,那怎么推到GitHub?\

第6步.配置主题

在VSCode内command+p 输入config.toml进入文件。

将内容修改为:

baseURL = 'http://example.org/' //替换成你的GitHub域名,一般为 xxx.github.io
languageCode = 'zh-Hans'
title = '李的魔法世界'
theme = "ananke" 

第7步.创建静态页面

当前终端不要关,关了就访问不了网页了。

再新开一个终端执行hugo -D

它创建了一个新的目录public,这个目录只能通过hugo server -D查看,public目录就是一个网站。

第8步.将目录挂到网上

1.先把public忽略掉

新建文件.gitignore内容/public/

意思是当前仓库不要存储public让public自成一个仓库。

cd public
git init 
git add .
git commit -m '第一次部署'

2.那怎么上传呢?

再新建个仓库lixueqin-4119.github.io,名字是固定的,不能变。

我们的目标就是搞出一个public,再把public上传到一个单独的仓库。

运行
git remote add origin git@github.com:lixueqin-4119/lixueqin-4119.github.io.git
git push -u origin master

3.最后设置Settings

点击地址就能直接看到写的博客了,复制地址https://lixueqin-4119.github.io/到预览页面,现在你的个人博客就开通啦。

在这里插入图片描述

总结
1.用hugo创建博客的生成器
2.按照文档把public弄出来,然后gitignore public,让public 自成一派。
3.将public所有代码上传到新建的lixueqin-4119.github.io仓库,打开github pages功能。

第2节.如何在Hugo里插入图片

方法1
打开sm.ms上传图片得到url,文章里使用![](url)即可显示。
方法2
1.将图片1.png放到static目录static/1.png。然后在博客Markdown里写![](/1.png)
2.如果你想创建images目录,直接创建就好,图片前加上/images。 比如将图片文件 2.png 放到 static/images 目录里,得到 static/images/2.png,博客里写 ![](/images/2.png)

第3节.如何创建第2篇博客

1.在xxx.github.io-creator目录(注意确保自己不在public目录)

hugo new posts/第二篇博客.md

2.创建第二篇博客

code posts/第二篇博客.md 

对文件进行编辑,注意不要把文件原本的内容给删了,直接在后面另起一行写新内容。

3.运行得到新的public目录

hugo -D

4.进入 public 目录,执行操作

git add . 
git commit -m update
git push -f  

等待几分钟后,你的博客就会出现第二篇文章了!

第二章.购买域名

购买域名并绑定到GitHub

namesilo或者阿里云买个自己的域名。

区别: namesilo是国外的,阿里云是国内的。使用阿里云时填的信息较多,而且必须是真实的,假的话会判定你没有认证,如果是namesilo则会保证你的隐私。

使用namesilo
(1)进入namesilo搜索你的名字(或者github用户名)
它就会告诉你,这个网站有哪些是可以买的。
挑选最便宜的xyz,点击Register Checked Domains

(2)设置
隐私设置: NO Privacy 无隐私保护
如果你想在国内备案的话,最好不要设置,不想备案可以设置。 核对账单CHECKOUT

(3)选择支付方式: 支付宝

(4)管理我的域名,点击"Manage My Domains" 第一次需要填写基本信息,除 邮箱 外其它的都可以瞎写。

如何管理?
点击Manage DNS(小蓝球)

在这里插入图片描述

这个页面可以进行一些添加和删除操作,具体看下一章节。

第三章.配置域名(DNS)

上节我们已经做了个用Hugo生成HTML的GitHub仓库lixueqin-4119.github.io ,现在我们就需要对它进行配置。

打开它的Settings:
1.默认是使用GitHub域名,把你买的域名填在这,并Save Save后你的仓库就会多个CNAME文件,记录了你刚才填的域名。

2.配置4条A记录到185.199.108.153等IP
设置顶点域apex domain

//要创建A记录,请将apex域指向GitHub Pages的IP地址。
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

具体操作:

在这里插入图片描述

只需要填IPV4 IPV4 ADDRESS

注意,除了这4个A,把自带的A都删掉!

测试是否成功:

nslookup 你购买的域名  // Windows用户
dig +noall +answer 你购买的域名 // Mac用户

如果打印的是刚刚上传的4个域名,那就说明我们配置的DNS生效了。

A记录可能要很久才会生效,等就好了。

等4个IP已经生效了,就可以访问了你的域名了,在浏览器内输入你购买的域名

请添加图片描述

现在任何人只要输入你购买的域名就能看到你写的内容。域名的结果就是Hugo产生的博客