> For the complete documentation index, see [llms.txt](https://peiyafei.gitbook.io/it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://peiyafei.gitbook.io/it/github/hugo+github-pages.md). # Hugo+GitHub Pages ### （1）工具准备 git，下载地址： go，下载地址： （可选） Hugo文件下载： ![](/files/X0XaaOXR1X6i6JFayaps) ### （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 ``` {% hint style="info" %} 参考资料： {% endhint %} ### （3）Hugo环境变量配置（与上二选一） 1：在E盘建立hugo文件夹，把hugo\_extended解压后hugo.exe文件放目录下 2：环境变量设置 ![](/files/JEbc0HgL2AZYPJAX9NGK) 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: [""] 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: "" favicon16x16: "" favicon32x32: "" apple_touch_icon: "" safari_pinned_tab: "" 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: "" 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//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/" ``` {% hint style="info" %} 参考： {% endhint %} 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 alt: "" # alt text caption: "" # 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//content" Text: "Suggest Changes" # edit text appendFilePath: true # to append file path to Edit link --- ``` {% hint style="info" %} 参考： {% endhint %} 6：文件路径为：C:\blog\content\post\first.md，编辑文件内容 ``` draft: true 改为 draft: false ``` {% hint style="info" %} baseURL的地址为在github仓库中访问的地址： https\://\.github.io {% endhint %} 7：config.yml文件中输入中文 首先需要用VS Code软件开发，在右下角设置为UTF-8 然后将鼠标悬浮在中文字上，选择“调整设置” 再点击“在突出显示内容中排除...”即可 8：设置logo {% hint style="info" %} 参考网址： {% endhint %} 通过网页制作一个图片，名称为：apple-touch-icon.png，放置到static目录下 9：修改页脚 修改blog\themes\PaperMod\layouts\partials\footer.html文件 ``` Hugo & PaperMod ``` 10：插入图片 第一种：绝对路径（首选） (图片资源放置在根目录下的static下，也就是网站的绝对路径) 图片存放位置 ![](/files/YnEdYXnILQZJX5GDxEGk) 引入图片的markdown代码 ``` ![](/images/two_images.jpg) ``` 分析：图片请求路径 ![](/files/LfYMsiNmYzpiJTg8JrIg) 第二种：相对路径 图片存放位置 ![](/files/QnearzlVl67i5RLfGwJC) 引入图片的markdown代码 ``` ![](girl_images.jpg) ``` 分析：图片请求路径，这个demo，要和博客文件名相同(我这里此篇博博客的文件名叫demo)，所以需要新建demo文件夹。 ![](/files/3XgdRVpx8oBtwAJlB5bA) {% hint style="info" %} 参考资料： {% endhint %} ### （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 ``` {% hint style="info" %} git pull origin master与git pull --rebase origin master的区别主要是在远程与本地代码的合并上面了。 rebase好处 想要更好的提交树，使用rebase操作会更好一点。 这样可以线性的看到每一次提交，并且没有增加提交节点。 {% endhint %} 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 ``` {% hint style="info" %} 参考资料： {% endhint %} ### （8）设置自定义域名 1：GitHub Pages页面Custom domain处输入域名 2：在域名商管理后台添加两条CNAME记录 * 主机记录：www , 记录值：xxx.github.io （仓库名） * 主机记录：@ ， 记录值：xxx.github.io （仓库名） 3：用自定义域名访问测试 ### （9）部署到Netlify 1：点击[Netlify官网](https://app.netlify.com/)用GitHub账号一键登录 2：部署过程简单，不再赘述 3：添加CNAME解析 * 记录类型：CNAME，主机记录：www，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app） * 记录类型：CNAME，主机记录：@，记录值：Netlify站点默认生成的访问地址（XXX.netlify.app） {% hint style="info" %} 主机记录www表示，以www\.qtdevelop.com方式访问， 主机记录为@表示：以qtdevelop.com方式访问 {% endhint %} ### （10）搜索引擎优化（SEO） ### 参考资料： #### 1.Quick Start ：快速的了解如何使用 Hugo {% embed url="" %} #### 2. Host on Github：了解如何部署 Hugo 作为一个 Github Pages {% embed url="" %} #### 3.作为拓展阅读材料，我觉得有兴趣可以了解下这些软件是怎么运作的 * Netlify：做的一些 Vue 或者 React 想上线部署之后可以让别人预览，可以通过 Netlify 这个平台实现 * Nanobox：本地开发工具，可以消除环境的复杂性，在部署和生产环境之间，进行自动化环境，通过虚拟化使得开发环境更简洁 * AWS Amplify：亚马逊出品的移动应用开发程序管理工具 * Firebase：Google 出品的 BAAS #### 4.了解 GitHub Pages {% embed url="" %} #### 5.创建一个 Github Pages site {% embed url="" %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://peiyafei.gitbook.io/it/github/hugo+github-pages.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.