Tech

Origin

by 憨火火Sep 15th, 2023

  

  想睡觉,但是回到家的第一顿晚饭吃得久违地多,撑死了,睡不着,所以有了这篇记述。

  

Origin

  

  在这篇文章里好好说一说本站的缘起,近期计划,和未来吧。最后再记录一下从零开始建设本站的全流程,也算一点记录和分享了。

  


  其实几年前就想要建设一个类似于现在这样的个人网站,但是不知道为什么,自己一直没有着手开始实施。可能是太陷于自己的过去,一直享受着在和自己内耗,也有可能是一直在玩overwatch,还有可能是当时各种应试和逃避搞得自己身心俱疲......

  但不管怎么样,这些乱七八糟的事情现在都过去了。到了最近几个月,生活可能有一些插曲和波澜,但总算是重新开始了。在China Telecom实习的一个月里,一直在疯狂地想利用好空余的时间去学习一些本来就一直想去学但从没有进行过的事情,那几周,早上看完了现代计算机图形学入门游戏引擎导论的课程,也顺手学了一下git,中午和部门里的Boss畅谈现实与理想,下午完成一些工作上的杂事再顺便开开例会,回家的路上不是自己开车回来的话,就挤在地铁和公交车上拿着手机一点点看有关Gatsby的网站建设,最后回到家里的时候,想做一些其他的事情,但却总是已经累得倒头就睡。我从未想过,放弃了心中的很多一直以来的执念,会让我如此地充实和自由(这一点也许可能要再写一篇文字来分析了(可能的传送门),这里就不岔开话题了)。因此,my.horizon4u.red应运而生。也许这个网站其实并没有什么技术含量,可能我作为一个初中生的时候就能像现在这样的流程自己搭建起来,但是对它的现状,我还是挺满足的。

  近期可能会不定期地写一些内心所想的事情,或者是一些非要求类课程学习领域的知识的总结和分享,然后就很普通地发在这个站上吧。也许我最想让谁看到的那个人根本不会看到这些(应该选域名的时候.red就是因为redrum),但是在这个网站上发一些东西,就像暂时逃出了那座原本已经禁锢我十八年的监狱,不一定要大张旗鼓,义愤填膺,只是觉得自己一个人找了面空旷的白墙随便写写画画,对着空气(或者是无数网络爬虫!)说一些自己一直想整理下来的东西,感觉也非常不错。嗯,最近的生活总有种让我重获新生的感觉,让我的表达欲也异常的强嗯。也许以后再回来看看这些文章,不会再像之前那样觉得自己做得有多么多么地傻了吧,也许就像有一句话所说的那样,“在你今天看来很可能只是普通的一天,但是在之后的日子里,这样平凡而美好的一天很难再有了。”

  后续的几个月里,不知道本站会不会受re_undi一直说的“网络白名单”的影响而导致无法正常访问。但是,那又怎么样呢?

  :D

  


  

  接下来便是对本站建设周期的总结,及其中遇到的一些困难的整理,更多地为自己写一下,然后顺便发出来:

  


  

Part 1:从零开始了解Gatsby和Html5+css语言(8月18日开始)

  这一个Part的话其实非常轻松和简单,当我砍掉生活中原本实我生活主体的overwatch后,感觉每天都很轻松很愉悦,然后利用空闲出来的原本大把的时间(可能是玩游戏或者是看视频的时间),就像看娱乐视频那样,每天轻松地一点点看完了Gatsbyhtml5+css的基础教程。

  (这里提一句,感觉the net ninja的声音确实听起来比较舒服,过程中也相当于练习了很多听力!)

  看这些教学视频的时候其实根本没想过要完全熟练掌握开发web前端的很多技术,就是当作茶余饭后的小视频在研究。然后当我看得差不多了,感觉大致懂了一些基础的逻辑和语法之后,便开始着手去实际实现整个网站的搭建。

  


  

Part 2: 从零开始搭建本地网站并进行初步的测试调试(9月6日开始)

  这里具体写一下利用vsc进行搭建的过程中遇到的各种问题:

  首先根据官方的教程一步步输入指令。

  


  

🚀 Quick start

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying the hello-world starter.

    # create a new Gatsby site using the hello-world starter
    gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
    
  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd my-hello-world-starter/
    gatsby develop
    
  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open the my-hello-world-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

  


  

  但是在家里的网络环境中配置是出现了一个问题,就是当在命令行中执行“gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world” 语句的时候,下载sharp包会因为网络连接的原因报错。这里的解决方法是先利用node.js下载npm和cnpm,利用淘宝镜像下载sharp包,然后在gatsby new命令语句执行的时候,将sharp包快速地放在本地克隆网页的文件夹中产生的“node_module”文件夹中,选择替换重复的文件,应该就能略微解决无法通过npm下载sharp包的问题了。但是在学校网络环境下gatsby new命令并不会出现这样的问题,可能之后还要研究一下这方面底层的逻辑。

  然后就根据上文提到的视频教程,一步步搭建一个测试的网站,从学习到模仿,就慢慢会了很多东西。

  接着就可以~~尽情发挥你的想象从零开始搭建一个网站(x)~~或者基于国外大佬的模板进行自己的自定义调试,选一个自己喜欢的模板就可以了。这时候你应该对于模板里的所有文件和配置文件都有了对应功能的认知,这样的话就可以基于别人的开源成果尽情发挥自己的想象了。我这里是用了Tyra的模板,因为感觉很好看。

  


  

Part 3: 实际的部署和测调试阶段(9月10日开始)

  由于很多gatsby的模板都是几年前用gatsby2.x写的,因此并不能完全适用于现在gatsby5.x的环境,对于package.json中的各个版本的依赖包需要做一些微调(因为像vercel,gatsby cloud这样的网站托管平台在build的时候已经不支持小于gatsby2.4版本的文件了),所以可能在执行完gatsby develop之后还会报一大堆错误,但是感觉问题不大,都是新版本之后对旧版本的一些语法修改的报错,能用就行,懒得去自己改写新语法了

  域名购买和cloudflare使用见链接

  同时,受到了frog的邀请,写入了Waline插件作为评论区的功能,需要用到LeanCloud作为评论数据的管理。

  到这里,一个基础的blog功能基本都有了,而且页面布局也挺好看的。所以我觉得这个网站的开发阶段应该告一段落了,不用再在这开发上面花费更多的时间和精力了。

  


  

Part 4: 后期的更新与维护(9月16日开始)

  在Cloudflare进行流量监控的时候,发现有很多机器人的访问流量(也许),下一步可能要进行一些这方面的学习探讨,搞懂到底怎么维护下去,同时随性地更新一些文章√。

  


  

结语:

  现在有一种很不错的感觉,以后应该还会去基于兴趣地模仿其他人做一些小的插件和应用,感觉很有意思。