Hugo+GithubPages

本文为此站点的构建方式

Hugo 安装

首先在本地安装hugo,选择适合自己系统的安装包

将hugo执行目录加入系统的环境变量

添加系统变量后,测试是否成功

hugo version

此时,我们就可以开始新建站点了

hugo new site blog

它会在当前目录,生成一个名为blog的文件夹,里面是新建的站点文件

生成静态页面

在生成开始之前,我们需要为hugo安装一个主题,这里选用的是MemE

进入blog目录安装主题

cd blog

使用git初始化仓库

git init

下载MemE主题文件

git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme

将主题文件config.toml替换为示例配置

mv config.toml config.toml.bak
cp themes/meme/config-examples/en/config.toml config.toml

新建一篇文章和一个关于页面

hugo new “posts/test.md”
hugo new "about/_index.md"

Game Start

hugo server -D

生成本地测试页面,在浏览器使用localhost:1313访问

推送到Github Pages

首先,你需要拥有一个Github账号

创建一个存储仓库,在仓库启用Github Pages

在本地配置你的Github信息

$ git config --global user.name "username"
$ git config --global user.email "useremail"

注意git config命令的--global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址。

生成SSH密钥对

$ ssh-keygen -t rsa -b 4096 -C "useremail"
$ cat ~/.ssh/id_rsa.pub

将生成的密钥复制,去 Github 上设置一个新的密钥对 New SSH key

测试连接

ssh -T git@github.com

将Github仓库克隆到本地的 ikuriko_blog 文件夹

git clone https://github.com/iKuriko/ikuriko.github.io.git ikuriko_blog

进入仓库目录

cd ikuriko_blog

初始化仓库

git init

将本地Git仓库和远程仓库关联起来,并设置远程仓库名称

git remote add origin git@github.com:iKuriko/ikuriko.github.io.git

添加所有文件到本地缓冲区

git add -A

提交到本地仓库,标签为first commit

git commit -m "first commit"

提交到远程仓库,第一次需指定用户和分支

git push -u origin main

#非首次推送

git push

修改blog目录下的config.xoml文件,添加一行:

publishDir = "../ikuriko_blog"

将hugo生成的public目录改为刚才克隆的Github仓库的目录

生成页面

hugo -D

再次使用上面的 git 命令将生成文件推送到远程仓库

git add -A

git commit -m "new"

git push -u origin main

Success!

访问你的Github Page

https://ikuriko.github.io

PS:Git 的基本使用

查看当前仓库的状态

git status

添加并提交改动

git add <文件> <文件> ……
git commit -m "first commit"
  • git add -A的意思是一次添加所有文件。
  • -m 的意思是此次提交的修改说明

查看所有的 commit 历史

git log

查看远程仓库,以及与本地仓库的关系

git remote show origin

抓取远程的一个分支到本地

git fetch <remote_name> <branch_name>