Hugo+GitHub Pages

最后更新于7个月前

这有帮助吗？

Hugo+GitHub Pages

（1）工具准备

git，下载地址：

go，下载地址：（可选）

Hugo文件下载：

（2）通过Chocolatey安装Hugo（与下二选一）

1：右键管理员powershell.exe命令行启动，输入以下命令：

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

或者，右键管理员cmd.exe命令行启动，输入以下命令：

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2：输入choco显示版本

choco

3：安装hugo（需要翻墙）

choco install hugo -confirm

4：安装“Sass/SCSS”扩展（需要翻墙，可选）

choco install hugo-extended -confirm

（3）Hugo环境变量配置（与上二选一）

1：在E盘建立hugo文件夹，把hugo_extended解压后hugo.exe文件放目录下

2：环境变量设置

3：在任意目录右键选择“Git Bash Here”，输入以下命令，验证配置结果

hugo version

（4）在C盘目录新建blog站点

1：在C盘右键选择“Git Bash Here”

2：新建blog站点

hugo new site blog -f yml

3：切换到blog目录

 cd blog

4：测试网站，并根据提示的地址进行访问

hugo server

（5）下载主题

1：克隆主题到指定的位置

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

（6）设置主题

1：新建config.yml文件，复制案例代码

baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

googleAnalytics: UA-123-45

minify:
  disableXML: true
  minifyOutput: true

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: ExampleSite
  description: "ExampleSite description"
  keywords: [Blog, Portfolio, PaperMod]
  author: Me
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "<link / abs url>"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "Home"
    icon: /apple-touch-icon.png
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Hi there \U0001F44B"
    Content: Welcome to my blog

  socialIcons:
    - name: twitter
      url: "https://twitter.com/"
    - name: stackoverflow
      url: "https://stackoverflow.com"
    - name: github
      url: "https://github.com/"

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: categories
      name: categories
      url: /categories/
      weight: 10
    - identifier: tags
      name: tags
      url: /tags/
      weight: 20
    - identifier: example
      name: example.org
      url: https://example.org
      weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
# pygmentsUseClasses: true
# markup:
#     highlight:
#         # anchorLineNos: true
#         codeFences: true
#         guessSyntax: true
#         lineNos: true
#         style: monokai

2：config.yml将baseURL改为：

baseURL: "https://peiyafei.github.io/"

3：在 config.yml 中配置主题：

theme: "PaperMod"

4：测试网站

 hugo server

5：新建文章

hugo new post/first.md

页面案例代码：

---
title: "My 1st post"
date: 2020-09-15T11:30:03+00:00
# weight: 1
# aliases: ["/first"]
tags: ["first"]
author: "Me"
# author: ["Me", "You"] # multiple authors
showToc: true
TocOpen: false
draft: false
hidemeta: false
comments: false
description: "Desc Text."
canonicalURL: "https://canonical.url/to/page"
disableHLJS: true # to disable highlightjs
disableShare: false
disableHLJS: false
hideSummary: false
searchHidden: true
ShowReadingTime: true
ShowBreadCrumbs: true
ShowPostNavLinks: true
ShowWordCount: true
ShowRssButtonInSectionTermList: true
UseHugoToc: true
cover:
    image: "<image path/url>" # image path/url
    alt: "<alt text>" # alt text
    caption: "<text>" # display caption under cover
    relative: false # when using page bundles set this to true
    hidden: true # only hide on current single page
editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link
---

6：文件路径为：C:\blog\content\post\first.md，编辑文件内容

draft: true 改为  draft: false

baseURL的地址为在github仓库中访问的地址：

7：config.yml文件中输入中文

首先需要用VS Code软件开发，在右下角设置为UTF-8

然后将鼠标悬浮在中文字上，选择“调整设置”

再点击“在突出显示内容中排除...”即可

8：设置logo

通过网页制作一个图片，名称为：apple-touch-icon.png，放置到static目录下

9：修改页脚

修改blog\themes\PaperMod\layouts\partials\footer.html文件

<a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
<a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>

10：插入图片

第一种：绝对路径（首选）

(图片资源放置在根目录下的static下，也就是网站的绝对路径) 图片存放位置

引入图片的markdown代码

![](/images/two_images.jpg)

分析：图片请求路径

第二种：相对路径

图片存放位置

引入图片的markdown代码

![](girl_images.jpg)

分析：图片请求路径，这个demo，要和博客文件名相同(我这里此篇博博客的文件名叫demo)，所以需要新建demo文件夹。

（7）上传文件至GitHub

1：配置GitHub SSH密钥，设置git的user name和email，例如：

git config --global user.name "Luke.Deng"
git config --global user.email  "xiangshuo1992@gmail.com"

2：检查是否存在SSH Key

cd ~/.ssh
ls
或者
ll
//看是否存在 id_rsa 和 id_rsa.pub文件，如果存在，说明已经有SSH Key

如果没有SSH Key，则需要先生成一下，例如：

ssh-keygen -t rsa -C "xiangshuo1992@gmail.com"

3：在C:\Users\Administrator\.ssh文件夹下用编辑器打开id_rsa.pub，复制其中的密钥

4：在GitHub后台-->Settings-->SSH and GPG kyes里添加密钥

5：验证

ssh -T git@github.com
//运行结果出现类似如下
Hi xiangshuo1992! You've successfully authenticated, but GitHub does not provide shell access.

6：在GitHub新建仓库peiyafei.github.io

7:上传文件至peiyafei.github.io仓库

cd public //切换到public文件夹
git init
git add .
git commit -m "说明文字"
git remote add origin git@github.com:peiyafei/peiyafei.github.io.git
git push -u origin master

8：修改文件之后，第二次上传或以后上传

cd public 
git pull --rebase origin master
cd ..
进行博客内容编辑修改
hugo  --buildDrafts  或者 hugo -D
cd public  
git add .
git commit -m "xxxx"  
git push -u origin master

git pull origin master与git pull --rebase origin master的区别主要是在远程与本地代码的合并上面了。

rebase好处想要更好的提交树，使用rebase操作会更好一点。这样可以线性的看到每一次提交，并且没有增加提交节点。

9：批处理提交git（可新建计划任务，每日定时提交）

新建一个Auto_push_git.bat文件，填入以下内容，因为其中使用了绝对路径，bat文件可放到任意位置运行，默认放到blog站点目录运行

@echo off
@title bat 交互执行git提交命令
rem 下面这个命令使用绝对路径
cd c:\blog\public
git pull --rebase origin master
cd ..
rem 进行博客内容编辑修改
hugo -D
cd public  
git add .
git commit -m "update"  
git push -u origin master

10：如果遇到无法上传，错误提示如：“It seems that there is already a rebase-apply directory”

，执行如下命令，然后再运行以上脚本内容

rm -rf .git/rebase-apply
git rebase -i  origin/master

（8）设置自定义域名

1：GitHub Pages页面Custom domain处输入域名

2：在域名商管理后台添加两条CNAME记录

主机记录：www , 记录值：xxx.github.io （仓库名）
主机记录：@ ，记录值：xxx.github.io （仓库名）

3：用自定义域名访问测试

（9）部署到Netlify

2：部署过程简单，不再赘述

3：添加CNAME解析

记录类型：CNAME，主机记录：www，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app）
记录类型：CNAME，主机记录：@，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app）

主机记录www表示，以www.qtdevelop.com方式访问，

主机记录为@表示：以qtdevelop.com方式访问

（10）搜索引擎优化（SEO）

参考资料：

1.Quick Start ：快速的了解如何使用 Hugo

2. Host on Github：了解如何部署 Hugo 作为一个 Github Pages

3.作为拓展阅读材料，我觉得有兴趣可以了解下这些软件是怎么运作的

Netlify：做的一些 Vue 或者 React 想上线部署之后可以让别人预览，可以通过 Netlify 这个平台实现
Nanobox：本地开发工具，可以消除环境的复杂性，在部署和生产环境之间，进行自动化环境，通过虚拟化使得开发环境更简洁
AWS Amplify：亚马逊出品的移动应用开发程序管理工具
Firebase：Google 出品的 BAAS

4.了解 GitHub Pages

5.创建一个 Github Pages site

最后更新于7个月前

这有帮助吗？