博客搭建: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文件。并自行修改baseURLtitle。 其中,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 执行完毕,页面就会更新了。