使用Hugo和stack 主题建立建静态网站

youngwang12138 commented 2 years ago

前言之前使用HEXO加上NEXT建站。优点是使用确实很方便，想要的功能基本都会有。但是感觉加载速度不太好，模版文件试了下不太好改，还有就是很多人使用HEXO加上NEXT建站。就想换个方式至少与其他人不是那么相同之前的经历 GitHub page 最开始使用GitHub page托管，因为HEXO有这个方面的插件。部署起来非常的方便。但是因为GitHub page访问时好时坏，就换到了腾讯云了腾讯云在服务器启动webhook程序。通过hexo-deployer-git插件，会在对应分支做git push操作。利用这点加上GitHub的webhook，通知服务器拉取分支代码，构建带有网站静态文件的Nginx docker镜像上传到DockerHub，利用DockerHub的webhook通知服务器部署镜像。那么问题来了，有时服务器的响应会较慢而且要消耗服务器的带宽。有没有更好的方式呢 CloudFlare CDN 加快访问且减少服务器的带宽消耗，很容易想到CDN内容分发。发现CloudFlare就是干这个的。他的优点是免费、自带数据分析，而且确实提高了访问速度，只不过大部分时间我不挂VPN的时候访问巨慢。接受不了选用Hugo的原因 Hugo的有点对我来说是一下几点：使用go语言开发的，如果我想改点东西的话可以自己fork出一个分支自定义模版文件使用更简单，对于我这个没有前端工作经验的人来说能改的了目前项目很活跃，短时间内不用担心项目不再维护的问题基于Hugo及hugo-theme-stack建站在git上搜索hugo theme，挑了个star高的且文档齐全的主题hugo-theme-stack。对这个组合进行了一些自定义的设置，主要包含以下一些内容：添加Google Analytics 谷歌分析，查看页面的添加评论系统默认是使用disqus，但我觉得gitalk更符合我的审美，而且disqus会在我的页面上展示我不希望出现内容修改页面URL 我不喜欢在URL上显示时间或标题，就改成了/post/:slug形式。为了配合这种URL形式，需要修改文章的模版文件./archetypes/default.md添加slug: {{ string now.Unix }}页面级参数。配合我写的简单shell脚本可以达到URL为/post/1529598446/的形式 1 2 3 4 5 |- content |- post |- 1529598446 |- .png // 文章引用的图片，![图片名称](.png) |- index.md // 文章内容添加busuanzi访问统计 busuanzi 加在主页及文章内容页。但因为原主题中主页文章列表部分引用了文章页的模版，导致列表部分会出现错误的文章阅读次数，所以这里改了列表部分的模版 highlight 设置 highlight 代码高亮显示是主题自带的，但因为主题内带的配置文件不包含markup项，导致在css为light主题下，代码块会显示dark主题的配色，相当违和。加上markup后就正常了自定义内容我觉得这是一个很重要的功能，涉及你能对自己的网站个性化的程度。修改主题主题预留了 layouts/partials/head/custom.html 和 layouts/partials/footer/custom.html 这两个文件来自定义页面头部和底部的内容。添加自定义主题借助 Hugo 的特性可以很方便地覆盖主题的源码（类似 WordPress 的子主题功能)。在配置文件添加以下内容

TigGrak commented 1 year ago

你好，我也正在搭建一个stack风格的hugo博客，我在搜索功能遇到了问题，能分享一下是怎么做的吗

sorry but it could not work when i use this way to search my blog with the theme stack, the search web always shows nothing even i enter the key words which my posts' title have

and this is its erros

(i built my blog on url, http://xx.com/blog not http://xx.com/)

I think the error may be in the index.json But I've set it up following the tutorial

wangzhongyang commented 1 year ago

@TigGrak 你好，我也正在搭建一个stack风格的hugo博客，我在搜索功能遇到了问题，能分享一下是怎么做的吗

sorry but it could not work when i use this way to search my blog with the theme stack, the search web always shows nothing even i enter the key words which my posts' title have

and this is its erros

(i built my blog on url, http://xx.com/blog not http://xx.com/)

I think the error may be in the index.json But I've set it up following the tutorial

我使用的这个主题的做法应该是：

在生成静态页面时，提取各页面的标题、URL、内容、日期。保存到一个JSON文件中，JSON的内容如图所示
点击搜索页面时，把JSON文件的内容加载到一个数组变量里，假设叫contentArr
在输入关键字查询时，遍历匹配contentArr数组里的元素，然后把符合条件的返回，显示在页面上

该主题的具体实现方式，你可以看下，这是地址，希望对你有所帮助

TigGrak commented 1 year ago

@TigGrak 你好，我也正在搭建一个stack风格的hugo博客，我在搜索功能遇到了问题，能分享一下是怎么做的吗 sorry but it could not work when i use this way to search my blog with the theme stack, the search web always shows nothing even i enter the key words which my posts' title have and this is its erros (i built my blog on url, http://xx.com/blog not http://xx.com/) I think the error may be in the index.json But I've set it up following the tutorial

我使用的这个主题的做法应该是：

在生成静态页面时，提取各页面的标题、URL、内容、日期。保存到一个JSON文件中，JSON的内容如图所示

点击搜索页面时，把JSON文件的内容加载到一个数组变量里，假设叫contentArr

在输入关键字查询时，遍历匹配contentArr数组里的元素，然后把符合条件的返回，显示在页面上

该主题的具体实现方式，你可以看下，这是地址，希望对你有所帮助

似乎我用的也是这个方法，但是总是会报这个错误，请问你的json文件是怎么样的，保存在了哪里，我怀疑是它的问题因为无法找到index.json 还有js代码的路径

甚至我直接抄 hugo-theme-stack的search方法也无法使用

不知道我在哪里犯了错误

TigGrak commented 1 year ago

@TigGrak 你好，我也正在搭建一个stack风格的hugo博客，我在搜索功能遇到了问题，能分享一下是怎么做的吗 sorry but it could not work when i use this way to search my blog with the theme stack, the search web always shows nothing even i enter the key words which my posts' title have and this is its erros (i built my blog on url, http://xx.com/blog not http://xx.com/) I think the error may be in the index.json But I've set it up following the tutorial

我使用的这个主题的做法应该是：

在生成静态页面时，提取各页面的标题、URL、内容、日期。保存到一个JSON文件中，JSON的内容如图所示

点击搜索页面时，把JSON文件的内容加载到一个数组变量里，假设叫contentArr

在输入关键字查询时，遍历匹配contentArr数组里的元素，然后把符合条件的返回，显示在页面上

该主题的具体实现方式，你可以看下，这是地址，希望对你有所帮助

似乎我用的也是这个方法，但是总是会报这个错误，请问你的json文件是怎么样的，保存在了哪里，我怀疑是它的问题因为无法找到index.json 还有js代码的路径

甚至我直接抄 hugo-theme-stack的search方法也无法使用

不知道我在哪里犯了错误

原因找到了，我的search.md少了几个标签正确的应该是

title: "搜索"
slug: "search"
layout: "search"
outputs:
    - html
    - json
menu:
    main:
        weight: -60
        params: 
            icon: search

Jinzedev commented 1 year ago

不懂就问，首页这个选项是咋弄出来的，搞了半天没搞明白

feiyizhou commented 1 year ago

能贴一下busuanzi访问统计的相关代码及设置吗？

youngwang12138 / blog-gitalk