静态网站

背景Q1做了个小项目，自动化输出一份文档，把我司某个用户社区的功能点标记出来，并标上图中哪块数据用到哪个接口。完成后输出的方案是做成静态网站 部署到线上。因为我这边是前端，只能拿到后端接口，可能还需要后端或者c端或者其他端补充文档，因此想实现一个，各端同学都方便修改的方案，最后敲定，使用markdown编辑，只需push到gitlab，ci就会自动构建，跑vuepress build，生成静态网站，部署到服务器。2. 实现方式初始化项目-》写好yml->在gitlab配置好ci-》完成我的docker（我的docker其实只是初始化了node的环境）（docker的实现在另一个文章补充）-》push代码到gitlab->gitlab ci自动构建 项目 发布dist下面的文件到服务器-》访问 www.xxx.com/xxx/xx/xx/index.html -》done init npm init npm install vuepress -s-d 目录结构 .yml内容3. 踩到的坑A 本地调试 vuepress dev docs 报错 getReshandler。。。(忘记具体说啥了) 解决过程：statckoverflow搜索 解决方案： 安装 “webpack-dev-middleware”: “3.6.0"B本地localhost:8080 调试的时候没毛病部署到测试服务器 通过 www.xxx.com/xxx/xx/xx/index.html访问的时候 先跳正常页面 然后出现404一脸懵逼找了半天解决方案。把stackoverflow,sf，google翻了一遍发现没找到解决方案心态很崩，甚至想换个工具。然后抱着试一试的心态自己思考了下原因。打印了router 发现是path对应的component是没有的本地不会有这个情况于是乎，想了个骚操作，把to.path对应的跳转全都redirect到/下这下会出现一个问题 www.xxx.com/xxx/xx/xx/index.html刷新会跳到 www.xxx.com这不是我想哟的结果 我肯定是想要正常的访问我的页面突然灵光一现官网的配置有个base选项链接描述天哪因为我一开始不是挂在git上所以一直没注意…现在我修改了下好了现在可以正常访问了 C 因为静态资源上了cdn 所以 html的访问域名是 www.aa.com ，静态资源的路径是 www.bb.com，因此不能用相对路径，否则根本访问不到静态资源 解决方案：vuepress支扩展webpack配置配好后打包的dist对应的引用资源的前缀就会变成publicpath对应的啦~D如果实现 www.xxx.com/xxx/xx/xx/index.html 然后直接通过charles代理 在本地调试而不是loaclhost：8080的方式 好像不行因dev 命令没生成 dist文件夹，npm run dev docs之后 引用了 app.js等文件 而不是build 之后那些形式。。不知道怎么写charles规则。（如果有人懂得话欢迎指导一下~~~）TBC。。。欢迎纠正

0 前言本文并不是从 0 开始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量节省项目搭建时间，直接得到一个最简单的博客模版，这个模板的缺点是功能少，但是反过来说优点是有较高的自由度。根据下面整个流程做好的静态博客大概长这个样：https://ssshooter.com/tag/gatsby涉及到的前置知识：JavaScriptReactgraphQL（次要，即时上手也基本能看懂）我从最简单的博客模板开始添加功能的原因，就是可以让自己更熟悉整个博客的构造，自己可以随心所欲地添加功能，这才是真正的自己的博客。以前用过 Wordpress 和 Hexo，可能就是因为下载下来模版就太完善了，根本不想自己研究里面的实现，然后模板不加修改样式就与其他人一摸一样，变得很没特色，所以我也失去的更新的欲望。所以自己定值博客，或许可以让自己坚持更新下去。整个流程最主要是前面 5 步，后面的 3 步都是非必要的，其他附加功能后续可能还会有更新。这篇文章的作用是一个导航，下面只会简单概括文章内容，详细内容请点全文链接。你可以根据你的需要一步一步进行，也可以跳过熟悉的步骤。PS. 本教程涉及到的服务都是免费的，穷苦学生党莫慌（不过域名还是没有免费的）1 关键文件全文链接这一部分主要介绍模板的下载、项目结构及其一些关键文件。主要会提到 gatsby-node.js（页面生成函数所在文件）、/src/templates/blog-post.js（生成页面所用模板）以及 gatsby-config.js（Gatsby 的配置文件）。2 实现分页全文链接现成模板缺少博客最重要的功能——分页。因为分页实现十分重要，并且可以借此理解页面生成原理，所以用自己实现分页来入门 Gatsby 我觉得是个不错的选择。实现的关键在于模板文件的修改和 graphQL 查询的编写。（本项目所需的 graphQL 要求不高，但是对此感兴趣的话可以深入了解一下这个查询语言，中文文档在此）3 样式调整全文链接比较简单的一节，包括修复代码高亮和覆盖主题样式两部分。注意一下使用全局 CSS 的 bug 就 OK 了。4 标签系统全文链接标签系统实现了标签汇总页和各个标签的文章列表页，是 graphQL 查询实践的加强版，原理跟分页是一样的，不过复杂一点看起来有一丁点望而生畏。5 博客上线全文链接网站上线的步骤，包括把项目部署到 netlify 和自定义域名设置相关问题与解释。6 评论系统全文链接首先是因为几个出色的社会化评论服务网站都已经被墙了，然后是自己有一点对数据的占有欲，所以这一节甚至要自己搞一个评论系统。不过借助现成的 staticman，这一步也不会太麻烦。7 文章目录全文链接良好的文章页面必不可少地需要一个文章导航，对不起！由于难度的误判，这个功能虽然来晚了，但是绝对不会缺席！使用 gatsby-transformer-remark 轻松解决问题～EX 使用语雀发布到博客全文链接比较好玩的一节，主要好玩在使用 GitHub 接口提交文件，感觉打开了新世界的大门。配合上语雀的文章发布推送绝配，于是有了这么个功能专题。未来本系列依然会继续更新，UI 肯定会继续调整，功能肯定会增加。想要坚持写 blog，要先喜欢自己的 blog，用心添加新功能吧！