---

说明：本人小白一枚，第一次使用开源项目Hugo进行静态网站的搭建，从搭建到发布遇到了较多问题，感觉网上的解决办法不是很全面，特此记录一下。

---

项目场景：

1. 使用开源项目 Hugo （https://gohugo.io/）构建一个文档网站，该文档网站使用 Hugo 本身提供的任意 Documentation 类型的主题（Theme：https://themes.gohugo.io/tags/documentation/）
2. 将该网站代码发布到 GitHub Page，使用 Github Page 自带的 .io 域名暴露该网站到外网
3. 备注：我在E盘的Hugo下新建了一个新的站点 myblog，后续操作一般都以该站点举例。

问题描述：

• 初学者如何更快的为自己的博客建立一个主题
• 将仓库部署到 GitHub page 的网页出现错误 404
• GitHub page 的网页展现的而主题格式和本地静态网页格式不一样
• 插入的图片无法显示

---

解决方案：

1. 为blog快速新建界面还算美观的主题。
   在Hugo的官方网站中有各种各样的主题可以选择，主题：地址
   每一个主题的详情页一般都会有一个 Quick Start 或者 Usage
   
   
   一般我们需要大致看一下这个使用方法，最重要的是在下载好的主题中都会有一个exampleSite的文件夹**，将里面的文件复制，然后放到myblog根目录下，将以前的文件替换掉，这样建立好博客后**，初步就可以有一个还算美观的界面。
   config 文件就是主题的配置文件，后续可以通过VScode 打开该文件，按照自己的要求对主题设置参数进行修改。需要注意的是不同主题的配置一般是不一样的，所以一个主题的配置文件可能并不适用于其他主题。
   
   
2. 发布到GitHub page 的网页出现错误 404
   我在网上查到出现这个问题主要有以下几个原因
   （1）GitHub 建立自己库的时候命名有问题，一般需要命名【your_user_name.github.io】格式，也有人提出这种格式会出现404错误，将命名改为【your_user_name.github.com】解决问题
   （2）GitHub建立自己库的时候需要注意 分支位于master下，并且需要有readme文件，readme文件在新建库的时候可以自动生成。
   （3）进入github你的仓库，进入setting，页面往下拉，看到custom domain,在文本框中填写的域名,比如我的是：https://fmx26.github.io/，然后点击save

上述方法都没能解决我的问题。最后我是这么解决的：

刚才提到了在我的myblog 里有一个主题配置文件 config,将下图中划线处的 网址修改为我自己的 GitHub page 的网址。 呃，然后就成功了。。。。。

3. GitHub page 的网页展现的主题格式和本地静态网页格式不一样 意思就是在本地的博客网页很正常的可以显示，但是发布到GitHub page以后就没有主题了。类似下图这样

网上解决方案有
（1）

尝试以后，没有解决！
后来以为是自己下载主题的问题，或者是主题配置的问题。但是后来突然发现博客部署到 github上去(部署到远端服务器)的时候就出现问题了

hugo --theme=hugo-theme-bootstrap4-blog --baseUrl="https://github.com/fmx26/fmx26.github.io"

执行完后会在文件夹下出现一个public文件，public文件夹中有一个index 文件，点开以后就发现主题没有被应用至自己制作的网页上。
按住 Fn+F12 打开控制端界面，出现报错，通过检查之后发现是jsp中的css和js被拦截了。俗称"JSP中的静态资源被拦截" 。用notepad++ 打开该index 文件，然后将图中的两处标记的语句修改为下面的样子即可！

4. 插入的图片无法显示 在VSCode 编写博客内容时，插入图片的地址是网页地址，部署到GitHub图片无法显示，原因也是图片的链接地址被拦截了，所以图片最好是放置在根目录下的static下，也就是网站的绝对路径
   
   

以上就是这个过程中遇到的问题和解决的办法。