搭建hugo静态博客记录
1 安装Hugo
我这里是imac所以就直接用brew 其它操作系统也很简单 google
brew install hugo
2 初始化站点目录
先cd到你想放置的磁盘目录 然后执行一下命令即可 会在当前目录创建站点名称同名目录
$ hugo new site blog
$ cd blog
3 安装主题并修改
现在hugo主题商店挺多,这里选择了相对干净的PaperMod 如果没有git环境 可自行百度安装
$ git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
config.yml 配置文件主要修改项
baseURL: http://heketong.github.io/ # 绑定的域名
languageCode: zh # en-us
title: 疯子爱淡定
theme: hugo-PaperMod # 主题名字,和themes文件夹下的一致
enableInlineShortcodes: true
enableEmoji: true # 允许使用 Emoji 表情,建议 true
enableRobotsTXT: true # 允许爬虫抓取到搜索引擎,建议 true
hasCJKLanguage: true # 自动检测是否包含 中文日文韩文 如果文章中使用了很多中文引号的话可以开启
buildDrafts: false
buildFuture: false
buildExpired: false
googleAnalytics: # 谷歌统计
# Copyright: Sulv
paginate: 15 # 首页每页显示的文章数
summaryLength: 140 # 文章概览的自字数,默认70
minify:
disableXML: true
# minifyOutput: true
permalinks: # 访问博客时网址的显示形式
post: "/:title/"
# post: "/:year/:month/:day/:title/"
defaultContentLanguage: zh # 最顶部首先展示的语言页面
defaultContentLanguageInSubdir: false
menu:
main:
- identifier: search
name: 🔍 搜索
url: search
weight: 1
- identifier: home
name: 🏠 主页
url: /
weight: 2
- identifier: posts
name: 📚 文章
url: posts
weight: 3
- identifier: tags
name: 🧩 标签
url: tags
weight: 15
- name: 🧩 分类
url: /categories/
- identifier: archives
name: ⏱️ 时间轴
url: archives/
weight: 20
- identifier: about
name: 🙋🏻♂️ 关于
url: about
weight: 50
- identifier: links
name: 🤝 友链
url: links
weight: 60
outputs:
home:
- HTML
- RSS
- JSON
# 这里的参数会被代码以 .Site.Params 的形式读取
params:
env: production # to enable google analytics, opengraph, twitter-cards and schema.
description: ""
author: becool
# author: ["Me", "You"] # multiple authors
defaultTheme: auto # defaultTheme: light or dark
disableThemeToggle: false
DateFormat: "2006-01-02"
ShowShareButtons: true
ShowReadingTime: true
# disableSpecialistPost: true
displayFullLangName: true
ShowPostNavLinks: true
ShowBreadCrumbs: true
ShowCodeCopyButtons: true
hideFooter: false # 隐藏页脚
ShowWordCounts: true
VisitCount: true
ShowLastMod: true #显示文章更新时间
ShowToc: true # 显示目录
TocOpen: true # 自动展开目录
extendCodeBackground: false # 代码块是否自动横向展开
comments: true
profileMode:
enabled: true
title: Be Cool
subtitle: "每个不曾起舞的日子,都是对生命的辜负.<br/>👇联系方式"
imageUrl: "img/heketong_profile_photo.JPG"
imageTitle:
imageWidth: 150
imageHeight: 150
buttons:
- name: 🧱 音乐
url: posts/music
- name: 👨🏻💻 技术
url: posts/tech
- name: 📕 阅读提升
url: posts/read
- name: 🏖 生活
url: posts/life
socialIcons:
- name: github
title: View Source on Github
url: "https://github.com/heketong"
- name: QQ
url: "img/qq.jpg"
- name: WeChat
url: "img/wechat.jpg"
- name: email
url: "mailto:18929579649@163.com"
- name: RSS
url: "index.xml"
label: # 左上角图标
text: "疯子爱淡定"
icon: "img/heketong_profile_photo.JPG"
iconHeight: 35
analytics:
google:
SiteVerificationTag: ""
assets:
favicon: "img/heketong_profile_photo.JPG"
favicon16x16: "img/heketong_profile_photo.JPG"
favicon32x32: "img/heketong_profile_photo.JPG"
apple_touch_icon: "img/heketong_profile_photo.JPG"
safari_pinned_tab: "img/heketong_profile_photo.JPG"
disableFingerprinting: true # 禁用指纹
cover:
hidden: false # hide everywhere but not in structured data
hiddenInList: false # hide on list pages and home
hiddenInSingle: false # hide on single page
fuseOpts: # 搜索配置
isCaseSensitive: false
shouldSort: true
location: 0
distance: 1000
threshold: 0.4
minMatchCharLength: 0
keys: [ "title", "permalink", "summary" ]
StartYear: 2020 # 底部开始年份
FilingNo: 粤ICP备2022127626号-1 # 底部备案号
Reward: true #打赏是否开启
# 打赏微信图片地址,
# 可用绝对和相对地址,相对地址的图片需放在static/img下,
# 填写格式为img/wechat_pay.png
WechatPay: img/wechatpayimg.JPG
Alipay: img/alipayimg.JPG #打赏支付宝图片地址
# twikoo评论
twikoo:
version: 1.5.8 # 填写twikoo版本号
id: # 填写自己的twikoo id
region: # 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数,请看twikoo官方文档
taxonomies:
category: categories
tag: tags
series: series
markup:
goldmark:
renderer:
unsafe: true # HUGO 默认转义 Markdown 文件中的 HTML 代码,如需开启的话
highlight:
# anchorLineNos: true
codeFences: true
guessSyntax: true
# lineNos: true
noClasses: true
tabWidth: 4
style: monokai
# codeFences:代码围栏功能,这个功能一般都要设为 true 的,不然很难看,就是干巴巴的-代码文字,没有颜色。
# guessSyntax:猜测语法,这个功能建议设置为 true, 如果你没有设置要显示的语言则会自动匹配。
# hl_Lines:高亮的行号,一般这个不设置,因为每个代码块我们可能希望让高亮的地方不一样。
# lineNoStart:行号从编号几开始,一般从 1 开始。
# lineNos:是否显示行号,我比较喜欢显示,所以我设置的为 true.
# lineNumbersInTable:使用表来格式化行号和代码,而不是 标签。这个属性一般设置为 true.
# noClasses:使用 class 标签,而不是内嵌的内联样式
privacy:
vimeo:
disabled: false
simple: true
twitter:
disabled: false
enableDNT: true
simple: true
instagram:
disabled: false
simple: true
youtube:
disabled: false
privacyEnhanced: true
services:
instagram:
disableInlineCSS: true
twitter:
disableInlineCSS: true
4 写markdown文章
$ hugo new posts/create_hugo_blog
/Users/ketonghe/blog/content/posts/create_hugo_blog
用markdown编辑器编辑文章
5 发布预览
$ hugo server -D
| ZH
+------------------+----+
Pages | 13
Paginator pages | 0
Non-page files | 0
Static files | 9
Processed images | 0
Aliases | 6
Sitemaps | 1
Cleaned | 0
Total in 91 ms
Watching for changes in /Users/ketonghe/blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/ketonghe/blog/config.yml
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:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
接下来就可以在本地浏览器 输入http://localhost:1313/ 访问了
这个主题支持站内搜索 还不错
6 添加评论支持
https://becool.vip/posts/tech/hugo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0tkikoo%E8%AF%84%E8%AE%BA/
7 生成静态页面
-
这里可以用github的action自动部署
name: CI #自动化的名称 on: push: # push的时候触发 branches: # 那些分支需要触发 - master jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: "latest" - name: Build Web run: hugo - name: Deploy Web uses: peaceiris/actions-gh-pages@v4 with: PERSONAL_TOKEN: ${{ secrets.ACTIONS_DEPLOY_KEY }} EXTERNAL_REPOSITORY: heketong/heketong.github.io PUBLISH_BRANCH: master PUBLISH_DIR: ./public