Featured image of post Hugo + Github Pages/Cloudflare Pages搭建个人博客
备忘

Hugo + Github Pages/Cloudflare Pages搭建个人博客

Introduction

经历了一次服务器硬件的淘汰之后决定给自己写一些服务工具的备忘录以防硬盘爆炸重装时再踩一遍坑，在notion和一众博客方案中选择了部署方便的hugo+GitHub/Cloudflare的静态页面托管服务。遂有了这第一篇文章。

好处是成本很低，不需要服务器甚至域名也可以不需要，维护全部交给大厂，搭建完之后每次新文章只需提交到Github便会刷新构建。不过不管是Github还是Cloudflare国内总会抽风，会不定时分地区的可用性下降。如果只是个人用，代理常开的情况下是无感的。

Final

选用的hugo主题是hugo-theme-stack

安装Git与Hugo

安装Git

  1. Git官网https://git-scm.com/downloads 一路下一步即可

安装Hugo

  1. Github Releaseshttps://github.com/gohugoio/hugo/releases下载解压
    务必选择extended版本，如：hugo_extended_0.132.2_windows-amd64.zip
    放入指定目录如： D:\tools\hugo_extended\hugo.exe
  2. 添加系统变量
    win+R输入sysdm.cpl → 高级 → 环境变量 → 系统变量找到Path变量 → 编辑 → 新建 → 将hugo.exe的目录加入，如： D:\tools\hugo_extended
  3. 确认安装成功
    cmd中输入hugo version,输出以下即为成功 
    1
2

    C:\Users\User>hugo version
hugo v0.132.1-1bde700dfc0770bb11eb8445aff1ab5abdccb46e+extended windows/amd64 BuildDate=2024-08-13T10:10:10Z VendorInfo=gohugoio

新建Hugo博客

  1. 新建一个目录，用来存放博客的根目录，如： D:\tools\hugo，之后都将这个目录称为根目录。
  2. cmd命令，其中blog可以自定义，也是生成的文件夹名 
    1

    hugo new site blog

应用Hugo主题

  1. 来到根目录下，cmd命令： 
    1

    git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

配置&美化

  1. 来到根目录\themes\hugo-theme-stack\exampleSite文件夹下，将hugo.yaml文件复制至根目录下，如果根目录下有别的配置文件如hugo.toml/JSON，将其删掉。然后打开hugo.yaml，根据模板进行修改。

  2. 其中favicon网站图标favicon.ico需要放到根目录\static下，然后配置是favicon: /favicon.ico

  3. 其中avatar侧栏头像avatar.png需要放到根目录\assets\img下，然后配置是src: img/avatar.png

  4. 如果需要搜索和归档栏，需要在主题模板根目录\themes\hugo-theme-stack\exampleSite\content\page中找到对应的.md文件并放到根目录同样的文件夹下如:根目录\content\page\search\index.md并按需修改。

  5. 接下来是样式的美化，供参考，根目录\assets\scss下新建custom.scss，并编辑：

    //----------------------------------------------------
// 页面基本配色
:root {
    // 全局顶部边距
    --main-top-padding: 30px;
    // 全局卡片圆角
    --card-border-radius: 25px;
    // 标签云卡片圆角
    --tag-border-radius: 8px;
    // 卡片间距
    --section-separation: 40px;
    // 全局字体大小
    --article-font-size: 1.8rem;
    // 行内代码背景色
    --code-background-color: #f8f8f8;
    // 行内代码前景色
    --code-text-color: #e96900;
    // 暗色模式下样式
    &[data-scheme="dark"] {
      // 行内代码背景色
    --code-background-color: #f8f8f814;
      // 行内代码前景色
    --code-text-color: #e96900;
      // 暗黑模式下背景色
    //--body-background: #000;
      // 暗黑模式下卡片背景色
    //--card-background: hsl(225 13% 8% / 1);
    }
  }
  //------------------------------------------------------
  // 修复引用块内容窄页面显示问题
  a {
    word-break: break-all;
  }

  code {
    word-break: break-all;
  }

  //---------------------------------------------------
  // 文章封面高度
  .article-list article .article-image img {
    width: 100%;
    height: 200px !important;
    object-fit: cover;

    @include respond(md) {
        height: 250px !important;
    }

    @include respond(xl) {
        height: 285px !important;
    }
  }

  //--------------------------------------------------
  // 文章内容图片圆角阴影
  .article-page .main-article .article-content {
    img {
      max-width: 96% !important;
      height: auto !important;
      border-radius: 8px;
    }
  }

  //------------------------------------------------
  // 文章内容引用块样式
  .article-content {
    blockquote {
      border-left: 6px solid #d57b5e !important;
      background: #ffefdf;
    }
  }
  [data-scheme="dark"] {
    .article-content {
      blockquote {
        border-left: 6px solid #d57b5e !important;
        background: #d57c5e54;
      }
    }
  }
  // ---------------------------------------
  // 代码块样式修改
  .highlight {
    max-width: 102% !important;
    background-color: var(--pre-background-color);
    padding: var(--card-padding);
    position: relative;
    border-radius: 20px;
    margin-left: -7px !important;
    margin-right: -12px;
    box-shadow: var(--shadow-l1) !important;

    &:hover {
      .copyCodeButton {
        opacity: 1;
      }
    }

    // keep Codeblocks LTR
    [dir="rtl"] & {
      direction: ltr;
    }

    pre {
      margin: initial;
      padding: 0;
      margin: 0;
      width: auto;
    }
  }

  // light模式下的代码块样式调整
  [data-scheme="light"] .article-content .highlight {
    background-color: #fff9f3;
  }

  [data-scheme="light"] .chroma {
    color: #ff6f00;
    background-color: #fff9f3cc;
  }



  //-------------------------------------------
  // 设置选中字体的区域背景颜色
  //修改选中颜色
  ::selection {
    color: #fff;
    background: #34495e;
  }

  a {
    text-decoration: none;
    color: var(--accent-color);

    &:hover {
      color: var(--accent-color-darker);
    }

    &.link {
      color: #4288b9ad;
      font-weight: 600;
      padding: 0 2px;
      text-decoration: none;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  //-------------------------------------------------
  //文章封面高度更改
  .article-list article .article-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;

    @include respond(md) {
      height: 200px;
    }

    @include respond(xl) {
      height: 305px;
    }
  }

  //---------------------------------------------------
  // 全局页面布局间距调整
  .main-container {
    min-height: 100vh;
    align-items: flex-start;
    padding: 0 15px;
    gap: var(--section-separation);
    padding-top: var(--main-top-padding);

    @include respond(md) {
      padding: 0 37px;
    }
  }

  //--------------------------------------------------
  //页面三栏宽度调整
  .container {
    margin-left: auto;
    margin-right: auto;

    .left-sidebar {
      order: -3;
      max-width: var(--left-sidebar-max-width);
    }

    .right-sidebar {
      order: -1;
      max-width: var(--right-sidebar-max-width);

      /// Display right sidebar when min-width: lg
      @include respond(lg) {
        display: flex;
      }
    }

    &.extended {
      @include respond(md) {
        max-width: 1024px;
        --left-sidebar-max-width: 25%;
        --right-sidebar-max-width: 22% !important;
      }

      @include respond(lg) {
        max-width: 1280px;
        --left-sidebar-max-width: 20%;
        --right-sidebar-max-width: 30%;
      }

      @include respond(xl) {
        max-width: 1453px; //1536px;
        --left-sidebar-max-width: 15%;
        --right-sidebar-max-width: 25%;
      }
    }

    &.compact {
      @include respond(md) {
        --left-sidebar-max-width: 25%;
        max-width: 768px;
      }

      @include respond(lg) {
        max-width: 1024px;
        --left-sidebar-max-width: 20%;
      }

      @include respond(xl) {
        max-width: 1280px;
      }
    }
  }

  //-------------------------------------------------------
  //全局页面小图片样式微调
  .article-list--compact article .article-image img {
    width: var(--image-size);
    height: var(--image-size);
    object-fit: cover;
    border-radius: 17%;
  }

  //----------------------------------------------------
  //固定代码块的高度
  .article-content {
    .highlight {
        padding: var(--card-padding);
        pre {
            width: auto;
            max-height: 20em;
        }
    }
  }

  //--------------------------------------------------
  // 修改首页搜索框样式
  .search-form.widget input {
    font-size: 1.5rem;
    padding: 44px 25px 19px;
  }



//--------------------------------------------------
//归档页面双栏
/* 归档页面两栏 */
@media (min-width: 1024px) {
    .article-list--compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: none;
      box-shadow: none;
      gap: 1rem;

      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        border-radius: 16px;
      }
    }
  }

上传至Github

在进行过一次hugo命令之后会在根目录\public下构建静态网站，需要上传至Github的就是这一部分

  1. 新建一个GitHub仓库，仓库名是Github用户名.github.io，如：user.github.io
  2. 与GitHub仓库关联，在根目录\public下，依次输入以下cmd命令： 
    1
2

    git init
git remote add origin [email protected]:user/user.github.io.git
    其中user改成自己的GitHub用户名。
  3. 来到根目录\public下，依次输入以下cmd命令： 
    1
2
3

    git add .
git commit -S -m "commit"
git pull origin main

启用Github Pages

Github Pages需要公开仓库，如不想公开，可以新建私人仓库并跳过这一步

  1. 来到GitHub仓库 → settings Pages → Deploy from a branch → 选择main分支 → Save
  2. 之后会进行自动构建，默认网址是https://user.github.io

启用Cloudflares Pages

  1. 在Cloudflare登录后，Workers 和 Pages → 创建Pages → 连接到Git → 选择之前上传的Github仓库与分支main → 框架预设无 → 保存并部署。
  2. 之后会进行自动构建，默认网址是https://你的Pages名.pages.dev

日常写作

如果能构建成功并打开网址，以后只需要在博客根目录下自行创建.md文件并用markdown写作即可，目录结构如下：

1
2
3
4
5
6

content
└── post
    └── my-first-post
        ├── index.md
        ├── image1.png
        └── image2.png

编辑时可以构建本地博客实时预览，在根目录下cmd命令：

1

hugo server -D

默认网址http://localhost:1313/
完成之后来到根目录下构建一次（不带server的命令会完全应用baseurl的参数，以在正式的网站上而不是localhost正确运行），cmd命令：

1

hugo -D

最后来到根目录\public下提交到Github，依次输入以下cmd命令：

1
2
3

git add .
git commit -S -m "commit"
git pull origin main

之后Github Pages/Cloudflare Pages会自动重新构建，只需稍等就可以在网页看到了。

更新

hugo

与安装时一样，Github Releases下载后覆盖原来的文件即可。

主题

以我为例，来到根目录\themes\hugo-theme-stack\下，cmd命令：

1

git pull

补充

  1. 修改css样式/更新主题后可能需要删除根目录\resources\_gen下所有文件重新构建才生效。
  2. 内容（post）不对时可能需要删除根目录\public下所有文件重新构建，注意不要把.git文件夹删了。

© 2024 Yukari Blog
最爱22💖
Built with Hugo
Theme Stack designed by Jimmy