谁不想拥有一个属于自己的博客呢？

利用Hugo 建立网页

建立网站

  • 下载安装Hugo

  • 建立新网站

    hugo new site quickstart

    会在hugo 文件夹📂下新建一个名为quickstart 的文件夹

  • 选择主题

    可以浏览Complete List | Hugo Themes (gohugo.io) 选择一款喜欢的主题，以 LoveIt为例，下载主题文件并放在网站下的themes 目录下。

    将主题添加到网站的配置下：

    cd quickstart 
echo 'theme = "LoveIt"'

  • 添加博文

    可以手动建立一定的文件，例如~content/<CATEGORY>/<FILE>.<FORMAT>，也可以通过代码

    hugo new posts/my-first-post.md

    一般作为博文的 md. 文件开头都有一些特定的语句，代表了这篇文章的一些属性，如LoveIt主题下博文提供了很多可供定义的元属性。将draft属性设定为true才会使文章从草稿状态转为发布。

  • 开始Hugo 服务

    Hugo server -D

    运行后打开http://localhost:1313/ 就可以对网站进行预览。

修改主题参数优化网站

​ 可以修改网站的配置文件 config.toml从而改变网站的布置。

​ LoveIt 主题可以调整的参数包括：

  • 支持搜索（lunr 或 algolia）
  • 显示社交账号，包括GitHub、微博、豆瓣、B站、推特等社交媒体
  • 自定义菜单栏
  • 文章支持目录
  • 支持KaTex 数学公式
  • 支持文章通过推特、Facebook、微博、Evernote 分享

建立静态网站

hugo -D

输出结果会存放于 ./public/ 目录下，其中包含了网站的所有静态内容和资源，接下来就是要将其部署到GitHub Pages上。

利用Github 网页发布文章

将网站文件夹转换为 Git 库

进入新生成的public文件夹下，初始化 Git 库

cd ~/lilian-blog/public  # 生成的 HTML 文件保存在 "public" 目录中，"public" 文件夹会被转换为 Git 库。
git init  # 初始化 Git 库。

在public文件夹下会多出了.git 文件

将 Git 本地库关联至远程库

在public目录下为 Git 本地库添加至远程库

git remote add origin git@github.com:nickchentju/nickchentju.github.io.git

查看 config 文件

cat .git/config  # 显示 config 信息。

返回结果为：

[core]
        repositoryformatversion = 0
        filemode = false
        bare = false
        logallrefupdates = true
        symlinks = false
        ignorecase = true
[remote "origin"]
        url = git@github.com:nickchentju/nickchentju.github.io.git
        fetch = +refs/heads/*:refs/remotes/origin/*

如果 [remote "origin"] 信息正常显示，说明你的 Git 本地库已成功关联至远程库。

提交修改至本地库

在public目录下，通过 Commit 提交修改，并写一个commit message 简短描述具体的修改内容。

git status  # 查看当前修改状态。
git add .  # 添加所有修改过的文件。你也可以只添加某个文件。
git commit -m "Add a new post"  # "Add a new post" 是 commit message.

将修改推至远程库

git push -u origin master -f

最后在仓库设置中的「Github Pages」 一页中检查一下发布的网址和Source，就可以在提供的Github pages 中看到自己的博客了。

image-20210319141222484

最终结果如下：

image-20210319141511051

自动发布

如果需要发布新的博客，是需要将以上步骤重新走一遍的，当然也可以通过自动化脚本进行发布，只需要将博客文章写好并放到post 文件夹中，之后执行脚本，就可以更新文章。常见的脚本如下：

#!/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 -d docs # if using a theme, replace with `hugo -t <YOURTHEME>`
# Add changes to git.
git add docs
# Commit changes.
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
	msg="$*"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin main