关于本站
本站建立的初衷作为自己前端知识系统结构化总结和平时收集的一些有用的资料,作为备忘。如果这里分享的东西刚好能帮助到访问网站的你,那么它建立的意义又多了一些。
下面是关于本站如何搭建起来的,以及使用到的一些技术和工具,以及部署方案的相关信息。
⚛️ 品牌相关
Logo
本站的 Logo SVG文件 由网站 Free Logo Maker 提供的 AI 自动生成技术创建。创意来源于本站域名 spacexcode.com 几个字母和首字母 S 的象形图标组建而成。
网页图标
图标 Favicon 文件由 ACONVERT.COM 网站提供的转化工具 svg -> favicon
生成而来。
物料
平时关注了一些品牌设计方面的内容,也尝试做了一些物料收集,去页面 👉 物料 查看
🛠 建站技术
本站由 Facebook 开源的静态网站生成器 Docusaurus 程序搭建而成。
在基础功能上添加了如下拓展功能:
- 文章底部显示评论功能,基于 giscus 搭建,参考教程:How to add Giscus comments to Docusaurus
- 文章底部显示微信公众号卡片,版权说明打赏组件,基于 Swizzle 特性对博客页面进行重新定义布局,参考 Swizzle。
- 首页 Banner 位置增加本地搜索功能,依赖 docusaurus-lunr-search 插件。
- 首页邮件订阅使用第三方服务 Formspree
前端组件库使用的是 Material UI,另用到的功能库包括:html-to-image、 css-doodle、react-hot-toast、 react-rough-notation、react-lottie、 d3、canvas-confetti
服务器
本站部署在私人阿里云服务器 ECS 上,远程通过 SSH 工具进行管理。Mac 端我使用 iTerms2,Windows 上使用 PuTTY ,推荐大家使用。
服务器基础配置:
- CPU&内存:1核(vCPU) 2 GiB
- 操作系统:CentOS 7.7 64位
- 公网带宽:1 Mbps
- 机房所在地:杭州
Web 服务器
果断采用轻量、高性能、高并发且安全可靠的 Nginx 服务器。
文件存储
为了缓解服务器压力(内存和速度),文章中的 图片和媒体文件存放在阿里云对象存储 OSS 上。图片使用开源自搭建的 Web 工具上传,其它使用 ossbrowser 客户端工具。
域名
本站域名 spacexcode.com
于 2021年01月购买自万网,已备案 苏ICP备16044739号-3。
这个域名很好记,可以由 spacex
+ code
或 space
+ xcode
组合记忆。很庆幸买到了这个域名。
SSL 证书
为了支持 HTTPS 访问,使用 DigiCert 免费版 SSL 证书,有效期一年,一年后需要重新申请生成新的证书部署到服务器。
因免费证书不支持二级域名,购买了 Rapid 普通版 DV SSL 证书,支持特定单个二级域名 visitor.spacexcode.com
CDN 加速
随着网站内容的增多,打包后的资源文件也越来越大。很多人反应网站的打开速度很慢。主机地址位于杭州,江浙这一代访问没啥问题,不能保证全国乃至全球的访问速度。 于是开启了阿里云的 CDN 服务。
部署方案
代码托管在 Github 上,为了使得国内服务器上拉代码速度快点,在 Gitee 上做了备份;目前还是采用的本地打包上传,服务端拉取,后面研究自动化部署方案。
📊 数据统计
本站使用 百度统计 作为数据统计和分析工具,数据维度分为:
- 日浏览量(PV)和访客数(UV)分时间段统计图
- 进入网站的百度搜索词
- 流量的来源网站统计,浏览量(PV)和占比
- 入口页面排行,浏览量(PV)和占比
- 受访页面排行,浏览量(PV)和占比
- 新老访客的占比,从浏览量、访客数、跳出率、平均访问时长、平均访问页数等维度分析
- 访客的年龄和地域分布
💰 网站运营
网站目前每天都有一定的稳定流量,已接入 Google AdSense。
本站接受广告投放,内容需要与互联网技术领域相关。本站目前流量有限,但网站专业性强,主要针对前端领域,分享一些优质的前端学习资源,在前端领域有一定的目标粉丝群体。 另外如果觉得写的好的内容对你有帮助,也可以在文章底部请作者喝杯咖啡 ☕。
同时感兴趣的朋友们可以在评论区留言和本站交换友链。