如何通过hugo和Github Repo搭建个人博客并使用Netlify进行托管

我看的第一篇关于如何搭建个人博客的文章里,作者说“相信很多人都跟我一样,搭建博客后的第一篇博文便是教如何搭建博客”,事实证明他是对的。下面,让我来讲讲如何通过hugo和Github Repo来搭建属于自己的个人博客吧。本文适合完全没有Hugo和命令行经验的新手。

一、本地部署

首先,我们需要下载hugo,建议安装扩展版(hugo-Extended),下载完毕后,在命令行中输入以下命令来确认hugo版本:

hugo version

如果输出类似图中所示,且含有“extended”字样,则证明下载了正确的版本:

hugo version

下载完成后,将hugo.exe添加进系统的环境变量。在你想要储存博客文件的目录下使用以下命令进行博客项目的本地初始化:

hugo new site <你的博客所在的目录名>
cd .\<你的博客所在的目录名>
git init
git submodule add <主题仓库地址> themes/主题名

我们还需要下载Git并注册Github账号,以便我们后续将博客文件上传至Github。

接下来,在Hugo Themes找一个你喜欢的主题进行下载。

将博客根目录/theme/你的博客主题名称/examplesite/hugo.toml这个文件复制到博客根目录并进行替换。在hugo.toml这一文件中对网站进行配置,记得务必设置博客主题(theme = ""),否则网站可能不会正常显示。hugo.toml也可以改为hugo.yaml或hugo.json,格式不同,但本质都是配置文件。部分主题提供 examplesite 配置文件,可复制到根目录作为参考,但不同主题结构可能不同,请以主题文档为准。

以上工作全部配置完成后,在Powershell中输入以下命令来预览博客样式:

hugo server
hugo server

ctrl+左键点击图中的http://localhost:1313/进入博客预览,如果你能看到你的博客样式正常显示,那么恭喜你,我们的工作已经完成一半了。

二、上传到Github并实现自动化推送

出于对代码安全性的考量以及实现自动化推送的目的,我们将整个博客分为三个仓库,第一个仓库类型为Private,用来储存博客的源代码,第二个仓库类型则设为Public,用来储存博客的可展示内容,第三个仓库依旧是Public,作为博客的图床使用。此处先仅对前两个仓库进行讲解。

我们先在自己的Github账号下新建两个仓库,第一个记作Blog_Source,设为Private;第二个记作Blog_Display,设为Public。然后,点击右上角的头像,在Setting下找到Developer settings,选择Personal access tokens > Tokens(Classic),点击右上角的Generate new token > Generate new token(classic)。也可以使用 Fine-grained token(推荐),权限更安全。接下来,Expiration选择No expiration,并在下方勾选repo和workflow这两个权限,生成后将token保存。需要注意的是:token的具体内容在生成后只会显示一次,之后你就再也看不到它了。

此时我们返回Blog_Source这个仓库,点击右上角的Settings,在左侧找到Secrets and variables > Actions,选择New repository secret为仓库添加token。

我们计划使用Netlify对博客进行托管,所以无需在Blog_Display这一仓库中打开Github Pages。

这里我写了一个自动化推送的脚本,命名为deploy.yml并放在博客根目录/.github/workflows/deploy.yml下即可生效:

name: deploy

on:
  push:
    branches:
      - main #改成你自己的博客文件所在分支的名称

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

      - name: Set up Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: "latest"

      - name: Build
        run: hugo -F --minify

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          PERSONAL_TOKEN: ${{ secrets.tokenName }} #把tokenName改成你的Blog_Source仓库配置的token名称
          EXTERNAL_REPOSITORY: userName/repoName #改成你的用户名/"Blog_Display"仓库名称
          PUBLISH_BRANCH: main #改成你自己的博客文件所在分支的名称
          PUBLISH_DIR: ./public
          commit_message: ${{ github.event.head_commit.message }}

还记得博客本地初始化时的“git init”这行命令吗?它的具体含义是在当前目录中初始化一个空的 Git 仓库。接着,在博客根目录打开Powershell,输入下面的命令将本地的博客根目录与Github仓库建立远程连接并上传文件:

git remote add origin <你的Blog_Source仓库的Github地址>
git add .
git commit -m "first commit"
git push -u origin main

这样,整个博客的基本内容就都已经搭建好了,剩下的就是锦上添花的其他配置内容了。

三、基于PicGo和Github Repo的博客图床配置

我们需要先去Github下载PicGo,然后在自己的Github账号下再新建一个Public类型的仓库,此处记作Blog_Img。我们需要申请一个新的token并将其应用给Blog_Img,方法和上面相同。

接着,打开PicGo,找到图床设置 > Github,按照要求填写好图床配置,此处的token和给Blog_Img用的token相同。

PicGo Github图床配置

这些都配置完成后,你的博客就拥有了属于自己的图床,未来就可以写带图片的文章了。

四、基于Netlify的博客托管方案

使用Netlify对博客进行托管的好处是:支持预览部署、自定义构建环境和表单收集,调试难度更低,以及更快的CDN和缓存,而且完全免费!

方法很简单:进入Netlify官网,注册账号并登陆后选择Add new project > Import a Git repository > Github,选择Blog_Display这个仓库即可。域名填你自己喜欢的就行,注意不能重名。

五、基于Giscus的博客评论区/留言板实现方案

进入Giscus项目官网,按照网页提示一步一步走就行了,记得首先要在Github中下载这个Github App并应用于你的Blog_Display仓库才能使用这个项目哦。如果看不懂英文,可以在上面的网页里把文档调成中文。建议勾选“懒加载评论(Load the comments lazily)”这一选项,可以使网页加载更快,其余的配置随你喜欢。

六、总结

第一次给博客写文章,感觉和以往的码字没什么太大区别,但也略微有些不太好描述出来的不同之处呢。这篇文章,肯定是有很多不足之处的,但也可以作为一篇对我博客搭建过程的记录。希望自己以后能勤快些,多写些文章吧。

参考文献:

1.左-岚,【大学生提高课】3 hexo与hugo博客搭建与github自动化推送和服务器推送,2025-02-11

2.失迹的博客,建站技术 | 使用 Hugo + Stack 简单搭建一个博客,2023~2024

3.hugo中文官方文档

技术