Hugo+Github Pages快速搭建个人博客一:基础建站

需求:创建一个个人博客

对程序员来说个人博客是一个非常常见的东西,可以在上面记录自己的学习积累,同时也可以通过互联网分享给大家。个人博客建站的方式有很多,本文不做横向比较,本着白嫖与图方便并兼顾可用性强的角度,选择使用Hugo + Github Pages + Giscus 进行建站。

工具简介:

Hugo

Hugo 是一个golang编写的静态网站生成器,可以从markdown格式生成。

Github Pages

Github Pages 是Github提供的静态站点托管服务,可以通过仓库(repository)的形式托管静态网站,同类型的还有国内的Gitee Pages

Giscus

Giscus 是一个站点评论系统,基于Github的Discussions功能

创建Github Pages

  1. 登录github 创建一个<username>.github.io的仓库 创建仓库 创建仓库
  2. 使用<username>.github.io  作为存储库名称。 将 username 替换为你的 GitHub 用户名。 例如,如果用户名为 waouooo,则存储库名称应为 waouooo.github.io (ps: 为了保证Github Pages 的可见性,普通用户需要将仓库设置为public,若想使用private,也可以氪金)
  3. 点击Settings配置Github Pages
  4. 查看Github Pages 配置
  5. 返回仓库主页查看部署状态:若出现绿色的勾勾✅则表示部署完成,可以通过访问https://waouooo.github.io 来查看,若是其他标志,也可以点击查看具体的工作流流程。

使用Hugo 初始化站点

  1. macOS安装hugo, 其他操作系统安装方式可以参考官方文档
brew install hugo
  1. 安装完成后查看当前安装的版本
hugo version
# 输出: hugo v0.105.0+extended darwin/amd64 BuildDate=unknown
  1. 初始化站点
hugo new site waouooo
Congratulations! Your new Hugo site is created in /Users/waouooo/Workspace/waouooo.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
  1. 进入站点目录并以git submodule模式添加主题,本站点使用主题为hugo-theme-relearn(官方文档), 其他主题可进入官网主题 选择
cd waouooo
# 使用git 初始化仓库
git init
# 输出: 已初始化空的 Git 仓库于 /Users/zhou/Workspace/waouooo/waouooo/.git/
git submodule add https://github.com/McShelby/hugo-theme-relearn.git themes/hugo-theme-relearn
  1. 从主题exampleSite目录中拷贝配置
cp themes/hugo-theme-relearn/exampleSite/config.toml .
  1. 修改配置文件baseURL与:themesdir
# this is a required setting for this theme to appear on https://themes.gohugo.io/
# change this to a value appropriate for you; if your site is served from a subdirectory
# set it like "https://example.com/mysite/"
# 修改此处✅
baseURL = "https://waouooo.github.io/"

# canonicalization will only be used for the sitemap.xml and index.xml files;
# if set to false, a site served from a subdirectory will generate wrong links
# inside of the above mentioned files; if you serve the page from the servers root
# you are free to set the value to false as recommended by the official Hugo documentation
canonifyURLs = true # true -> all relative URLs would instead be canonicalized using baseURL
# required value to serve this page from a webserver AND the file system;
# if you don't want to serve your page from the file system, you can also set this value
# to false
relativeURLs = true # true -> rewrite all relative URLs to be relative to the current content
# if you set uglyURLs to false, this theme will append 'index.html' to any branch bundle link
# so your page can be also served from the file system; if you don't want that,
# set disableExplicitIndexURLs=true in the [params] section
uglyURLs = false     # true -> basic/index.html -> basic.html

# the directory where Hugo reads the themes from; this is specific to your
# installation and most certainly needs be deleted or changed
# 修改此处✅
themesdir = "./themes"
# yeah, well, obviously a mandatory setting for your site, if you want to
# use this theme ;-)
theme = "hugo-theme-relearn"

# the main language of this site; also an automatic pirrrate translation is
# available in this showcase
languageCode = "en"
# make sure your defaultContentLanguage is the first one in the [Languages]
# array below, as the theme needs to make assumptions on it
defaultContentLanguage = "en"
# if you want to get rrrid o' ourrr pirrrates nonsense uncomment th' next line
# disableLanguages = ['pir']

# the site's title of this showcase; you should change this ;-)
title = "Hugo Relearn Documentation"

# We disable this for testing the exampleSite; you must do so too
# if you want to use the themes parameter disableGeneratorVersion=true;
# otherwise Hugo will create a generator tag on your home page
disableHugoGeneratorInject = true

[outputs]
  # add JSON to the home to support lunr search; This is a mandatory setting
  # for the search functionality
  # add PRINT to home, section and page to activate the feature to print whole
  # chapters
  home = ["HTML", "RSS", "PRINT", "SEARCH", "SEARCHPAGE"]
  section = ["HTML", "RSS", "PRINT"]
  page = ["HTML", "RSS", "PRINT"]

[markup]
  [markup.highlight]
    # if `guessSyntax = true`, there will be no unstyled code even if no language
    # was given BUT Mermaid and Math codefences will not work anymore! So this is a
    # mandatory setting for your site if you want to use Mermaid or Math codefences
    guessSyntax = false

    # here in this showcase we use our own modified chroma syntax highlightning style
    # which is imported in theme-relearn-light.css / theme-relearn-dark.css;
    # if you want to use a predefined style instead:
    # - remove the following `noClasses`
    # - set the following `style` to a predefined style name
    # - remove the `@import` of the self-defined chroma stylesheet from your CSS files
    #   (here eg.: theme-relearn-light.css / theme-relearn-dark.css)
    noClasses = false
    # style = "tango"

  [markup.goldmark.renderer]
    # activated for this showcase to use HTML and JavaScript; decide on your own needs;
    # if in doubt, remove this line
    unsafe = true

# allows `hugo server` to display this showcase in IE11; this is used for testing, as we
# are still supporting IE11 - although with degraded experience; if you don't care about
# `hugo server` or browsers of ancient times, fell free to remove this whole block
[server]
  [[server.headers]]
    for = "**.html"
    [server.headers.values]
       X-UA-Compatible = "IE=edge"

# showcase of the menu shortcuts; you can use relative URLs linking
# to your content or use fully-quallified URLs to link outside of
# your project
[Languages]
  [Languages.en]
    title = "Hugo Relearn Theme"
    weight = 1
    languageName = "English"
    landingPageName = "<i class='fas fa-home'></i> Home"

  [[Languages.en.menu.shortcuts]]
    name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
    identifier = "ds"
    url = "https://github.com/McShelby/hugo-theme-relearn"
    weight = 10

  [[Languages.en.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-camera'></i> Showcases"
    url = "more/showcase/"
    weight = 11

  [[Languages.en.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-bookmark'></i> Hugo Documentation"
    identifier = "hugodoc"
    url = "https://gohugo.io/"
    weight = 20

  [[Languages.en.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-bullhorn'></i> Credits"
    url = "more/credits/"
    weight = 30

  [[Languages.en.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-tags'></i> Tags"
    url = "tags/"
    weight = 40

  # this is ourrr way t' showcase th' multilang settings by
  # doing autotrrranlat'n of th' english content; we are
  # lazy and don't supporrt furrrther trrranslations; arrr,
  # don't take it t' serrrious, fello'; it's prrretty hacky and:
  # NOT MEANT FER PRRRODUCTION! ARRR!

  [Languages.pir]
    title = "Cap'n Hugo Relearrrn Theme"
    weight = 2
    languageName = "Arrr! ☠ Pirrrates ☠"
    landingPageName = "<i class='fas fa-home'></i> Arrr! Home"

  [[Languages.pir.menu.shortcuts]]
    name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
    identifier = "ds"
    url = "https://github.com/McShelby/hugo-theme-relearn"
    weight = 10

  [[Languages.pir.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-camera'></i> Showcases"
    url = "more/showcase/"
    weight = 11

  [[Languages.pir.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentat'n"
    identifier = "hugodoc"
    url = "https://gohugo.io/"
    weight = 20

  [[Languages.pir.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-bullhorn'></i> Crrredits"
    url = "more/credits/"
    weight = 30

  [[Languages.pir.menu.shortcuts]]
    name = "<i class='fas fa-fw fa-tags'></i> Arrr! Tags"
    url = "tags/"
    weight = 40

# mounts are only needed in this showcase to access the publicly available screenshots;
# remove this section if you don't need further mounts
[module]
  [[module.mounts]]
    source = 'archetypes'
    target = 'archetypes'
  [[module.mounts]]
    source = 'assets'
    target = 'assets'
  [[module.mounts]]
    source = 'content'
    target = 'content'
  [[module.mounts]]
    source = 'data'
    target = 'data'
  [[module.mounts]]
    source = 'i18n'
    target = 'i18n'
  [[module.mounts]]
    source = '../images'
    target = 'content/images'
  [[module.mounts]]
    source = 'layouts'
    target = 'layouts'
  [[module.mounts]]
    source = 'static'
    target = 'static'

# settings specific to this theme's features; choose to your likings and
# consult this documentation for explaination
# 修改此处✅ 按需修改
[params]
  editURL = "https://github.com/waouooo//edit/main/exampleSite/content/"
  description = "waouooo: 一个很哇塞的博客"
  author = "waouooo"
  showVisitedLinks = true
  collapsibleMenu = true
  disableBreadcrumb = false
  disableInlineCopyToClipBoard = true
  disableNextPrev = false
  disableLandingPageButton = true
  titleSeparator = "::"
  themeVariant = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ]
  disableSeoHiddenPages = true
  # this is for the stylesheet generator to allow for interactivity in Mermaid
  # graphs; you usually will not need it and you should remove this for
  # security reasons
  mermaidInitialize = "{ \"securityLevel\": \"loose\" }"
  additionalContentLanguage = [ "en" ]
  1. 添加主页文章内容 创建文章draft默认为true,修改为false可以展示出来
hugo new _index.md
# 输出:Content "/Users/waouooo/Workspace/waouooo/content/_index.md" created
vim /Users/waouooo/Workspace/waouooo/content/_index.md

---
title: "waouooo"
date: 2023-01-28T23:30:32+08:00
draft: false
---

### waouooo::一个很哇塞的博客
  1. 启动博客并访问地址查看
hugo serve
port 1313 already in use, attempting to use an available port
Start building sites …
hugo v0.105.0+extended darwin/amd64 BuildDate=unknown

                   | EN  | PIR
-------------------+-----+------
  Pages            |  10 |  10
  Paginator pages  |   0 |   0
  Non-page files   |   0 |   0
  Static files     | 191 | 191
  Processed images |   0 |   0
  Aliases          |   1 |   0
  Sitemaps         |   2 |   1
  Cleaned          |   0 |   0

Built in 177 ms
Watching for changes in /Users/waouooo/Workspace/waouooo/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/waouooo/Workspace/waouooo/config.toml, /Users/waouooo/Workspace/waouooo/themes/hugo-theme-relearn/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:64363/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  1. 添加章节或者文章 详细内容可参考relearn官网配置
# 添加章节
hugo new --kind chapter basics/_index.md

# 创建文章内容
hugo new basics/first-content.md
hugo new basics/second-content/_index.md
  1. 以git submodule形式添加github pages托管的仓库, (使用ssh协议方便推送)
git submodule add git@github.com:waouooo/waouooo.github.io.git dist
  1. 生成静态文件 hugo 命令默认将静态文件生成至public目录当中,我们可以通过-d指定生成的目录
hugo -d dist
  1. 推送到github, 等待部署工作流执行完成查看页面
cd dist
git add .
git commit -m "add hugo static pages"

参考链接

1. GitHub Pages 快速入门

2. Hugo Quick Start