website on 苏坡特

如何使用github+hugo搭建静态个人网站

Fri, 01 Jul 2022 21:42:39 +0800

1、github建仓

新建一个 GitHub 库
注册一个 GitHub 账号。如果你已有账号，直接登录。如果你没有账号，注册并登录。
打开 GitHub Pages 官网，浏览并了解 User or organization site 部分对应的操作步骤。 GitHub Pages
新建一个 GitHub repository，库名为 username.github.io，username 即你的 GitHub 账号 username，新建 repository

2、hugo下载

下载安装命令
Mac下使用命令：
brew install hugo
注意：需要提前安装 homebrew
检查安装状态：
查看 Hugo 是否安装成功，可通过下列命令检查版本号
hugo version

3、hugo建站

创建新的网站
新建一个工作目录，执行下列命令：
mkdir website; cd website
hugo new site my_blog_web
克隆网站主题
git clone https://github.com/xianmin/hugo-theme-jane.git theme # 将 jane 主题克隆至 "theme" 目录。
也可以到该网页选择自己喜欢的主题
Hugo Themes
编辑网站配置文件
在上述新建文件夹 website 下，拷贝 theme/jane 默认配置文件
cp theme/jane/dev-config.toml config.toml
具体配置参考文件描述
本地预览网页效果
执行下列命令，根据命令后提示打开网页，默认网址http://localhost:1313，即可预览网页
hugo server
构建网页
使用 hugo 命令可以构建网页，默认输出到 public 文件夹中

4、部署到github

进入 public 目录，初始化 Git 库。
cd public # 生成的 HTML 文件保存在 "public" 目录中
git init
将 Git 本地库关联至远程库。
git remote add origin git@github.com:username/username.github.io.git
提交你的修改至本地库。
git status # 查看当前修改状态。
git add . # 添加所有修改过的文件。你也可以只添加某个文件。
git commit -m "Add a new post" # "Add a new post" 是 commit message.
将你的修改推至远程库。
在 public 目录下，将修改推至远程库。
git push -u origin main
恭喜！现在你已经拥有了一个自己构建的博客网站。网址地址是： https://username.github.io

常见问题

git push fail 确认远程仓库名称是否和命令一致；
ssh 认证失败本地使用命令生成key；然后将 id_rsa.pub 的内容填充到 github->Settings->SSH and GPG Keys->Add New
ssh-keygen
上传成功后访问网址无法显示
注意选择github仓库下的配置：“root” or “docs”