博客搭建:Hugo+GithubPages

Posted by Nefelibata on Wed 2024-03-20 | | about 18 mins
Last Modified on Thu 2024-05-23

本文借鉴并修改自 Windows下使用hugo和Github Pages配置博客

1 下载安装hugo

访问最新版本页面下载,推荐使用 Hugo extended 版本

解压到某个目录,然后将该目录添加到环境变量中

通过上述操作安装 hugo 程序后,就可以通过 hugo new site 命令进行网站创建、配置与本地调试了。 选择一个本地文件夹作为根目录,右键——Git Bash Here,输入下面的命令

1hugo new site <site-name>

hugo new site 命令进行网站创建

注:后续命令未经说明,均在 Git Bash 中的 E:\Workspace\blog 目录下运行

2、主题

2.1 安装

初始化你的项目目录为一个空的 Git 存储库,将主题克隆到 themes 目录中,将其作为 [Git 子模块][git-submodule] 添加到您的项目中。

1git init 
2git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

2.2 基础配置

用VScode打开E:\Workspace\blog文件夹,用下面的内容覆盖hugo.toml文件。并自行修改baseURL和title。 其中,baseURL为你的github账户名.github.io,也可以像我一样设置自定义域名。记得逐项修改为你的配置。

   1# =====================================================================================
   2# It's recommended to use Alternate Theme Config to configure FixIt
   3# Modifying this file may result in merge conflict
   4# =====================================================================================
   5
   6# -------------------------------------------------------------------------------------
   7# Hugo Configuration
   8# See: https://gohugo.io/getting-started/configuration/
   9# -------------------------------------------------------------------------------------
  10
  11# 网站标题
  12title = "云吱的小站"
  13# Hostname (and path) to the root
  14baseURL = "https://haoyep.com/"
  15# baseURL = "https://leegical.github.io/"
  16# 更改使用 Hugo 构建网站时使用的默认主题
  17theme = ["FixIt"]
  18# determines default content language ["en", "zh-cn", "fr", "pl", ...]
  19defaultContentLanguage = "zh-cn"
  20# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
  21languageCode = "zh-CN"
  22# 语言名称 ["English", "简体中文", "Français", "Polski", ...]
  23languageName = "简体中文"
  24# 是否包括中日韩文字
  25hasCJKLanguage = true
  26# default amount of posts in each pages
  27paginate = 12
  28# copyright description used only for seo schema
  29copyright = ""
  30# whether to use robots.txt
  31enableRobotsTXT = true
  32# whether to use git commit log
  33enableGitInfo = true
  34# whether to use emoji code
  35enableEmoji = true
  36
  37# -------------------------------------------------------------------------------------
  38# Menu Configuration
  39# See: https://fixit.lruihao.cn/documentation/basics/#menu-configuration
  40# -------------------------------------------------------------------------------------
  41
  42[menu]
  43  [[menu.main]]
  44    identifier = "posts"
  45    # you can add extra information before the name (HTML format is supported), such as icons
  46    pre = ""
  47    # you can add extra information after the name (HTML format is supported), such as icons
  48    post = ""
  49    name = "文章"
  50    url = "/posts/"
  51    # title will be shown when you hover on this menu link
  52    title = ""
  53    weight = 1
  54    # FixIt 0.2.14 | NEW add user-defined content to menu items
  55    [menu.main.params]
  56      # add css class to a specific menu item
  57      class = ""
  58      # whether set as a draft menu item whose function is similar to a draft post/page
  59      draft = false
  60      # FixIt 0.2.16 | NEW add fontawesome icon to a specific menu item
  61      icon = "fa-solid fa-archive"
  62      # FixIt 0.2.16 | NEW set menu item type, optional values: ["mobile", "desktop"]
  63      type = ""
  64  [[menu.main]]
  65    identifier = "categories"
  66    pre = ""
  67    post = ""
  68    name = "分类"
  69    url = "/categories/"
  70    title = ""
  71    weight = 2
  72    [menu.main.params]
  73      icon = "fa-solid fa-th"
  74  [[menu.main]]
  75    identifier = "tags"
  76    pre = ""
  77    post = ""
  78    name = "标签"
  79    url = "/tags/"
  80    title = ""
  81    weight = 3
  82    [menu.main.params]
  83      icon = "fa-solid fa-tags"
  84
  85# -------------------------------------------------------------------------------------
  86# Theme Core Configuration
  87# See: https://fixit.lruihao.cn/documentation/basics/#theme-configuration
  88# -------------------------------------------------------------------------------------
  89
  90[params]
  91  # FixIt 0.2.15 | CHANGED FixIt theme version
  92  version = "0.2.X" # e.g. "0.2.X", "0.2.15", "v0.2.15" etc.
  93  # 网站描述
  94  description = ""
  95  # 网站关键词
  96  keywords = ["程序员"]
  97  # 网站默认主题样式 ["light", "dark", "auto"]
  98  defaultTheme = "auto"
  99  # 公共 git 仓库路径,仅在 enableGitInfo 设为 true 时有效
 100  gitRepo = ""
 101  #  哪种哈希函数用来 SRI, 为空时表示不使用 SRI
 102  # ["sha256", "sha384", "sha512", "md5"]
 103  fingerprint = "sha256"
 104  #  日期格式
 105  dateFormat = "2006-01-02"
 106  # 网站图片,用于 Open Graph 和 Twitter Cards
 107  images = ["/logo.png"]
 108  #  开启 PWA 支持
 109  enablePWA = true
 110  #  是否自动显示外链图标
 111  externalIcon = false
 112  #  默认情况下,FixIt 只会在主页的 HTML 头中注入主题元标记
 113  # 您可以将其关闭,但如果您不这样做,我们将不胜感激,因为这是观察 FixIt 受欢迎程度上升的好方法
 114  disableThemeInject = false
 115
 116  # 作者配置
 117  [params.author]
 118    name = ""
 119    email = ""
 120    link = ""
 121    avatar = ""
 122
 123  # 应用图标配置
 124  [params.app]
 125    # 当添加到 iOS 主屏幕或者 Android 启动器时的标题,覆盖默认标题
 126    title = "云吱的小站"
 127    # 是否隐藏网站图标资源链接
 128    noFavicon = false
 129    # 更现代的 SVG 网站图标,可替代旧的 .png 和 .ico 文件
 130    svgFavicon = "/favicon.svg"
 131    # Safari 图标颜色
 132    iconColor = "#5bbad5"
 133    # Windows v8-10 磁贴颜色
 134    tileColor = "#da532c"
 135    #  Android 浏览器主题色
 136    [params.app.themeColor]
 137      light = "#f8f8f8"
 138      dark = "#252627"
 139
 140  # 搜索配置
 141  [params.search]
 142    enable = true
 143    # 搜索引擎的类型 ["lunr", "algolia", "fuse"]
 144    type = "lunr"
 145    # 文章内容最长索引长度
 146    contentLength = 4000
 147    # 搜索框的占位提示语
 148    placeholder = ""
 149    #  最大结果数目
 150    maxResultLength = 10
 151    #  结果内容片段长度
 152    snippetLength = 50
 153    #  搜索结果中高亮部分的 HTML 标签
 154    highlightTag = "em"
 155    #  是否在搜索索引中使用基于 baseURL 的绝对路径
 156    absoluteURL = false
 157    [params.search.algolia]
 158      index = ""
 159      appID = ""
 160      searchKey = ""
 161    [params.search.fuse]
 162      #  https://fusejs.io/api/options.html
 163      isCaseSensitive = false
 164      minMatchCharLength = 2
 165      findAllMatches = false
 166      location = 0
 167      threshold = 0.3
 168      distance = 100
 169      ignoreLocation = false
 170      useExtendedSearch = false
 171      ignoreFieldNorm = false
 172
 173  # 页面头部导航栏配置
 174  [params.header]
 175    #  桌面端导航栏模式 ["sticky", "normal", "auto"]
 176    desktopMode = "sticky"
 177    #  移动端导航栏模式 ["sticky", "normal", "auto"]
 178    mobileMode = "auto"
 179    #  页面头部导航栏标题配置
 180    [params.header.title]
 181      # LOGO 的 URL
 182      logo = "/logo.png"
 183      # 标题名称
 184      name = "云吱的小站"
 185      # 你可以在名称(允许 HTML 格式)之前添加其他信息,例如图标
 186      pre = ""
 187      # 你可以在名称(允许 HTML 格式)之后添加其他信息,例如图标
 188      post = ""
 189      #  是否为标题显示打字机动画
 190      typeit = false
 191    #  页面头部导航栏副标题配置
 192    [params.header.subtitle]
 193      # 副标题名称
 194      name = ""
 195      # 是否为副标题显示打字机动画
 196      typeit = false
 197
 198  # FixIt 0.2.18 | NEW Breadcrumb config
 199  [params.breadcrumb]
 200    enable = false
 201    sticky = false
 202    showHome = false
 203
 204  # 页面底部信息配置
 205  [params.footer]
 206    enable = true
 207    #  自定义内容(支持 HTML 格式)
 208    # 进阶使用,见参数 `params.customFilePath.footer`
 209    custom = ""
 210    #  是否显示 Hugo 和主题信息
 211    hugo = false
 212    #  是否显示版权信息
 213    copyright = true
 214    #  是否显示作者
 215    author = true
 216    # 网站创立年份
 217    since = 2019
 218    #  是否显示网站内容总字数
 219    wordCount = true
 220    #  公网安备信息,仅在中国使用(支持 HTML 格式)
 221    gov = ""
 222    #  ICP 备案信息,仅在中国使用(支持 HTML 格式)
 223    icp = ""
 224    # 许可协议信息(支持 HTML 格式)
 225    license = '<a rel="license external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
 226    #  网站创立时间
 227    [params.footer.siteTime]
 228      enable = true
 229      animate = true
 230      icon = "fa-solid fa-heartbeat"
 231      pre = ""
 232      value = "2018-02-06T11:15:22+08:00" # e.g. "2021-12-18T16:15:22+08:00"
 233    #  页面底部行排序,可选值:["first", 0, 1, 2, 3, 4, 5, "last"]
 234    [params.footer.order]
 235      powered = 0
 236      copyright = 0
 237      statistics = 0
 238      visitor = 0
 239      beian = 0
 240
 241  #  Section(所有文章)页面配置
 242  [params.section]
 243    # section 页面每页显示文章数量
 244    paginate = 20
 245    # 日期格式(月和日)
 246    dateFormat = "01-02"
 247    # RSS 文章数目
 248    rss = 10
 249    #  最近更新文章设置
 250    [params.section.recentlyUpdated]
 251      enable = true
 252      rss = true
 253      days = 30
 254      maxCount = 10
 255
 256  #  List(目录或标签)页面配置
 257  [params.list]
 258    # list 页面每页显示文章数量
 259    paginate = 20
 260    # 日期格式(月和日)
 261    dateFormat = "01-02"
 262    # RSS 文章数目
 263    rss = 10
 264
 265  # 标签云配置
 266  [params.tagcloud]
 267    enable = false
 268    min = 14 # 最小字体大小,单位:px
 269    max = 32 # 最大字体大小,单位:px
 270    peakCount = 10 # 每个标签的最大文章数
 271    orderby = "name" # 标签排序方式,可选值:["name", "count"]
 272
 273  # 主页配置
 274  [params.home]
 275    #  RSS 文章数目
 276    rss = 10
 277    # 主页个人信息
 278    [params.home.profile]
 279      enable = true
 280      # Gravatar 邮箱,用于优先在主页显示的头像
 281      gravatarEmail = ""
 282      # 主页显示头像的 URL
 283      avatarURL = "/avatar.jpg"
 284      #  头像菜单链接的 identifier
 285      avatarMenu = ""
 286      #  主页显示的网站标题(支持 HTML 格式)
 287      title = "云吱的小站"
 288      # 主页显示的网站副标题
 289      subtitle = "色相事一刹那,光阴里无尽藏"
 290      # 是否为副标题显示打字机动画
 291      typeit = true
 292      # 是否显示社交账号
 293      social = true
 294      #  免责声明(支持 HTML 格式)
 295      disclaimer = ""
 296    # 主页文章列表
 297    [params.home.posts]
 298      enable = true
 299      # 主页每页显示文章数量
 300      paginate = 10
 301
 302  # FixIt 0.2.16 | CHANGED Social config about the author
 303  [params.social]
 304    GitHub = ""
 305    Linkedin = ""
 306    Twitter = ""
 307    Instagram = ""
 308    Facebook = ""
 309    Telegram = ""
 310    Medium = ""
 311    Gitlab = ""
 312    Youtubelegacy = ""
 313    Youtubecustom = ""
 314    Youtubechannel = ""
 315    Tumblr = ""
 316    Quora = ""
 317    Keybase = ""
 318    Pinterest = ""
 319    Reddit = ""
 320    Codepen = ""
 321    FreeCodeCamp = ""
 322    Bitbucket = ""
 323    Stackoverflow = ""
 324    Weibo = ""
 325    Odnoklassniki = ""
 326    VK = ""
 327    Flickr = ""
 328    Xing = ""
 329    Snapchat = ""
 330    Soundcloud = ""
 331    Spotify = ""
 332    Bandcamp = ""
 333    Paypal = ""
 334    Fivehundredpx = ""
 335    Mix = ""
 336    Goodreads = ""
 337    Lastfm = ""
 338    Foursquare = ""
 339    Hackernews = ""
 340    Kickstarter = ""
 341    Patreon = ""
 342    Steam = ""
 343    Twitch = ""
 344    Strava = ""
 345    Skype = ""
 346    Whatsapp = ""
 347    Zhihu = ""
 348    Douban = ""
 349    Angellist = ""
 350    Slidershare = ""
 351    Jsfiddle = ""
 352    Deviantart = ""
 353    Behance = ""
 354    Dribbble = ""
 355    Wordpress = ""
 356    Vine = ""
 357    Googlescholar = ""
 358    Researchgate = ""
 359    Mastodon = ""
 360    Thingiverse = ""
 361    Devto = ""
 362    Gitea = ""
 363    XMPP = ""
 364    Matrix = ""
 365    Bilibili = ""
 366    ORCID = ""
 367    Liberapay = ""
 368    Ko-Fi = ""
 369    BuyMeaCoffee = ""
 370    Linktree = ""
 371    QQ = ""
 372    QQGroup = "" # https://qun.qq.com/join.html
 373    Diaspora = ""
 374    CSDN = ""
 375    Discord = ""
 376    DiscordInvite = ""
 377    Lichess = ""
 378    Pleroma = ""
 379    Kaggle = ""
 380    MediaWiki= ""
 381    Plume = ""
 382    HackTheBox = ""
 383    RootMe = ""
 384    Feishu = ""
 385    TryHackMe = ""
 386    Douyin = ""
 387    TikTok = ""
 388    Phone = ""
 389    Email = ""
 390    RSS = true
 391
 392  #  文章页面配置
 393  [params.page]
 394    #  是否启用文章作者头像
 395    authorAvatar = true
 396    #  是否在主页隐藏一篇文章
 397    hiddenFromHomePage = false
 398    #  是否在搜索结果中隐藏一篇文章
 399    hiddenFromSearch = false
 400    #  是否使用 twemoji
 401    twemoji = false
 402    # 是否使用 lightgallery
 403    #  如果设为 "force",文章中的图片将强制按照画廊形式呈现
 404    lightgallery = true
 405    #  是否使用 ruby 扩展语法
 406    ruby = true
 407    #  是否使用 fraction 扩展语法
 408    fraction = true
 409    #  是否使用 fontawesome 扩展语法
 410    fontawesome = true
 411    # 许可协议信息(支持 HTML 格式)
 412    license = '<a rel="license external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
 413    # 是否在文章页面显示原始 Markdown 文档链接
 414    linkToMarkdown = true
 415    #  是否在 RSS 中显示全文内容
 416    rssFullText = false
 417    #  页面样式 ["narrow", "normal", "wide", ...]
 418    pageStyle = "normal"
 419    #   强制使用 Gravatar 作为作者头像
 420    # gravatarForce = true
 421    #  开启自动书签支持
 422    # 如果为 true,则在关闭页面时保存阅读进度
 423    autoBookmark = true
 424    #  是否使用 字数统计
 425    wordCount = true
 426    #  是否使用 预计阅读
 427    readingTime = true
 428    #  文章结束标志
 429    endFlag = ""
 430    #  是否开启即时页面
 431    instantPage = false
 432    # FixIt 0.3.0 | 是否在侧边栏开启合集
 433    collectionList = true
 434    # FixIt 0.3.0 | NEW whether to enable collection navigation at the end of the post
 435    collectionNavigation = false
 436
 437    # FixIt 0.2.15 | 转载配置
 438    [params.page.repost]
 439      enable = false
 440      url = ""
 441    #  目录配置
 442    [params.page.toc]
 443      # 是否使用目录
 444      enable = true
 445      #  是否保持使用文章前面的静态目录
 446      keepStatic = false
 447      # 是否使侧边目录自动折叠展开
 448      auto = false
 449      #  目录位置 ["left", "right"]
 450      position = "right"
 451    #  在文章开头显示提示信息,提醒读者文章内容可能过时
 452    [params.page.expirationReminder]
 453      enable = true
 454      # 如果文章最后更新于这天数之前,显示提醒
 455      reminder = 90
 456      # 如果文章最后更新于这天数之前,显示警告
 457      warning = 180
 458      # 如果文章到期是否关闭评论
 459      closeComment = false
 460    # FixIt 0.2.16 | 数学公式 CHANGED KaTeX mathematical formulas (https://katex.org)
 461    [params.page.math]
 462      enable = true
 463      # 默认行内定界符是 $ ... $ 和 \( ... \)
 464      inlineLeftDelimiter = ""
 465      inlineRightDelimiter = ""
 466      # 默认块定界符是 $$ ... $$, \[ ... \],  \begin{equation} ... \end{equation} 和一些其它的函数
 467      blockLeftDelimiter = ""
 468      blockRightDelimiter = ""
 469      # KaTeX 插件 copy_tex
 470      copyTex = true
 471      # KaTeX 插件 mhchem
 472      mhchem = true
 473    #  代码配置
 474    [params.page.code]
 475      # 是否显示代码块的复制按钮
 476      copy = true
 477      #  是否显示代码块的编辑按钮
 478      edit = true
 479      # 默认展开显示的代码行数
 480      maxShownLines = 10
 481    # FixIt 0.2.14 | 文章编辑
 482    [params.page.edit]
 483      enable = false
 484      # FixIt 0.2.15 | 编辑的基础链接
 485      # url = "/edit/branch-name/subdirectory-name" # base on `params.gitRepo`
 486      # url = "https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name" # full url
 487      url = ""
 488    # FixIt 0.2.0 | Mapbox GL JS 配置 (https://docs.mapbox.com/mapbox-gl-js)
 489    [params.page.mapbox]
 490      # Mapbox GL JS 的 access token
 491      accessToken = ""
 492      # 浅色主题的地图样式
 493      lightStyle = "mapbox://styles/mapbox/light-v9"
 494      # 深色主题的地图样式
 495      darkStyle = "mapbox://styles/mapbox/dark-v9"
 496      # 是否添加 NavigationControl
 497      navigation = true
 498      # 是否添加 GeolocateControl
 499      geolocate = true
 500      # 是否添加 ScaleControl
 501      scale = true
 502      # 是否添加 FullscreenControl
 503      fullscreen = true
 504    # FixIt 0.2.17 | NEW 赞赏设置
 505    [params.page.reward]
 506      enable = false
 507      animation = false
 508      # 相对于页脚的位置,可选值:["before", "after"]
 509      position = "after"
 510      # comment = "Buy me a coffee"
 511      #  二维码图片展示模式,可选值:["static", "fixed"],默认:`static`
 512      mode = "static"
 513      [params.page.reward.ways]
 514        # wechatpay = "/images/wechatpay.png"
 515        # alipay = "/images/alipay.png"
 516        # paypal = "/images/paypal.png"
 517        # bitcoin = "/images/bitcoin.png"
 518    #  文章页面的分享信息设置
 519    [params.page.share]
 520      enable = true
 521      Twitter = true
 522      Facebook = true
 523      Linkedin = false
 524      Whatsapp = true
 525      Pinterest = false
 526      Tumblr = false
 527      HackerNews = false
 528      Reddit = false
 529      VK = false
 530      Buffer = false
 531      Xing = false
 532      Line = true
 533      Instapaper = false
 534      Pocket = false
 535      Flipboard = false
 536      Weibo = true
 537      Myspace = true
 538      Blogger = true
 539      Baidu = false
 540      Odnoklassniki = false
 541      Evernote = true
 542      Skype = false
 543      Trello = false
 544      Mix = false
 545    # 评论系统设置
 546    [params.page.comment]
 547      enable = true
 548      # FixIt 0.2.13 | NEW Artalk comment config (https://artalk.js.org/)
 549      [params.page.comment.artalk]
 550        enable = false
 551        server = "https://yourdomain"
 552        site = "默认站点"
 553        placeholder = ""
 554        noComment = ""
 555        sendBtn = ""
 556        editorTravel = true
 557        flatMode = "auto"
 558        # FixIt 0.2.17 | CHANGED enable lightgallery support
 559        lightgallery = false
 560        locale = "" # FixIt 0.2.15 | NEW
 561        # FixIt 0.2.18 | NEW
 562        emoticons = ""
 563        nestMax = 2
 564        nestSort = "DATE_ASC" # ["DATE_ASC", "DATE_DESC", "VOTE_UP_DESC"]
 565        vote = true
 566        voteDown = false
 567        uaBadge = true
 568        listSort = true
 569        imgUpload = true
 570        preview = true
 571        versionCheck = true
 572      # FixIt 0.1.1 | NEW Disqus comment config (https://disqus.com)
 573      [params.page.comment.disqus]
 574        enable = false
 575        # Disqus shortname to use Disqus in posts
 576        shortname = ""
 577      # FixIt 0.1.1 | NEW Gitalk comment config (https://github.com/gitalk/gitalk)
 578      [params.page.comment.gitalk]
 579        enable = false
 580        owner = ""
 581        repo = ""
 582        clientId = ""
 583        clientSecret = ""
 584      # Valine comment config (https://github.com/xCss/Valine)
 585      [params.page.comment.valine]
 586        enable = false
 587        appId = ""
 588        appKey = ""
 589        placeholder = ""
 590        avatar = "mp"
 591        meta = ""
 592        requiredFields = ""
 593        pageSize = 10
 594        lang = ""
 595        visitor = true
 596        recordIP = true
 597        highlight = true
 598        enableQQ = false
 599        serverURLs = ""
 600        # FixIt 0.2.6 | NEW emoji data file name, default is "google.yml"
 601        # ["apple.yml", "google.yml", "facebook.yml", "twitter.yml"]
 602        # located in "themes/FixIt/assets/lib/valine/emoji/" directory
 603        # you can store your own data files in the same path under your project:
 604        # "assets/lib/valine/emoji/"
 605        emoji = ""
 606        commentCount = true # FixIt 0.2.13 | NEW
 607      # FixIt 0.2.16 | CHANGED Waline comment config (https://waline.js.org)
 608      [params.page.comment.waline]
 609        enable = false
 610        serverURL = ""
 611        pageview = false # FixIt 0.2.15 | NEW
 612        emoji = ["//unpkg.com/@waline/emojis@1.1.0/weibo"]
 613        meta = ["nick", "mail", "link"]
 614        requiredMeta = []
 615        login = "enable"
 616        wordLimit = 0
 617        pageSize = 10
 618        imageUploader = false # FixIt 0.2.15 | NEW
 619        highlighter = false # FixIt 0.2.15 | NEW
 620        comment = false # FixIt 0.2.15 | NEW
 621        texRenderer = false # FixIt 0.2.16 | NEW
 622        search = false # FixIt 0.2.16 | NEW
 623        recaptchaV3Key = "" # FixIt 0.2.16 | NEW
 624        reaction = false # FixIt 0.2.18 | NEW
 625      # Facebook comment config (https://developers.facebook.com/docs/plugins/comments)
 626      [params.page.comment.facebook]
 627        enable = false
 628        width = "100%"
 629        numPosts = 10
 630        appId = ""
 631        languageCode = ""
 632      # FixIt 0.2.0 | NEW Telegram comments config (https://comments.app)
 633      [params.page.comment.telegram]
 634        enable = false
 635        siteID = ""
 636        limit = 5
 637        height = ""
 638        color = ""
 639        colorful = true
 640        dislikes = false
 641        outlined = false
 642      # FixIt 0.2.0 | NEW Commento comment config (https://commento.io)
 643      [params.page.comment.commento]
 644        enable = false
 645      # FixIt 0.2.5 | NEW Utterances comment config (https://utteranc.es)
 646      [params.page.comment.utterances]
 647        enable = false
 648        # owner/repo
 649        repo = ""
 650        issueTerm = "pathname"
 651        label = ""
 652        lightTheme = "github-light"
 653        darkTheme = "github-dark"
 654      # FixIt 0.2.13 | NEW Twikoo comment config (https://twikoo.js.org/)
 655      [params.page.comment.twikoo]
 656        enable = false
 657        envId = ""
 658        region = ""
 659        path = ""
 660        visitor = true
 661        commentCount = true
 662        # FixIt 0.2.17 | CHANGED enable lightgallery support
 663        lightgallery = false
 664        # FixIt 0.2.17 | NEW enable Katex support
 665        katex = false
 666      #  Giscus 评论系统设置
 667      [params.page.comment.giscus]
 668        enable = true
 669        repo = ""
 670        repoId = ""
 671        category = ""
 672        categoryId = ""
 673        mapping = "pathname"
 674        strict = "0" # 
 675        term = ""
 676        reactionsEnabled = "1"
 677        emitMetadata = "0"
 678        inputPosition = "top" # ["top", "bottom"]
 679        lightTheme = "light"
 680        darkTheme = "dark"
 681        lazyLoad = true
 682    #  第三方库配置
 683    [params.page.library]
 684      [params.page.library.css]
 685        # someCSS = "some.css"
 686        # 位于 "assets/"
 687        # 或者
 688        # someCSS = "https://cdn.example.com/some.css"
 689      [params.page.library.js]
 690        # someJavascript = "some.js"
 691        # 位于 "assets/"
 692        # 或者
 693        # someJavascript = "https://cdn.example.com/some.js"
 694    #  页面 SEO 配置
 695    [params.page.seo]
 696      # 图片 URL
 697      images = ["/favicon.ico"]
 698      # 出版者信息
 699      [params.page.seo.publisher]
 700        name = "云吱"
 701        logoUrl = "/logo.png"
 702
 703  #  TypeIt 配置
 704  [params.typeit]
 705    # 每一步的打字速度(单位是毫秒)
 706    speed = 100
 707    # 光标的闪烁速度(单位是毫秒)
 708    cursorSpeed = 1000
 709    # 光标的字符(支持 HTML 格式)
 710    cursorChar = "|"
 711    # 打字结束之后光标的持续时间(单位是毫秒,"-1" 代表无限大)
 712    duration = -1
 713    #  打字完成后是否会连续循环
 714    loop = false
 715
 716  #  Mermaid 配置
 717  [params.mermaid]
 718    # 取值详见 https://mermaid.js.org/config/theming.html#available-themes
 719    themes = ["default", "dark"]
 720
 721  # 盘古之白配置
 722  [params.pangu]
 723    # 适用于中文写作用户
 724    enable = true
 725    selector = "article" # 
 726
 727  #  水印配置
 728  # 详细参数见 https://github.com/Lruihao/watermark#readme
 729  [params.watermark]
 730    enable = false
 731    # 水印内容(允许 HTML 格式)
 732    content = ""
 733    # 水印透明度
 734    opacity = 0.1
 735    # 水印父节点
 736    appendTo = ".wrapper>main"
 737    # 单水印宽度 单位:px
 738    width = 150
 739    # 单水印高度 单位:px
 740    height = 20
 741    # 水印行间距 单位:px
 742    rowSpacing = 60
 743    # 水印列间距 单位:px
 744    colSpacing = 30
 745    # 水印旋转角度 单位:deg
 746    rotate = 15
 747    # 水印字体大小,单位:rem
 748    fontSize = 0.85
 749    #  水印字体
 750    fontFamily = "inherit"
 751
 752  #  不蒜子统计
 753  [params.ibruce]
 754    enable = true
 755    # 在文章中开启
 756    enablePost = true
 757
 758  # 网站验证代码,用于 Google/Bing/Yandex/Pinterest/Baidu/360/Sogou
 759  [params.verification]
 760    google = ""
 761    bing = ""
 762    yandex = ""
 763    pinterest = ""
 764    baidu = ""
 765    so = ""
 766    sogou = ""
 767
 768  # FixIt 0.2.10 | 网站 SEO 配置
 769  [params.seo]
 770    # 图片 URL
 771    image = "/favicon.ico"
 772    # 缩略图 URL
 773    thumbnailUrl = "favicon-32x32.png"
 774
 775  # FixIt 0.2.0 | NEW 网站分析配置
 776  [params.analytics]
 777    enable = true
 778    # Google Analytics
 779    [params.analytics.google]
 780      id = ""
 781      # 是否匿名化用户 IP
 782      anonymizeIP = true
 783    # Fathom Analytics
 784    [params.analytics.fathom]
 785      id = ""
 786      # 自行托管追踪器时的主机路径
 787      server = ""
 788
 789  # FixIt 0.2.7 | NEW Cookie 许可配置
 790  [params.cookieconsent]
 791    enable = false
 792    # 用于 Cookie 许可横幅的文本字符串
 793    [params.cookieconsent.content]
 794      message = ""
 795      dismiss = ""
 796      link = ""
 797
 798  # FixIt 0.2.7 | 第三方库文件的 CDN 设置
 799  [params.cdn]
 800    # CDN 数据文件名称,默认不启用 ["jsdelivr.yml", "unpkg.yml", ...]
 801    # 位于 "themes/FixIt/assets/data/cdn/" 目录
 802    # 可以在你的项目下相同路径存放你自己的数据文件:"assets/data/cdn/"
 803    # data = "unpkg.yml"
 804
 805  # FixIt 0.2.8 | NEW 兼容性设置
 806  [params.compatibility]
 807    # 是否使用 Polyfill.io 来兼容旧式浏览器
 808    polyfill = false
 809    # 是否使用 object-fit-images 来兼容旧式浏览器
 810    objectFit = false
 811
 812  # FixIt 0.2.14 | NEW 在左上角或者右上角显示 GitHub 开源链接
 813  [params.githubCorner]
 814    enable = false
 815    permalink = "https://github.com/hugo-fixit/FixIt"
 816    title = "在 GitHub 上查看源代码"
 817    position = "right" # ["left", "right"]
 818
 819  # FixIt 0.2.14 | NEW Gravatar 设置
 820  [params.gravatar]
 821    #  取决于作者邮箱,作者邮箱未设置则使用本地头像
 822    enable = true
 823    # Gravatar 主机,默认:“www.gravatar.com”
 824    host = "cn.gravatar.com" # ["cn.gravatar.com", "gravatar.loli.net", ...]
 825    style = "identicon" # ["", "mp", "identicon", "monsterid", "wavatar", "retro", "blank", "robohash"]
 826
 827  # FixIt 0.2.16 | NEW 返回顶部
 828  [params.backToTop]
 829    enable = true
 830    # 在 b2t 按钮中显示滚动百分比
 831    scrollpercent = true
 832
 833  # FixIt 0.2.16 | NEW 阅读进度条
 834  [params.readingProgress]
 835    enable = true
 836    # 可用值:["left", "right"]
 837    start = "left"
 838    # 可用值:["top", "bottom"]
 839    position = "top"
 840    reversed = false
 841    light = ""
 842    dark = ""
 843    height = "2px"
 844  
 845  # FixIt 0.2.17 | NEW 页面加载期间顶部的进度条
 846  # 有关详细信息:https://github.com/CodeByZach/pace
 847  [params.pace]
 848    enable = false
 849    # 所有可用颜色:
 850    # ["black", "blue", "green", "orange", "pink", "purple", "red", "silver", "white", "yellow"]
 851    color = "blue"
 852    # 所有可用主题:
 853    # ["barber-shop", "big-counter", "bounce", "center-atom", "center-circle", "center-radar", "center-simple",
 854    # "corner-indicator", "fill-left", "flash", "flat-top", "loading-bar", "mac-osx", "material", "minimal"]
 855    theme = "minimal"
 856  
 857  # FixIt 0.2.18-lts.3 | [试验性功能] 缓存图床图片到本地,详见:https://github.com/hugo-fixit/FixIt/pull/362
 858  [params.cacheRemoteImages]
 859    enable = false
 860    # 用本地图片链接替换远程图片链接
 861    replace = false
 862  
 863  # FixIt 0.2.17 | NEW 定义自定义文件路径
 864  # 在站点目录 `layouts/partials/custom` 中创建您的自定义文件,并取消注释下面需要的文件
 865  [params.customFilePath]
 866    # aside = "custom/aside.html"
 867    # profile = "custom/profile.html"
 868    # footer = "custom/footer.html"
 869
 870  # FixIt 0.2.15 | NEW 开发者选项
 871  [params.dev]
 872    enable = false
 873    # 检查更新
 874    c4u = false
 875    # 请勿公开展示!
 876    githubToken = ""
 877    # 移动端开发者工具配置
 878    [params.dev.mDevtools]
 879      enable = false
 880      # 支持 "vConsole", "eruda"
 881      type = "vConsole"
 882
 883# -------------------------------------------------------------------------------------
 884# Modules Configuration
 885# See: https://gohugo.io/hugo-modules/configuration/#module-config-imports
 886# -------------------------------------------------------------------------------------
 887
 888[module]
 889  [module.hugoVersion]
 890    extended = true
 891    min = "0.110.0"
 892
 893# -------------------------------------------------------------------------------------
 894# Markup related configuration in Hugo
 895# See: https://gohugo.io/getting-started/configuration-markup/
 896# -------------------------------------------------------------------------------------
 897
 898# Hugo 解析文档的配置
 899[markup]
 900  # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
 901  [markup.highlight]
 902    ################## 必要的配置 ##################
 903    # https://github.com/hugo-fixit/FixIt/issues/43
 904    codeFences = true
 905    lineNos = true
 906    lineNumbersInTable = true
 907    noClasses = false
 908    ################## 必要的配置 ##################
 909    guessSyntax = true
 910  # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库
 911  [markup.goldmark]
 912    [markup.goldmark.extensions]
 913      definitionList = true
 914      footnote = true
 915      linkify = true
 916      strikethrough = true
 917      table = true
 918      taskList = true
 919      typographer = true
 920    [markup.goldmark.renderer]
 921      # 是否在文档中直接使用 HTML 标签
 922      unsafe = true
 923  # Table Of Contents settings
 924  [markup.tableOfContents]
 925    startLevel = 2
 926    # endLevel = 4
 927
 928# -------------------------------------------------------------------------------------
 929# Sitemap Configuration
 930# See: https://gohugo.io/templates/sitemap-template/#configuration
 931# -------------------------------------------------------------------------------------
 932
 933# 网站地图配置
 934[sitemap]
 935  changefreq = "daily"
 936  filename = "sitemap.xml"
 937  priority = 0.5
 938
 939# -------------------------------------------------------------------------------------
 940# Permalinks Configuration
 941# See: https://gohugo.io/content-management/urls/#permalinks
 942# -------------------------------------------------------------------------------------
 943
 944# Permalinks 配置 (https://gohugo.io/content-management/urls#permalinks)
 945[Permalinks]
 946  # posts = ":year/:month/:filename"
 947  posts = "/posts/:slug"
 948
 949# -------------------------------------------------------------------------------------
 950# Privacy Configuration
 951# See: https://gohugo.io/about/hugo-and-gdpr/
 952# -------------------------------------------------------------------------------------
 953# 隐私信息配置 (https://gohugo.io/about/hugo-and-gdpr/)
 954[privacy]
 955  [privacy.twitter]
 956    enableDNT = true
 957  [privacy.youtube]
 958    privacyEnhanced = true
 959
 960# -------------------------------------------------------------------------------------
 961# Media Types
 962# See: https://gohugo.io/templates/output-formats/#media-types
 963# -------------------------------------------------------------------------------------
 964
 965[mediaTypes]
 966  # 用于输出 Markdown 格式文档的设置
 967  [mediaTypes."text/markdown"]
 968    suffixes = ["md"]
 969  # 用于输出 txt 格式文档的设置
 970  [mediaTypes."text/plain"]
 971    suffixes = ["txt"]
 972
 973# -------------------------------------------------------------------------------------
 974# Output Format Definitions
 975# See: https://gohugo.io/templates/output-formats/#output-format-definitions
 976# -------------------------------------------------------------------------------------
 977
 978[outputFormats]
 979  # 用于输出 Markdown 格式文档的设置
 980  [outputFormats.MarkDown]
 981    mediaType = "text/markdown"
 982    isPlainText = true
 983    isHTML = false
 984  #  用于输出 baidu_urls.txt 文件的设置
 985  [outputFormats.BaiduUrls]
 986    baseName = "baidu_urls"
 987    mediaType = "text/plain"
 988    isPlainText = true
 989    isHTML = false
 990
 991# -------------------------------------------------------------------------------------
 992# Customizing Output Formats
 993# See: https://gohugo.io/templates/output-formats/#customizing-output-formats
 994# -------------------------------------------------------------------------------------
 995#  用于 Hugo 输出文档的设置
 996[outputs]
 997  home = ["HTML", "RSS", "JSON", "BaiduUrls"]
 998  page = ["HTML"]
 999  section = ["HTML", "RSS"]
1000  taxonomy = ["HTML", "RSS"]
1001  taxonomyTerm = ["HTML"]
1002
1003# -------------------------------------------------------------------------------------
1004# Taxonomies Configuration
1005# See: https://gohugo.io/content-management/taxonomies/#configure-taxonomies
1006# -------------------------------------------------------------------------------------
1007
1008[taxonomies]
1009  # series = "series"
1010  category = "categories"
1011  tag = "tags"
1012  collections = "collections"

hugo配置文件

2.3 修改文章前缀模板

在每篇 markdown 文章最前面可以用一部分注释来告诉主题,这篇文章的属性,譬如文章标签、分类、是否为草稿等。

文章前缀模板

2.4 创建你的第一篇文章

创建新文章的命令:

1hugo new posts/文章标题.md

执行完成后,在./content/posts目录下应该可以看到新文件,同时里面已经有 markdown 模版中的文章前缀参数。

创建出的新文章

2.5 本地调试

1hugo serve -D --disableFastRender

本地调试

3、Github

3.1 创建SSH密钥并添加

3.2 生成 SSH 密钥

使用 Git Bash 或命令行打开终端窗口,输入以下命令。记得把your_email@example.com改成你自己的邮箱地址。

1ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

按照提示键入您想要保存密钥的文件名和路径,或使用默认设置。

生成SSH密钥

接下来,系统将生成一个随机字符串作为密钥密码。此处可以选用默认密码以便于不需要输入密码进行 SSH 登录。进入生成密钥的文件夹,查看密钥:

查看密钥

  1. 登录到 GitHub 账户,并转到“Settings”(设置)中的“SSH and GPG keys”(SSH 和 GPG 密钥)页面。

  2. 点击“New SSH key”(新建 SSH 密钥),填写标题和密钥的内容。

    新建 SSH 密钥

  3. 打开id_rsa.pub公钥文件 (即你在生成的时候保存的文件) ,将其内容复制到 GitHub 的 “Key” 字段中。

  4. 最后,点击“Add SSH key” (添加 SSH 密钥),完成密钥添加。

    添加 SSH 密钥

3.4 创建 blog 仓库

用于存储博客源文件,也就是刚才的本地项目文件。

  1. 在 GitHub 网站上登录你的账号,然后点击页面右上角的加号图标,选择 “New repository”(新建仓库)。

  2. 在 “Initialize this repository with”(使用以下方式初始化仓库)部分,选择 “Add a README file”(添加一个 README 文件)选项。

  3. 暂存并提交现有文件

    1git add .  
    2git commit -m "init blog files"
    
  4. 点击 “Create repository”(创建仓库)按钮,完成 GitHub 仓库的创建。

    创建 blog 仓库

  5. 将本地仓库与远程 GitHub 仓库关联起来。在项目目录中打开 Git Bash,执行以下命令,将 <remote-url> 替换为你的 GitHub 仓库的远程 URL:

    1git remote add origin <remote-url>
    

例如:

1git remote add origin https://github.com/your-username/your-repository.git
  1. 将本地代码推送到远程仓库的 main 分支。执行以下命令:

    1git push -u origin main
    

这将把本地的代码推送到远程仓库的 main 分支,并将其设置为默认上游分支。

3.5 创建Github Pages公开仓库

用于实际展示博客。

  1. 创建新仓库

    创建新Github Pages仓库

  2. Repository name 这里一定要填 [你的github账号].github.io。你的github账号必须小写字母。仓库可见性设为Public。选择“使用 README 初始化此存储库”。

    新建Github Pages仓库

3.6 上传页面

1hugo

执行后,站点根目录下会生成一个 public 文件夹,该文件下的内容即 Hugo 生成的整个静态网站。每次更新内容后,将 pubilc 目录里所有文件 push 到 GitHub Pages 所在的仓库即可。

首次使用的时候要执行以下命令:

1cd public 
2git init 
3git remote add origin https://github.com/leegical/leegical.github.io.git # 将本地目录链接到远程服务器的代码仓库 
4git add . 
5git commit -m "[介绍,随便写点什么,比如日期]" 
6git push -u origin master

进入 Github Pages 仓库的Setting-Pages,把Branch修改为master,点击 save。

修改发布Branch

稍等几分钟即可通过[你的github账号].github.io来访问博客站点了,和hugo serve -D本地调试完全一致。

3.5 Github Action 自动发布

通过上述命令我们可以手动发布我们的静态文件,但还是有以下弊端:

  1. 发布步骤还是比较繁琐,本地调试后还需要切换到 public/ 目录进行上传
  2. 无法对博客 .md 源文件进行备份与版本管理 可以通过官方提供的 GitHub Action 进行 CI 自动发布。

回到 blog 仓库的本地文件夹,新增.github/workflows/deploy.yml

1mkdir .github 
2mkdir .github/workflows 
3touch .github/workflows/deploy.yml

新建deploy.yml

用 vscode 编辑 deploy.yml 的内容,参考如下:

注意:EXTERNAL_REPOSITORY要修改为 Github Pages 的链接

deploy.yml

提交变更到 Github:

1git add . 
2git commit -m "add action config" 
3git push

提交变更

进入 Github tokens ,点击Generate new token——Generate new token (classic)

Generate new token

  • Note:随便写

  • Expiration:No expiration

  • Select scopes:只勾选

    1repo
    

    设置属性

    拉到最下面,点击生成。

    生成密钥

注意生成的 token 只会显示这一次,形如 ghp_xxxxxxxxxx,点击复制。 回到 blog 仓库——Setting,新建仓库密钥

新建仓库密钥

  • Name:PERSONAL_TOKEN

  • Secret:填刚才复制的密钥

    粘贴密钥

4 自定义博客域名

你的github账户名.github.io的网址在国内访问速度较慢,为博客设置一个自定义域名可以有效加快速度。以本博客为例,要设置的自定义域名为:haoyep.com。

4.1 Cloudflare 配置

  1. 使用 Cloudflare 托管域名,这一点教程很多,跟着做就行。

    托管域名

  2. 在 DNS 配置中,新增一条 CNAME 解析记录到你的github账户名.github.io,不启用代理。

    新增一条 CNAME 解析记录

4.2 hugo 配置

  1. 在 static 中添加 CNAME 文件,内容为自定义域名为 haoyep.com。

    CNAME 文件

  2. hugo.toml 修改 baseURL 为自定义域名为 haoyep.com。

    baseURL

提交到 Github 仓库

1hugo 
2git add . 
3git commit -m "Create CNAME" 
4git push

4.3 Github Pages 仓库配置

为自定义域名启用 SSL 证书。 Settings——Pages——Custom domain,勾选 Enforce HTTPS。

https://cdn.haoyep.com/gh/leegical/Blog_img/cdnimg/202312142041938.png

5 总结

以上整个环境部署好之后,接下来的常用命令就是以下几个:

    1. 站点目录下,新建文章,执行:

      1hugo new posts/文章名.md
      
    1. 使用VScode编辑文章内容或修改,包括修改主题之类的。在本地进行调试:

      1hugo serve -D --disableFastRender
      
    1. 修改完成,确定要上传到 GitHub 上后,站点目录下执行:

      1hugo
      

进行编译,没错误的话修改的内容就顺利同步到public下了,然后执行提交命令:

1git add . 
2git commit -m "随便写点提交信息" 
3git push

稍等片刻,github action 执行完毕,页面就会更新了。