<h1 align="center">
<a href="https://cdnjs.com"><img src="https://raw.githubusercontent.com/cdnjs/brand/master/logo/standard/dark-512.png" width="175px" alt="< cdnjs >"></a>
</h1>
<h3 align="center">The #1 free and open source CDN built to make life easier for developers.</h3>
---
## cdnjs Website
Welcome to the cdnjs/static-website repository, the home of the new cdnjs website built with Vue &
Nuxt, following the new cdnjs branding proposal from [cdnjs/brand](https://github.com/cdnjs/brand).
This website relies completely on the cdnjs API to operate, resulting in very low resource usage to
serve the site and limited app logic to update data being used (only sitemaps have to be updated,
everything else uses API calls when a page is loaded).
## Getting Started
This project runs on [Node.js](https://nodejs.org). Please make sure you have a version installed
that matches our defined requirement in the [.nvmrc](.nvmrc) file for this project.
Included with this project is a dependency lock file. This is used to ensure that all installations
of the project are using the same version of dependencies for consistency.
You can install the Node dependencies following this lock file by running:
```shell script
npm ci
```
Once the dependencies are installed, the website is ready to run in development mode. To start Nuxt
in development mode (without a custom server), run:
```shell script
npm run dev
```
### Development in Windows
Before running `npm run dev`, add a global npm package to resolve the `'NODE_ENV' is not recognized
as an internal or external command` issue:
```shell script
npm install -g win-node-env
```
## Analyzing Bundle
The website is build using Nuxt and relies on Webpack to generate the client-side bundle used to
render the site and provide interactivity. Due to this, we can use Webpack's analyzer to better
understand what is contributing to the size of the final bundle.
To run the analyzer, use the following package script:
```shell script
npm run dev:analyze
```
## Environment Variables
### Site Base
When working with the site in development, using `npm run dev` or `npm run dev:analyze`, the
`SITE_HOST` environment variable will be automatically set to be `http://localhost:3000/`, as this
is where the site is made accessible by the dev script.
When deploying this site to production using the `npm run build` and `npm run start` scripts, the
`SITE_HOST` environment variable must be set and should be the canonical base for where the site
will be hosted. In production for us, this is set to `https://cdnjs.com/`.
### Google Analytics
To enable Google Analytics for a deployment of the site, you should set the `GA_ID` environment
variable. This should be set to the unique Google Analytics ID for your property, in the form
`UA-xxxxxxxxx-x`.
Google Analytics is bundled with the site using the `@nuxtjs/google-analytics` module. If the
environment variable is not specified, Google Analytics will not be bundled with the deployment.
### Sentry Error Logging
To enable basic Sentry error logging, the `SENTRY_DSN` environment variable must be set with a valid
DSN URL from Sentry.
To enable source maps & release tracking for error reporting in production, the `SENTRY_ORG` and
`SENTRY_PROJECT` environment variables must be set with the correct Sentry project information, as
well as `SENTRY_AUTH_TOKEN` being set to a valid auth token from Sentry. Source maps are used as in
production we use minified, bundled JavaScript, so the sourcemaps allow Sentry to show where an
error originated from in the source code.
### Disallow in robots.txt
By default, during the build process a `robots.txt` file will be generated for the site that has
`User-agent: *` and `Allow: *`. If you wish to have a more private instance of the site or want to
prevent potential SEO contamination, you can set the `ROBOTS_DISALLOW` env var to be `1`. This will
change the `Allow: *` rule to be `Disallow: /`.
### Sitemap generation
To enable sitemap generation for the site, `NODE_ENV` must be set to `production`. This will enable
the initial sitemap generation during build as well as the background task for regenerating the
sitemap during `npm run start`, every 30 minutes.
Further, by having `NODE_ENV=production`, this will also tell the `robots.txt` generation script,
referenced above, to include a rule pointing to the sitemap index file, based on the provided
`SITE_HOST` env var.
(Note that for `npm run dev:analyze`, `npm run build` & `npm run start`, `NODE_ENV` will be
automatically set to `production`).
## Production Deployment
To deploy this website to production, the following steps should be taken:
- Install dependencies with `npm ci`
- Build the site for production with `npm run build`
- Start the custom Express server with `npm run start`
For deployments to some PaaS hosts, the installation of dependencies and building the app will
automatically be done, with `npm run start` being defined in the [`Procfile`](Procfile).
To change the port that the app binds to, set the `PORT` environment var when running the script.
The custom Express server is used to handle our sitemaps, as we have too many routes for Nuxt's
sitemap offering to handle reliably. During the build step (`npm run build`) initial sitemaps will
be generated. The Express server will then regenerate these every 30 minutes using the cdnjs API. A
log containing the outcome of the last generation in Express is available at `/sitemap-log.txt` on
the website.
## Linting
Our full set of tests for linting can be run at any time with:
```shell script
npm test
```
Included in this repository are an [eslint config file](.eslintrc.js) as well as a
[sass-lint config file](.sasslintrc) to help with ensuring a consistent style in the codebase for
the JS/Vue and SCSS used in the app.
To help enforce this, we use both eslint and sass-lint in our testing. To run eslint at any time,
which checks the code style of any JavaScript and Vue files, you can use:
```shell script
npm run test:eslint
```
eslint also provides automatic fixing capabilities, these can be run against the codebase with:
```shell script
npm run test:eslint:fix
```
Similarly, sass-lint can be run at any time to check the quality of all the SCSS files used in the
app, by running:
```shell script
npm run test:scss
```
A secondary package, sass-lint-auto-fix, is available to help with automatically fixing some of the
errors raised by sass-lint, which can be run with:
```shell script
npm run test:scss:fix
```
Like with `npm test`, which runs both eslint & sass-lint, a shorter package script is available to
automatically attempt to fix issues from both linting packages, which can be used by running:
```shell script
npm run test:fix
```
没有合适的资源?快使用搜索试试~ 我知道了~
static-website-master.zip
共141个文件
vue:38个
scss:36个
js:33个
需积分: 5 0 下载量 156 浏览量
2024-05-02
11:03:21
上传
评论
收藏 412KB ZIP 举报
温馨提示
static-website-master
资源推荐
资源详情
资源评论
收起资源包目录
static-website-master.zip (141个子文件)
.editorconfig 192B
.gitignore 85B
tylercaslin.jpg 6KB
ryankirkman.jpg 5KB
drewfreyling.jpg 5KB
svensauleau.jpg 5KB
mattcowley.jpg 4KB
alex.jpg 4KB
thomasdavis.jpg 4KB
nuxt.config.js 8KB
get_asset.js 5KB
get_library.js 3KB
routes.js 2KB
set_meta.js 2KB
sitemap.js 2KB
breadcrumbs.js 2KB
sponsors.js 2KB
app.js 2KB
images.js 2KB
library.js 1KB
members.js 1KB
.eslintrc.js 1KB
tutorial.js 1KB
tutorials.js 796B
get_tutorial.js 750B
static.js 705B
robots.js 699B
fonts.js 663B
whitelist.js 649B
website.js 599B
get_vulns.js 437B
format_units.js 389B
get_version.js 380B
utm.js 302B
inject-base.js 236B
config.js 199B
get_stats.js 179B
statuspage_status.js 177B
search_client.js 135B
truncate.js 133B
file_type.js 104B
vue-clipboard2.js 90B
package-lock.json 821KB
package.json 3KB
LICENSE 1KB
Makefile 239B
README.md 7KB
request-a-feature.md 1KB
report-a-bug.md 1KB
PULL_REQUEST_TEMPLATE.md 1KB
help.md 779B
.nvmrc 8B
banner.png 46KB
favicon.png 22KB
Procfile 19B
.sasslintrc 766B
_about.scss 7KB
_nav.scss 3KB
_library_page.scss 3KB
_api.scss 3KB
_primary.scss 2KB
_inline.scss 2KB
_library_card.scss 2KB
_footer.scss 1KB
style.scss 1KB
_corner.scss 1KB
_landing.scss 1KB
_json_example.scss 1KB
_banner.scss 1KB
_search.scss 1KB
_base.scss 1006B
_code.scss 947B
_tutorial_author.scss 822B
_breadcrumbs.scss 805B
_libraries-library-tutorials-tutorial.scss 788B
_variables.scss 786B
_library_hero.scss 751B
_transitions.scss 740B
_tutorial_list.scss 716B
_button.scss 705B
_mixins.scss 687B
_tutorial_hero.scss 630B
_index.scss 512B
_library_asset_buttons.scss 478B
_status_indicator.scss 383B
_transition_height.scss 328B
_libraries-library-tutorials.scss 269B
_animated_background.scss 242B
_icon.scss 121B
_libraries.scss 102B
_libraries-library-version.scss 95B
_libraries-library.scss 87B
bg.svg 18KB
mobile.svg 11KB
logo.svg 8KB
digitalocean.svg 6KB
algolia.svg 4KB
cloudflare.svg 4KB
statuspage.svg 4KB
uptimerobot.svg 3KB
共 141 条
- 1
- 2
资源评论
愿听风成曲
- 粉丝: 721
- 资源: 21
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 数电实验三:74LS151逻辑功能测试、74LS153逻辑功能测试、74LS153全加器、三输入多数表决电路
- jsp基于WEB的考务管理系统的设计与实现(源代码+lw).zip
- jsp基于WEB操作系统课程教学网站的设计与实现(源代码+lw).zip
- 数据库课程实践在IDEA上使用java语言采用JDBC技术连接Mysql数据库,实现购物系统.zip
- JSP基于SSH2的网络在线问答系统.zip
- JSP基于Iptables图形管理工具的设计与实现(源代码+lw).zip
- 数电实验二:74LS138功能测试、74LS138构成同相脉冲分配器、CC4511功能测试、CC4511与共阴极数码管组成的译码
- JSP基于Caché的实验室资源管理系统的设计(源代码+lw).zip
- JSP基于BS结构下的邮件系统设计开发(源代码+lw).zip
- 知识蒸馏-基于Pytorch实现的知识蒸馏+自监督学习算法训练-附项目源码+优质项目实战.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功