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
- 登录github 创建一个<username>.github.io的仓库
- 使用<username>.github.io 作为存储库名称。 将
username
替换为你的 GitHub 用户名。 例如,如果用户名为waouooo
,则存储库名称应为waouooo.github.io
。(ps: 为了保证Github Pages 的可见性,普通用户需要将仓库设置为public,若想使用private,也可以氪金)
- 点击Settings配置Github Pages
- 查看Github Pages 配置
- 返回仓库主页查看部署状态:若出现绿色的勾勾✅则表示部署完成,可以通过访问https://waouooo.github.io 来查看,若是其他标志,也可以点击查看具体的工作流流程。
使用Hugo 初始化站点
- macOS安装hugo, 其他操作系统安装方式可以参考官方文档
brew install hugo
- 安装完成后查看当前安装的版本
hugo version
# 输出: hugo v0.105.0+extended darwin/amd64 BuildDate=unknown
- 初始化站点
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.
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
- 从主题exampleSite目录中拷贝配置
cp themes/hugo-theme-relearn/exampleSite/config.toml .
- 修改配置文件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" ]
- 添加主页文章内容 创建文章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::一个很哇塞的博客
- 启动博客并访问地址查看
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
- 添加章节或者文章 详细内容可参考relearn官网配置
# 添加章节
hugo new --kind chapter basics/_index.md
# 创建文章内容
hugo new basics/first-content.md
hugo new basics/second-content/_index.md
- 以git submodule形式添加github pages托管的仓库, (使用ssh协议方便推送)
git submodule add git@github.com:waouooo/waouooo.github.io.git dist
- 生成静态文件 hugo 命令默认将静态文件生成至public目录当中,我们可以通过-d指定生成的目录
hugo -d dist
- 推送到github, 等待部署工作流执行完成查看页面
cd dist
git add .
git commit -m "add hugo static pages"