..

Create Web with HUGO and Github

使用 HUGO 创建个人静态网站并且部署在 Github 上

优点：
网站可以使用多个已有模板。
在本地写博客，然后自动生成静态网页文件，然后 push 到 Github 仓库。Github 仓库中是静态文件，加载快。
对 git 命令熟悉一点更好操作。花费3个小时左右搞定，参考了两篇教程都很一般。因为一切都不熟悉，幸亏之前自学了一点 git 基础命令。

  1. 下载hugo_extended_withdeploy_0.146.1_windows-amd64.zip、解压、添加环境变量、命令行执行hugo version

  2. 本地新建一个项目

hugo new site quickstart
cd quickstart/
git init
git submodule add https://github.com/hanwenguo/hugo-theme-nostyleplease.git themes/nostyleplease    # 主题
echo "theme = 'nostyleplease'" >> hugo.toml
hugo server # 即可在本地创建项目
  1. 新增一篇博客
hugo new content content/posts/my-first-post.md
vi content/posts/my-first-post.md   # draft = true表示调试
hugo server --buildDrafts   # 开启调试模式

git add .
git commit -a -m "Initial commit"   # 先保存一次
  1. 配置网站
vi hugo.toml
    baseURL = 'https://guo986.github.io'    # GitHub的网址
    languageCode = 'en-us'
    title = 'Guozf Site'
    theme = 'nostyleplease'

  1. GitHub创建个人网站，参考 Github 官方教程很简单

  2. 删除 public 文件，方便 github 远程仓库 pull 进来 [quote]

rm -rf .git/modules/public
rm -rf public
git rm -rf public
  1. 首先 pull github，这样博客写好之后可以直接把静态网页文件 push 到 github 中
git submodule add -f -b guoGithub https://github.com/Guo986/guo986.github.io.git public/    # 关联 github 远程仓库与本地 public 文件夹
hugo    # 从源码生成静态网站文件到public文件夹。
git add .
git commit -m "add a blog: createWebwithGithub "  # 提交内容，这里提交的是整个项目中的东西。
hugo server # 本地运行
cd public
vi CNAME    # 修改为自己的域名，详情见第5步，这里为 github.guozf.cn
vi README
hugo server # 本地运行
git add .   # 提交内容，这里提交的是 public 中的东西而非整个项目
git commit -m "OK with github"
git remote
git push origin main    # 推送 public 内容到 github 。
  1. 一键上传脚本 push2github.sh

写好博客 markdown 之后，执行这个脚本即可一键 push 网页文件到 Github ，其实就是把上面的 git 命令写到脚本中。

#!/bin/bash

# hugo new content content/posts/my-first-post.md # 写博客
# 检查脚本是否提供了参数
if [ $# -eq 0 ]; then
  message="auto commit --"
else
  message="$1"
fi

hugo
git add .
git commit -m "${message}"
cd public
git add .
git commit -m "${message}"
git push origin main

[Top]