使用github pages及hugo创建个人网站

Included in Web

January 27, 2020 1104 words 3 minutes

Contents

github pages可以用来搭建自己的个人网站，所有的网页文件存储在自己的github仓库中，十分方便轻量，而且还可以进行版本控制。另外，目前几种主流的博客框架如jekyll、hexo、hugo等都比较成熟，可以制作出很美观的个人网站。之所以选用hugo是因为安装比较方便。

1. 静态博客框架列表

hugo https://gohugo.io/

模板：https://themes.gohugo.io/

jekyll https://jekyllrb.com/

模板：

hexo https://hexo.io/

模板：https://hexo.io/themes/

2. hugo部署

2.1 ubuntu下安装

1

sudo apt-get install hugo

2.2 manjora

1

yay -S hugo

2.3 macOS

1
2
3
4


# 安装hugo
brew install hugo
# 验证安装
hugo version

3.建立博客

3.1 建立新网站

1

hugo new site myblog

3.2 使用模板

我使用的是 https://themes.gohugo.io/theme/ezhil/ 模板，其github地址为 https://github.com/vividvilla/ezhil

1
2
3
4
5
6
7


cd myblog
git init
git submodule add https://github.com/vividvilla/ezhil.git themes/ezhil
# 把样例网站的配置文件和博客复制到本网站
cp themes/ezhil/exampleSite/config.toml .
cp -r themes/ezhil/exampleSite/content .
cp -r themes/ezhil/static .

3.3 修改配置文件

修改config.toml
根据https://github.com/vividvilla/ezhil 上的指导进行修改
注意baseURL需要修改成网站以后使用的域名，如username.github.io，如果没有的话可以改成空，即

baseURL = ""

主要修改标题、副标题等，简单修改后的效果如下

3.4 添加文章

1

hugo new posts/new-post.md

新建的markdown文档在content/posts/目录下，按照前几个markdown文件的格式进行编辑即可,注意要想让文章显示在网站上得设置draft为false

3.5 预览效果

在myblog文件夹下运行

1

hugo server

打开http://localhost:1313/即可预览网站效果

4. 发布到github pages

在github上新建两个仓库，myblog以及username.github.io(username替换成用户名)，其中username.github.io必须为public。
在本地的myblog文件夹内执行（将其替换为）

1
2
3
4
5
6


# 关联远程仓库
git remote add origin [email protected]:<username>/myblog.git
# 生成静态文件，保存在public文件夹下
hugo
# 将public文件夹关联<username>.github.io仓库
git submodule add -b master [email protected]:<username>/<username>.github.io.git public

使用脚本来将本地文件推送到远程仓库，新建deploy.sh文件，填入以下内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


#!/bin/sh

# If a command fails then the deploy stops
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
 msg="$*"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

最后运行这个脚本文件即可

1
2
3


# 添加可执行权限
chmod +x deploy.sh
./deploy.sh

以后在本地进行修改后，只需要执行一次该脚本文件就可以完成更新

最后网站的域名为https://username.github.io/,可以访问我建的样例网站进行参考 https://univerone.github.io/