Hugo+Github Pages搭建个人博客

一 前言#

诶诶，说是github page加hugo能搭建个人博客，那究竟这些是啥工具还是软件呀

那就去了解呗，了解学习这些技术，不懂就去查就去问。加油!

首先看看hugo吧#

hugo是什么？#

Hugo 是一个用 Go 语言编写的静态网站生成器。

什么是静态网站？#

静态网站是指使用固定数量的由 HTML、CSS 和 JavaScript 组成的预置文件来提供页面的网站。

静态网站没有后台服务器端处理，也没有数据库。与静态网站相关的任何 “动态” 功能都是在客户端执行的，这意味着代码是在访问者的浏览器中而不是在服务器上执行的。

用非技术术语来说，这意味着您的主机将网站文件发送到访问者的浏览器上，与这些文件在服务器上的显示完全一致。

更重要的是，每一位访问者的浏览器都会收到相同的静态文件，这就意味着访问者会获得完全相同的体验，看到完全相同的内容。

什么是动态网站？#

动态网站是指由服务器端控制并依赖于某种脚本语言（如 PHP）的网站。每次有人访问网站*，服务器都会处理其代码和/或查询数据库，以生成完成的页面。

这样，服务器就能为每次访问显示不同的内容。例如，登录网站的人可能会看到一个版本的页面，而未登录的人在访问该页面时可能会看到完全不同的内容。

这也意味着，您在网站管理控制面板上所做的任何更改都可以立即看到，因为内容管理系统会自动开始提供带有最新内容/更改的页面。

** 提示：***使用页面缓存等技术，可以在一定时间内存储完成的 HTML 版本页面，从而无需每次加载页面时都执行上述操作。

静态网站优点#

• 更易于优化性能-可以说，由于静态网站的 “活动部件 “较少，因此更易于优化性能。静态网站一般都非常精简，加载速度也很快，尤其是如果你制作得当的话。
• 需要的服务器资源更少-由于静态网站不需要任何服务器端处理，因此每次访问时服务器需要做的工作要少得多。这就提高了网站的性能，并有助于网站在扩展时发挥更好的性能。您甚至可以直接将静态网站部署到 CDN，而完全不使用网络服务器（这在一定程度上意味着您的网站没有静态 IP 地址）。
• 托管静态网站的费用非常低廉-对于简单的业余爱好项目/作品集而言，您可以将其免费托管在我们的静态网站托管服务上，或使用其他免费托管服务，如 GitHub Pages 或 Cloudflare Pages。
• 更容易确保安全-由于静态网站不依赖服务器端处理或数据库，因此恶意行为者的攻击面较少。静态网站仍有可能被黑客攻击，但发生的可能性要小得多。 非常容易启动简单的网站–您可以非常快速地启动静态网站，因为您无需担心数据库等技术细节的设置。

静态网站缺点#

• 应用内容/设计更新可能更复杂-对于静态网站，每次进行更改或应用更新时都需要重新部署网站，即使是更改导航菜单中的一个项目这样很小的事情也是如此。这可能会增加一些额外的复杂性，尤其是当你定期更改网站时。不过，当你通过 Kinsta 等静态网站托管服务部署 Git 仓库时，你可以开启自动部署功能，在有任何更改时自动从 Git 仓库触发部署。
• 添加功能的技术性更强-使用 WordPress 等动态网站工具，当你想为网站添加功能时，可以安装一个新插件。而对于静态网站，通常（但并不总是）会更加复杂。
• 内容管理功能通常没有那么强-静态网站工具在管理内容方面通常没有那么强，如果你有一个拥有成千上万内容和大量分类组织的大型网站，这可能会很麻烦。不过，一些静态网站生成器正在努力减少这一问题。
• 依赖第三方服务实现网络表单等基本功能-例如，大多数静态网站都使用 FormBold 或 Getform 等表单端点 API。或者，你也可以嵌入第三方表单服务，如 Google 表单（或这些 Google 表单替代品之一）。对于 WordPress 这样的动态内容管理系统，您只需安装一个表单插件，然后将所有内容存储到网站数据库中即可。

如何创建静态网站#

1. 选择静态网站生成器或内容管理系统#

首先，选择一个静态网站生成器或一个可以部署静态网站的内容管理系统。

静态网站生成器为您提供了一种更简单的方式来构建静态网站。它还能让您在将来更新网站时更加轻松。

静态网站生成器可以帮助您部署新版本的所有网站文件，以反映所做的更改，而无需在做出更改（如在导航菜单中添加新项目）时编辑每一个 HTML 文件。

以下是一些常用的静态网站生成器，你可以考虑使用：

• Jekyll – 最受欢迎的开源静态网站生成器之一。可用于各种网站并支持博客。我们有一整篇文章介绍如何使用 Jekyll 创建静态网站。
• Hugo – 另一种流行的开源生成器，适用于各种不同类型的网站。我们也有一篇关于如何使用 Hugo 创建静态网站的文章。
• WordPress + 静态网站生成器插件 – 您可以使用 WordPress 构建网站，然后使用您喜欢的静态网站生成器插件将其部署为静态 HTML 网站。

gihub page那又是什么鸭?#

是不是很兴奋! 那我们就开始搭建属于我们的个人博客吧

这是基于ubuntu(Linux系统)的搭建O

二 准备#

1.创建 GitHub 帐户 —– 默认都有啦#

2.安装git#

• 查看是否安装了git 及 安装 在终端执行：

git

没有，进行git安装：

sudo apt-get install git

执行中可能有无错误，提示：

E: Failed to eftch http://archives.....
....
E: Unable to fetch http.....

这个缺少某些依赖，进行更新操作即可，执行下面：

sudo apt-get update

再次执行git的安装命令，ok 安装完成后，执行

git

• git的配置

这里git的配置，与window的相似，只是执行的地方不一样，ubuntu直接在终端执行即可！！

git config --global user.name  “aaa”
git config --global user.email "aa@qq.com"
ssh-keygen -t rsa -C "aa@qq.com"

创建完成后，这个公钥需要在网页上配置一下： 使用命令：

cd ~/.ssh

进入到~/.ssh 文件夹

gedit id_rsa.pub

• 打开公钥文件：id_rsa.pub 将文件的全部内容复制
• 然后打开自己github账号 点击头像 打开github -» setting –» SSH and GRG keys –»创建一个key,把复制的内容粘贴,就可以拉!

可能要登陆确认

安装hugo#

• 打开 Github 中的 Hugo 库，打开右边侧边栏About下面的 Realeases，下载最新的版本，本次下载为：hugo_extended_0.121.1_windows-amd64.zip

  

• 解压后，将其中的 hugo.exe 放到指定的安装目录，比如 D:\softwares\Hugo\bin，然后将该目录添加到系统环境变量（win+R → sysdm.cpl → 高级 → 环境变量 → 系统变量 Path）的 Path 下。

• 打开命令行，输入 hugo version，显示版本号即为安装成功

  

三 利用hugo快速发布自己的个人博客(主题是最简单)#

A.开始搭建#

1.在目录中为您的博客创建一个以myblog命名的文件夹目录结构

hugo new site myblog

2.将当前目录更改为博客的根目录。

cd myblog

3.在当前目录中初始化一个空的 Git 存储库。

git init

4.将PaperMod主题克隆到博客目录结构中，并将其作为Git 子模块themes添加到您的博客中。

皮肤列表 - Hugo中文文档 (gohugo.org)

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

5.在博客配置文件hugo.toml(位于根目录)中添加一行，表明为PaperMod主题。

echo "theme = 'PaperMod'" >> hugo.toml

6.启动Hugo的开发服务器来预览博客。

hugo server

#打开连接http://localhost:1313/

#有的主题配置起来有点难度

现在的每一步都是在根目录（myblog下进行）

B.添加内容#

1.向您的网站添加新页面。

hugo new posts/文章标题/index.md
# posts为你文章存储的文件夹名，可任取
# 默认生成路径为content/posts/文章

为什么使用这个路径来存放文章好问题

使用任意文本编辑器打开文件my-first-post.md，可以看到默认内容为：

---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---

请注意draft中的值为true，代表草稿状态。默认情况下，Hugo 在您构建网站时不会发布草稿内容。

2.保存文件，然后启动Hugo的开发服务器来预览博客

# 运行以下任一命令来预览草稿内容
hugo server --buildDrafts
hugo server -D

#复制

C.配置网站#

使用编辑器打开项目根目录中的博客配置文件 ( hugo.toml)。

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'PaperMod'

进行以下更改：

1. 为您的网站设置baseURL。该值必须以协议开头并以斜杠结尾，如上所示。
2. 设置languageCode为您的语言和区域（中文简体为zh-CN）。
3. 为您的网站设置标题title。

启动 Hugo 的开发服务器以查看您的更改，请记住包含草稿内容。

hugo server -D

D.发布网站#

在此步骤中，您将发布您的网站，但不会部署它。

当您发布public站点时，Hugo 在项目根目录的目录中创建整个静态站点。这包括 HTML 文件以及图像、CSS 文件和 JavaScript 文件等资产。

当您发布网站时，您通常不希望包含草稿、未来或过期的内容。命令很简单：

hugo

四 在互联网上利用Github Pages部署个人博客#

GitHub 通过 GitHub Pages 服务直接从 GitHub 存储库通过 SSL 为个人、组织或项目页面提供免费、快速的静态托管，并自动化开发工作流程并使用 GitHub Actions 进行构建。

Step1.创建Github存储库。#

注意库名必须以用户名开头，例如：我的用户名是liumy-lay，则库名为liumy-lay.github.io

Step2.将本地存储库推送到 GitHub#

• 报错：由于生成本地git库的分支默认是master，而github库默认分支为main，因此git push时会出现各种报错

• 解决：将本地分支改名为main，重新git push会报fatal，根据fatal提示内容强制推送即可解决。

• 
  $ git remote add origin git@github.com:[yourUsername]/[yourUsername].github.io.git # 将本地git库与远程Github库建立联系
  $ git add .
  $ git commit -m 'first commit' 
  $ git push origin main
  error: src refspec main does not match any
  error: failed to push some refs to 'github.com:liumy-lay/liumy-lay.github.io.git'
  #报错：由于生成本地`git`库的分支默认是`master`，而`github`库默认分支为`main`，因此`git pus`h时会出现各种报错
  
  
  $ git branch -M main       # 将当前分支改名为main
  $ git branch -a            # 可以查看当前所有分支，此命令非必要
  $ git push origin
  #解决：将本地分支改名为`main`，重新`git push`会报`fatal`，根据`fatal`提示内容强制推送即可解决。
  fatal: The current branch main has no upstream branch.
  To push the current branch and set the remote as upstream, use git push --set-upstream origin main
  #还会有点错
  
  $
  $ git push --set-upstream origin main --force #强制推送合并分支
  Enumerating objects: 32, done.
  Counting objects: 100% (32/32), done.
  Delta compression using up to 16 threads
  Compressing objects: 100% (24/24), done.
  Writing objects: 100% (32/32), 49.14 KiB | 137.00 KiB/s, done.
  Total 32 (delta 5), reused 0 (delta 0), pack-reused 0
  remote: Resolving deltas: 100% (5/5), done.
  To github.com:liumy-lay/liumy-lay.github.io.git
   + b899144...23b296b main -> main (forced update)
  branch 'main' set up to track 'origin/main'.
      
  
  ### Step3.访问您的 GitHub 存储库，从主菜单中选择设置 > 页面。在屏幕中央，将源更改为`GitHub Actions`。改变是立竿见影的；您不必按“保存”按钮。[#](#step3访问您的-github-存储库从主菜单中选择设置--页面在屏幕中央将源更改为github-actions改变是立竿见影的您不必按保存按钮)
  
  ![image-20231228215625260](https://liumy-lay.github.io/posts/hugo-github-pages/index.assets/image-20231228215625260.png)
  
  ### Step4.在本地存储库中根目录下创建一个空文件`.github/workflows/hugo.yaml`。[#](#step4在本地存储库中根目录下创建一个空文件githubworkflowshugoyaml)
  
  ### Step5.将下面的 YAML 复制并粘贴到您创建的文件中。根据需要更改分支名称和 Hugo 版本。[#](#step5将下面的-yaml-复制并粘贴到您创建的文件中根据需要更改分支名称和-hugo-版本)
  
  ```yaml
  # Sample workflow for building and deploying a Hugo site to GitHub Pages
  name: Deploy Hugo site to Pages
  
  on:
    # Runs on pushes targeting the default branch
    push:
      branches:
        - main # 分支名称默认为main
  
    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:
  
  # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
  permissions:
    contents: read
    pages: write
    id-token: write
  
  # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
  # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
  concurrency:
    group: "pages"
    cancel-in-progress: false
  
  # Default to bash
  defaults:
    run:
      shell: bash
  
  jobs:
    # Build job
    build:
      runs-on: ubuntu-latest
      env:
        HUGO_VERSION: 0.121.0 # Hugo版本号
      steps:
        - name: Install Hugo CLI
          run: |
            wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
            && sudo dpkg -i ${{ runner.temp }}/hugo.deb                              
        - name: Install Dart Sass
          run: sudo snap install dart-sass
        - name: Checkout
          uses: actions/checkout@v4
          with:
            submodules: recursive
            fetch-depth: 0
        - name: Setup Pages
          id: pages
          uses: actions/configure-pages@v4
        - name: Install Node.js dependencies
          run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
        - name: Build with Hugo
          env:
            # For maximum backward compatibility with Hugo modules
            HUGO_ENVIRONMENT: production
            HUGO_ENV: production
          run: |
            hugo \
              --gc \
              --minify \
              --baseURL "${{ steps.pages.outputs.base_url }}/"                              
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v2
          with:
            path: ./public
  
    # Deployment job
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      needs: build
      steps:
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v3
  

Step6.使用“Add workflows”之类的提交消息将更改提交到本地存储库，然后推送到 GitHub。#

$ git add .
$ git commit -m 'Add workflows' 
$ git push origin 
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 16 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (5/5), 1.32 KiB | 1.32 MiB/s, done.
Total 5 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:liumy-lay/liumy-lay.github.io.git
   23b296b..aec5cc1  main -> main

Step7.从 GitHub 的主菜单中，选择Actions。#

当 GitHub 完成站点的构建和部署后，状态指示器的颜色将变为绿色。在部署步骤下，您将看到指向您的实时站点的链接。

将来，每当您从本地存储库推送更改时，GitHub 都会重建您的站点并部署更改。

总结#

本次搭建出现了许多BUG, 找了许多的解决办法, 但是仍然有不足之处,比如: 主题还太简单,部分操作还有新的问题等等!

日常发布文章命令

$ hugo new [posts]/[name]/index.md
$ hugo server -D
$ hugo
$ git add .
$ git status
$ git commit -m '[描述信息]'
$ git push origin

看到action变绿色就代表可以了,不过更新速度有点慢!

这就是本次手动搭建博客的全过程拉!