Giter VIP home page Giter VIP logo

geneasy / nav Goto Github PK

View Code? Open in Web Editor NEW
77.0 1.0 73.0 13 KB

网址导航模板 - 这是一个通用的网址导航模板,任何类型的网站都可以拿去使用。此网址导航页面是使用 GenEasy 文档生成工具 + WebStack 模板创建的静态页面,托管在 GitHub Pages 服务器上面。例子: https://zh.pipecraft.net/

Home Page: https://geneasy.github.io/nav/

License: MIT License

Handlebars 100.00%
geneasy templates ssg webstack

nav's Introduction

网址导航(静态页面通用模板)

https://geneasy.github.io/nav/

这是一个通用的网址导航模板,任何类型的网站都可以拿去使用。

此网址导航页面是使用 GenEasy 文档生成工具 + WebStack 模板创建的静态页面,托管在 GitHub Pages 服务器上面。

当修改 links.yml 文件里的内容时,GitHub Actions 会自动更新 HTML 文件。不需要服务器,不需要数据库。

如何在我的网站里加入这个网址导航页面?

第一步:fork 这个项目 (注意: gh-pages 分支一起复制)

第二步:进入 Settings > Pages, 启用 GitHub Pages 功能。分支选择 gh-pages

第三步:2 分钟后,访问你的 GitHub Pages 域名,看看是否正常显示。https://你的用户名.github.io/nav/https://你的用户名.github.io/nav/index.html

第四步:进入 Actions,启用 Actions 功能,进入 Settings,启用 Issues 功能。

第五步:

5.1 如果你的网站是托管在 GitHub Pages 上面,配置已经结束

5.2 如果你的网站部署在自己的服务器,需要添加一段 proxy 代码。

以下是 nginx 代码示例

location /nav/ {
    proxy_pass      https://你的用户名.github.io/nav/;
    proxy_intercept_errors on;

    # allow GitHub to pass caching headers instead of using our own
    expires off;
    proxy_set_header   Host                   你的用户名.github.io;
    proxy_set_header   X-Host                 你的用户名.github.io;
}

5.3 如果你的网站部署在自己的服务器,不能(会)配置 proxy,你可以添加一个把生成的 HTML rsync 到你的服务器的 GitHub Action。

name: Build and Deploy
on:
  push:
    branches:
      - gh-pages
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: rsync deployments
        uses: burnett01/[email protected]
        with:
          switches: -avzr --delete
          path: ./
          remote_path: /var/www/html/nav/
          remote_host: example.com
          remote_user: debian
          remote_key: ${{ secrets.DEPLOY_KEY }}

5.4 如果你的网站是托管在 Vercel, Netlify 等静态页面托管平台,需要添加部署到这些平台的 GitHub Action。(与 5.3 类似)

name: Build and Deploy
on:
  push:
    branches:
      - gh-pages
jobs: ...

第六步:访问你的网站,确认是否成功。https://你的域名/nav/

Tips

Tip: 如何修改 links.yml

方法 1

把项目下载到本地,修改提交。

方法 2

把现在 GitHub repository 的 URL 里的 github.com 改成 github.dev,会进入 web 版的 VS Code。在 web 版的 VS Code 里修改提交。

方法 3

在 GitHub 点击 links.yml 文件,然后点击编辑按钮。修改提交。

Tip: 如何在本地修改数据,查看效果

  1. clone repository 到本地
git clone https://github.com/geneasy/nav.git
  1. 安装 geneasy
npm i -g geneasy
  1. 执行下面命令生成 index.html
geneasy -t index.hbs -o public/index.html links.yml

index.html 生成在 public 目录下,确认生成的内容。

更多 geneasy 使用方法看官网

  1. 启动 web 服务器,确认效果。

可以使用 http-server 轻松完成。

npx http-server

或者安装后执行

npm i -g http-server
http-server

访问 http://127.0.0.1:8080 (端口看终端日志输出内容) 可以确认效果。

更多 http-server 使用方法看官网

Tip: 可不可以不使用 GitHub 管理数据,不使用 GitHub Action 生成 HTML 和发布?

可以。

首先,把这个 repository clone 到你的电脑或服务器里,修改 links.yml 里的数据。

然后参考上面本地修改数据,查看效果的方法,生成 HTML,放到服务器指定文件夹里。

git clone https://github.com/geneasy/nav.git
npm i -g geneasy
geneasy -t index.hbs -o /path/to/nav/index.html links.yml

Tip: 网址导航的 URL 可以不用 nav,用别的吗?

可以,

如果是网站部署在 GitHub Pages, 修改 GitHub repository 的名字。

如果是自己的服务器,修改 proxy 配置的 location

location / {
    proxy_pass      https://你的用户名.github.io/nav/;
    proxy_intercept_errors on;

    # allow GitHub to pass caching headers instead of using our own
    expires off;
    proxy_set_header   Host                   你的用户名.github.io;
    proxy_set_header   X-Host                 你的用户名.github.io;
}

or

location /daohang/ {
    proxy_pass      https://你的用户名.github.io/nav/;
    proxy_intercept_errors on;

    # allow GitHub to pass caching headers instead of using our own
    expires off;
    proxy_set_header   Host                   你的用户名.github.io;
    proxy_set_header   X-Host                 你的用户名.github.io;
}

Tip: 有其他模板或样式吗?

后续会添加,也非常欢迎你来贡献。

需要帮助?

如果遇到问题,需要帮助,请添加 issue

Related

  • geneasy - A command line tool that can easily generate HTML, Markdown documents, etc.
  • geneasy-links - 友情链接模板 - 这是一个通用的友情链接模板,任何类型的网站都可以拿去使用。
  • webstack - ❤️ 静态响应式网址导航网站 - webstack.cc

License

Copyright (c) 2021 Pipecraft. Licensed under the MIT license.

>_

Pipecraft DTO BestXTools

nav's People

Contributors

pipecraftnet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

nav's Issues

提交网站:你的网站的名字

提交网站

  • 网站名称(必填):澎湃新闻

  • 网站网址(必填):

  • 网站描述(必填):新闻网站

  • LOGO URL(可选):
    (也可以在这里上传图片)

  • 网站标签(可选):新闻

锐冠激光

提交网站

  • 网站名称(必填):激光激光

  • 网站网址(必填):wwww.163.com

  • 网站描述(必填):激光设备

  • LOGO URL(可选):
    (也可以在这里上传图片)

  • 网站标签(可选):

提交网站:示例

提交网站

  • 网站名称(必填): 神奇的网站

  • 网站网址(必填): https://example.com

  • 网站描述(必填): 说说这是什么网站

  • LOGO URL(可选):
    (也可以在这里上传图片)

  • 网站标签(可选): 技术, 生活, 社区

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.