标签: static-site

在Jekyll中将网址删除到1个单词

我正在建立一个Jekyll博客,我遇到了永久链接的问题.

我在@config.yml中设置了博客文章的永久链接:

permalink: /:page/:categories/:title
Run Code Online (Sandbox Code Playgroud)

导航到博客文章时,它会像这样输出:

http://localhost:4000/blog/travel/netherlands-trip-prequesites/
Run Code Online (Sandbox Code Playgroud)

我在网站上有一些静态页面:Blog,Travel

变量page.url输出此url:/blog/travel/netherlands-trip-prequesites

导航栏用于突出显示当前页面的代码(为其提供"活动"类):

          {% assign url = page.url|remove:'index.html' %}
          {% for nav in site.navigation %}
            {% if nav.href == url %}
              <li class="active"><a href="{{nav.href}}">{{nav.name}}</a></li>
            {% else %}
              <li><a href="{{nav.href}}">{{nav.name}}</a></li>
            {% endif %}
          {%endfor%}
Run Code Online (Sandbox Code Playgroud)

导航到静态页面时效果很好,但是当我点击博客文章时,它没有突出显示正确的静态页面.(例如:如果我导航到带有网址的博客帖子,/blog/smth/title它应该会在我的导航中自动突出显示"博客".当我导航到/travel/smth/title它时应突出显示"旅行")

我想要做的是剥离的产量下降page.url它的第一部分.例如,我想要提供以下输出

/blog/travel/netherlands-trip-prequesites
Run Code Online (Sandbox Code Playgroud)

向下

/blog/
Run Code Online (Sandbox Code Playgroud)

为什么?所以我可以用它来检查它所属的静态页面并按顺序突出显示它.

html liquid static-site jekyll

6
推荐指数
2
解决办法
2165
查看次数

jekyll观看haml和sass

我已经在各种文件夹中有一个带有.haml和.scss文件的项目.

我按照本指南http://winstonyw.com/2013/02/24/jekyll_haml_sass_and_github_pages/来创建_plugins/haml.rb_plugins/sass.rb

我将所有.scss文件移动到./assets/css/文件夹中

为了确保,我还创建了layouts文件夹并将所有.haml文件放在那里.

我跑了jekyll serve --watch,这些.haml/.scss文件没有转换为_sites中的.html或.css文件.我也无法通过浏览器访问它们.

我在这里尝试过这个文件并没有帮助https://gist.github.com/radamant/481456#file-haml_converter-rb

那么我做错了什么以及如何观看所有.haml/.scss文件?

我来自middlemanapp世界,所以jekyll对我来说是新的.

更新1:

我的高级目标是:

  1. 使用Jekyll与Sass和Haml一起进行前端开发

  2. 它必须注意文件的变化

  3. 它必须转换.sass /.在手表上scss文件和Haml到.css和.html.这意味着我可以去http://localhost:4000/index.html实际上我有index.haml作为Haml

  4. 我的项目不遵循Jekyll doc(带有layouts文件夹和其他文件)中所说的目录结构.这必须能够检测其他文件夹中的.sass和.haml文件(我可以指定)

  5. 我不想修改标头中的任何.sass或.scss文件以使Jekyll检测到它.因为我已经拥有大量的(来自Bootstrap)

更新2:

这是我的新作品 _config.yml

source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     .
Run Code Online (Sandbox Code Playgroud)

基本上我想把所有.haml文件放在主文件夹中,而不是layouts.在_plugins我有_plugins/haml.rb_plugins/sass.rb如上所述.但是,当我index1.haml在主文件夹中创建一个样本时,它不起作用,它在转换时没有转换--watch

更新3:

这是我的目录结构:

/www

 /_plugins

  haml.rb

  sass.rb

 /_layouts

  index1.haml

 _config.yml
 index1.haml
Run Code Online (Sandbox Code Playgroud)

haml.rb:

module Jekyll …
Run Code Online (Sandbox Code Playgroud)

ruby static-site jekyll gruntjs

6
推荐指数
1
解决办法
1515
查看次数

需要刷新以前访问过的 Gatsby 站点以查看更改

我在 Netlify 上托管了一个 Gatsby 站点。当我部署一个新版本时,我对站点所做的更改在我刷新页面之前是不可见的。有谁知道为什么会这样?

我正在使用gatsby-plugin-offline& gatsby-plugin-manifest。我看到我可以安装gatsby-plugin-remove-serviceworker插件来删除服务工作者,但如果可能的话,我想继续使用它。

这是一个很难搜索的问题,因为我得到了有关.cache本地目录中文件夹的结果

caching static-site gatsby netlify

6
推荐指数
1
解决办法
1879
查看次数

Hugo 没有生成与开发模式相同的样式

这是我第一次尝试生成静态网站。

在使用命令的开发模式下一切正常hugo server。样式很棒,但是当我尝试使用hugo命令生成最终静态文件时,主题似乎没有正确应用,我不明白为什么。

我尝试了两个主题(快速入门中的主题和另一个主题),但两者都得到了类似的结果。

这些是我在后一种情况下在控制台中输入的命令:

hugo new site testsite
cd testsite
cd themes
git clone https://github.com/cowboysmall-tools/hugo-devresume-theme.git
cd ..
cp themes/hugo-devresume-theme/exampleSite/config.toml .

hugo server
# styling seems to work

hugo
# the opened public/index.html is broken 
Run Code Online (Sandbox Code Playgroud)

谁能告诉我我做错了什么?

我已经遵循了这些教程:

快速开始

雨果德夫简历主题

更新

检查 chrome 控制台中的错误后,我可以看到如下值:

<link href="/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css" rel="stylesheet">
Run Code Online (Sandbox Code Playgroud)

/如果我从样式的开头删除/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css似乎可以正确应用。

显然我不想每次都手动执行此操作。配置上有什么解决方案吗?

html css themes static-site hugo

6
推荐指数
1
解决办法
2348
查看次数

AWS S3 存储桶重定向重定向到格式错误的 URL

我已经按照亚马逊提供的使用 s3 存储桶进行网站托管的说明进行了操作。

我创建了两个 S3 存储桶,一个名为 MyWebsite.com,另一个名为 www.MyWebsite.com。在 S3 中,我已将两个存储桶中的后者配置为重定向到前者,如示例所示。

我正在使用 Route53 为 www 和非 www 域设置别名记录集。我的记录集如下:

名称MyWebsite.com别名目标s3-website-us-west-1.amazonaws.com。

名称:www .MyWebsite.com别名目标s3-website-us-west-1.amazonaws.com。

访问非 www 域,MyWebsite.com 工作正常,但是当我尝试访问 www.MyWebsite.com 时,我被重定向到无效的 url:

http://http//MyWebsite.com.s3-website-us-west-1.amazonaws.com/

额外的“http//”(没有冒号)来自哪里,我该如何防止它?

编辑:实际网站名称是thinkingdots.com

redirect amazon-s3 amazon-web-services static-site amazon-route53

5
推荐指数
1
解决办法
1181
查看次数

如何调试 nextjs 导出

我有一个用 nextjs 和 mysql 构建的一千页网站。当我使用命令生成静态页面时,next export有时会收到Hangup警告。没有任何关于出了什么问题的有用信息。

每个页面都会向mysql请求数据,所以请求量很多。我想这可能是“挂断”警告的原因,但我不确定。要求非常简单。

有什么办法可以调试吗?可能是命令verbose的标志next export或类似的东西?我检查过next export -h,但没有发现任何有趣的东西。

javascript static-site node.js reactjs next.js

5
推荐指数
0
解决办法
474
查看次数

使用客户端 Javascript 与本地网络上的设备进行通信

我正在尝试建立一个网站,允许您将文件传输到本地网络上连接的设备。该网站是静态的,将托管在 GitHub 页面上。

是否可以使用Javascript与本地网络上的其他设备进行通信(即传输文件/文本)?设备的 IP 地址已知,我正在此处寻找点对点连接。

注意:由于该网站是静态的,因此没有可以控制的服务器端代码。

谢谢

javascript client-side static-site

5
推荐指数
1
解决办法
5572
查看次数

如何给静态网站添加搜索功能?

我正在开发一个百科全书类型的网站。本质上,该网站包含单词、定义、概念和博客文章的页面,我打算每周左右添加一个新页面/帖子。目前,我的每篇文章大约有 40 个 HTML 页面。之前我一直将网站的存储库发布到 Github Pages,但最近我决定通过 Netlify 托管我的网站。到目前为止,我很喜欢 Netlify 的功能,它很好地改进了我的开发过程。

但是,我的网站仍然是静态的。需要明确的是,我没有使用静态站点生成器(例如 Next.js 或 Jekyll)创建站点的文件。我希望该项目成为硬编码的实践。当前目录中唯一的文件是 HTML、CSS 和 JS 文件(以及 git 属性以及图标和字体等内容) 我已经浏览了 Netlify 的 Web 应用程序和功能部分,但是,我发现没有任何内容真正符合马克,无论是因为我是 Netlify 的新用户,还是因为我在网站索引和/或后端应用程序方面不一定有太多经验。

我的问题是,如何在静态网站的主页上实现搜索栏和标题搜索功能?这将使观众在访问后能够轻松找到我的任何特定帖子。我希望搜索栏只搜索我为帖子指定的文件夹中每个 html 文件的标题(至少现在是这样)。其他问题是我应该使用哪些网络应用程序(如果有)来完成此任务,以及我是否应该考虑更改我开发和托管网站的流程以适应这些应用程序?

html indexing search static-site netlify

5
推荐指数
1
解决办法
8172
查看次数

在 GitHub Pages 静态站点上实现“使用 GitHub 登录”

我正在尝试编写一个可以在 GitHub Pages 上托管静态站点的网站,该网站将支持“使用 GitHub 登录”选项。

然后,用户凭据将用于访问 GitHub Pages 网站所基于的存储库并为其做出贡献,从而使其能够像非静态网站一样运行。

如果可能的话,我希望避免在 GitHub 以外的任何地方托管任何内容。

我相信我需要使用的是 OAuth 应用程序,并且我在这里找到了文档。

我遇到的问题在于 OAuth 应用程序所需的客户端密钥。作为一个秘密,我显然无法将其存储在静态站点的存储库中。

有办法解决这个问题吗?一种无需客户端密钥即可实现“使用 GitHub 登录”的方法,或者以某种安全方式存储客户端密钥的位置?

oauth github static-site github-pages

5
推荐指数
1
解决办法
3445
查看次数

NextJS 针对 SSG/SSR 和 Google Analytics/cookie 的建议

我有一个 NextJS 站点,它是在构建时静态生成的(SSG)。

接下来我需要实现两件事

  1. 谷歌分析
  2. 符合 GDPR 的选择加入 Cookie 选项

第一个很容易做到,但是我正在努力使其符合 GDPR。问题是当我的网站是静态生成时,我无法访问服务器端的 cookie。这意味着,在不知道用户是否同意服务器上的 cookie 的情况下,我无法与页面的其余部分一起提供(或不提供)分析脚本。

可能的解决方案:

  1. 在客户端处理所有事情 - 请求同意,然后动态地将 GA 标签添加到<head>. 然而我担心这会对分析产生负面影响,或者完全破坏它。有人知道吗?

  2. 将我的网站更改为服务器端呈现 (SSR)。如果可能的话我很想避免这种情况。我对 SSG 网站的运行速度感到非常满意。它本质上只是一个基本的博客,因此为了分析而必须进行转换将是一种耻辱。

  3. 还有其他想法吗?...

如果有人有这方面的经验,无论他们使用 Next 还是 Nuxt 等,您的意见将不胜感激!

提前致谢

google-analytics static-site reactjs server-side-rendering next.js

5
推荐指数
1
解决办法
6166
查看次数