Build Site

Short Brief

我们常常需要展示一些个人作品，简历或者单纯分享，这时候你可以发b站视频，知乎文章，但是更优雅的做法当然是利用GitHub Page做一个自己的网站啦，拥有更强的自定义功能，不需要通过平台的审核，并且如果不需要个人域名的话是完全免费的。

Prepare

我们简单介绍一下实现的原理，每个GitHub账号都可以创建一个Username.github.io这个仓库，可以托管网站并且渲染HTML文件。

所以我们需要一个GitHub账号，如果需要域名访问的话，还需要购买域名。同时因为github.io是渲染的HTML，但是写网页用纯html对于我们来说还是太麻烦了，所以我们一般是利用markdown写文章然后编译成HTML利用git提交到github.io仓库，当然这些都有现成的转换工具，笔者习惯用hugo，之后会介绍如何部署。

需要的软件:

git以及GitHub账号

hugo

brew install hugo git

需要一些命令行操作cd ls以及git的基础操作

Deploy

首先我们在GitHub上创建一个名为Username.github.io的public仓库，其中Username是GitHub账号的用户名，并添加README文件，同时我们再创建一个repo，用来存放整个网站的数据。然后将这个仓库git clone到本地(git clone repo-url)，接着cd到仓库的文件夹，利用hugo创建站点，在终端中输入hugo new site /current-repo-path && hugo，hugo会在当前文件夹生成一些文件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


current-repo-path
├── archetypes 存放用 hugo 命令新建的 Markdown 文件应用的格式模板
├── assets 
├── content 存放 hugo 创建的markdown文件
├── data
├── hugo.toml 
├── i18n
├── layouts
├── static 存放静态文件或者图片
├── public 存放 hugo 生成的静态网站的html文件
└── themes 设置 hugo 的主题

我们就是将生成的public文件夹的文件push到Username.github.io这个仓库，所以我们可以将GitHub Page的仓库clone到public文件夹git clone https://github.com/Username.github.io public，或者到public文件夹下面利用git init命令创建一个本地git仓库，再利用git set remote url与GitHub上的Usename.github.io仓库链接。

同时要把hugo的默认配置文件即config/_default/config.toml中的baseurl设置成github.io的仓库链接，如果有域名则设置成域名。

Theme

我们网页肯定希望有一些美化，可以去hugo官方主题去找对应的主题，并且对应主题有安装的README。笔者本人选用的是hugo stack主题，作者同时也提供了方便部署的仓库，只需要将https://github.com/CaiJimmy/hugo-theme-stack-starter这个仓库clone到本地就可以了。

Release

接着我们就要发布第一篇文章了，创建一篇新文章的方法即hugo new first.md，hugo会在content目录下创建文章，你可以为这篇文章单独创建一个文件夹放置到content/post/文件夹下。新创建的markdown文件头有meta数据以本篇文章为例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


---
title: "Build Site"
description: 
date: 2024-06-27T10:13:40+08:00
image: #设置文章封面
math: #是否开启数学公式渲染
license: #开源证书
hidden: false
comments: true #是否开启评论区这个要单独部署评论区的服务属于进阶用法比较复杂本文章暂不涉及
draft: false #是否是草稿
---

同时你还可以设置文章的分类和标签，如果想要进一步设置可以看作者写的文档。以下是笔者本人设置之后的页面样式。 my blog

Summarize

使用静态网站展示个人作品以及分享一些文章是非常方便的事情，只需要让对方访问个人网站即可，并且不需要像动态网站那样需要服务器费用以及维护的精力。笔者本人曾利用wordpress部署过动态网站，但是发现文章排版相当麻烦而且运营维护还有云服务开销并不划算，所以最后还是放弃了原来的方案，利用GitHub Page部署个人网站。