【不再更新】网页博客开荒日记

【不再更新】网页博客开荒日记

记录本网页的期望目标及开发日记。(已完结)

最终成果

20210827 Final Update

当前情况:基于icarus theme进行了自定义改造,效果如你所见。

需求进度:icarus太过牛逼,以至于最开始想的东西都差不多有了。

未来诉求:修改字体间隔等排版、加入about和py页面等。

开发方法:后续单独开发,单独写文章,不再继承到这篇文章里,Case Closed。

美好愿景

对自己与网站的理想期望。

网站结构

image

初期使用其他人的theme,中期熟悉上手web开发,最后希望自己实现(基于别人的内容进行改造也算自己实现)理想中的网站功能。


功能布局

开幕雷击:点击抽签/滑动砍断,鼠标触发对应交互后播放动画,然后才进入主页。

切换分栏:中间栏是当前栏目的文章,右侧栏是下一栏目的文章。点击切换后,右边栏的栏目进入中间栏,中间栏左侧退出,下一顺位的栏目进入右边栏。

左侧状态:和nexmoe等主题保持类似,个人头像+归档+关于等页面。

是否需要顶端状态栏?目前的设想里不需要。


自我目标

学习hexo、Travis CI、EJS和Github Page等工具。

熟悉Web开发。可以做不出上面的理想目标,但需要知道借来用的theme是怎么运转的。

把机核、Steam、奶牛关、日周报、DEMO等所有自己生产的赛博垃圾都搬运到这个网站上来。最低目标是一天一篇,在网页分层完善后需要高效率搬运。

最重要的是保持学习。

这个网站之所以存在,是为了自我记录,然后在记录的基础上继续学习。不能忘本,更要不断更新。


Deadline

年底搬运完所有过往内容,并有新的产出。



开发日记

2021.08.26

所有愿意搬的东西基本搬完了,整体布局也满意了。

之后会进行新内容生产和其他项目的开发,不在网页前端上花太多时间。

但兴趣还是有的;有空常回家看看www



2021.08.25

Steam评测搬运完毕,没搬的就不要了。

Cowlevel进度50%。

按照icarus的说法,可以修改全局布局,也可以修改单个md,还可以修改单个layout,太强了。

复制了个_config_post.yml,修改了下布局,直接就生效了。



2021.08.24

今天屁事儿比较多,只集中于搬运,之后看看如何修改布局。



2021.08.23

icarus成功上线,逼格一下子提升了不少。群众的智慧力量是真伟大,我自己写得多久能写到这个程度。

这里踩了个很蠢的坑。icarus是本地安装的,效果完全正常。但push到主干后,trivis ci部署时找不到layout,看了日志推测是theme文件夹没有推送。但这怎么可能呢?

上网找到好些类似问题,误以为是自己的情况,结果做了都没用。最后npm install并用指令改了config的theme,就好了。在这里发现了个点——

我自己写的时候,是写成Icarus;但人家官方document,给的是icarus。

@jskyzero补了一刀,yml对大小写敏感,说不定问题真的出在这里。

回退了npm install,把Icarus改成icarus,推送,然后……

部署成功了。:)



2021.08.20

Claudia弃用,最后发现了个star很高的主题,icarus。从名字上就非常喜欢,对这段古希腊神话故事相当熟悉,外加DJMAX里很喜欢的一首歌叫For the Icarus

clone到本地后一开,好家伙,DIY功能多到不行,直接能在_config_icarus.yml里改。虽然感觉运行速度好像变慢了(错觉?),但功能一下子cover了当初建站的大部分需求。

今天又倒腾上去了自己的赛博垃圾,下周深入研究下布局。



2021.08.19

构建失败的原因:Claudia依赖三个插件,其中一个是sass。这个插件npm安装会失败,使用淘宝镜像安装后本地可运行,但travis CI运行的npm ci指令会报错,然后npm install也报错,因为淘宝镜像的一个文件找不到。

要解决的思路有:

1.更新python环境。

2.试下本地安装后改路径。

3.补全那个淘宝镜像的文件。

最后选了4,换个主题。

用主题的原因就是方便可行,现在出了大事儿,完全不方便了,与其深陷泥潭,不如换个坑。

虽然踩坑踩到一半不踩了,最后也不知道具体过程和原因,非常可惜。但还是以“先跑起来“为第一目标。

之后会把sass具体构建过程单独写一篇blog,日后或许有一天会学到如何解决,但目前只是作为…忏悔录。



2021.08.18

从一大堆theme里最后选了Claudia,就是图长得好看。本地安装后一顿修改,改成了自己的形状,还把post格式更新了一次。本地运行完全没问题,美滋滋。

push到主干后,Travis CI构建失败。

明天和后天要解决的都是这个问题。



2021.08.17

查看了EJS和Stylus的内容。

EJS用的是Web开发中的组件化开发思路,不是一个html一个html去开发和切换,而是直接替换局部的模板。hexo使用的ejs模板下,md文件会根据source里的模板去渲染出对应的html页面。

Stylus还没怎么看,初步感觉就是个更方便的CSS。至于具体方便在什么地方,首先语法肉眼可见地变简单了,其他再看。

在工程里clone了Claudia theme,打算研究这个。明天的初步目标是先把模板从nexmoe换成Claudia。



2021.08.16

开发出现重大分歧:开始堆量 还是 继续弄格式。

nexmoe的基本框架和功能已经逐步了解,后续是更换主题?还是直接自己写?还是去找个靠谱的前人肩膀?


和@jskyzero大佬交流后,得知nexmoe没在themes文件夹里留下源文件的原因。

目前的大部分theme,是直接发的npm package,从服务器同步后一键安装。这种安装方法比较方便,但非常不利于本地修改,修改后和服务器的也对不上。


最后初步确定的学习路线:

  1. 了解Hexo的模板引擎EJS知识。
  2. 找个可以本地安装的theme,本地研究并尝试篡改。
  3. 内省自己对于HTML5、CSS和JavaScript的了解,为啥学个开头就扔了,罪该万死。


2021.08.13

按照Nexmoe的文档,启用了评论系统。先启用了Disqus,发现跑得通,又改成了DisqusJS。

后者包含前者的功能,但多了一个基础模式,可以在不能参与的状态下展示评论。

Disqus是一个专门提供网站留言服务的工具,“The internet’s favorite comment plug-in”,它的评论数据会汇总到自己的平台里。虽然感觉有点过于…open,但毕竟只是自己的网站,先用着再说。


整理了下文章,给每篇打上categories和tags。又熟悉了下yaml语法。

比如,冒号后需要一个空格再写东西,不然就会报错。

比如,多个tag之间用 - 分开,而不是(想当然的)分号。

用 hexo new “文章名”直接新建文章,不会自带这些参数和格式。不知道能不能修改默认配置,否则每次都要记得去复制一次。



2021.08.12

去选了下theme,因为想早点跑起来就没花太多时间,最后选了nexmoe。

原因:名字里有moe。

用npm安装了nexmoe,修改了_config.yml里的theme参数,直接就跑起来了,很快啊。

要修改nexmoe模板下的主页外观,需要修改的是_config.nexmoe.yml。改了下头像和外链,瞬间看着更像自己的(而不是从大佬的)网站了。


在制作朋友页面和关于页面时的心得:

title和date是啥不重要,没人看得到。

layout都用的py,这样就不会和文章走一套模板。

permalink永久链接是最重要的,必须对上号,不然无法被索引到。

朋友页面复制代码要记得清除格式,不然会直接以代码形式进入文章,太蠢了(自己)。


找了个叫img-hut的在线图库,以后把图传到这里再复制url过去。

为啥选这个图库:居然能看色图,我震撼。



2021.8.11

很快啊,一套乱打直接上线了。

目前算是搭建好了一套上线流程,已经可以开始批量搬运了。虽然过程踩了一些坑就是。


上线流程一览:本地hexo文件夹修改 → Github推送到主干 → Travis CI进行build → 打开url去验收。

官方文档地址:https://hexo.io/zh-cn/docs/github-pages

个人理解是:hexo文件夹就是Github本地库,修改后推送到主干。TravisCI可以访问Github仓库,每次有推送到主干,都会触发一次根据.travis.yml来的构建,构建完毕后推送到gh-pages分支。根据设置,Github Page读的是gh-pages分支,因此网页成功update。

这个Github库由于接入了Github Page,本身就是网站的源文件夹。在hexo文件还没上传时,就会根据README生成一个用户名.github.io的网页。

看着非常简单,实际上确实很简单。本蠢人做的时候遇到了些未解之谜,还好最后都解了。


其谜一:Travis CI无法保存token为环境变量

官方文档里的GH_TOKEN直接复制的话会把代码格式也复制进去,虽然看着没差别,但实际有差别,刷新下自己手打一次就好了。


其谜二:推送了.travis.yml后,Travis CI并没有开始运行

官方文档只写了“Travis CI【应该】会自动开始运行”,但并没写为啥会运行、不运行该咋办、报错了该咋办等。于是开始借助第三方的力量。

查阅了评论区,发现个非常搞的问题。官方文档里写的主干是master,实际应该写main。

同时添加了一行 $ deploy: target: gh-pages。

对.travis.yml做了以上两点修改,然后就跑起来了。


其谜三:Travis CI开始运行了,但报错

上路即爆胎。

谷歌了下报错信息,Node.js版本不够,有个功能起不来。

要么去更新Node.js,要么修改_config.yml,把 $ highlight: enable 从true改成false。

像我这么勤劳的人,肯定是……选后者了。


Github Pages的部署分支找不到gh-pages

我好像也没做啥,只能说要先确认Travis CI确实跑起来了,不然不会有gh-pages;然后就,多刷新吧。



2021.8.10

决定先用hexo,安装对应工具,查看文档做做工作。


前提应用程序:Git 和Node.js,后者是一个Javascript运行环境。

通过cmd使用npm安装了hexo,之后就能直接在cmd里使用各种各样的hexo指令了。

虽然有点哈批,但要记得修改hexo路径,不然会在C盘用户名文件夹里初始化,非常蠢(指自己)


前期流程可以按照官方文档来,地址: https://hexo.io/zh-cn/docs/configuration 。但一些地方比较含糊,可以勤奋使用hexo server然后去 http://localhost:4000 里查看效果,或者直接报错跑不起来

悄悄mark了下迁移,其实除去hexo,对Jekyll也非常感兴趣。等hexo玩转了就试试Jekyll


2021.8.9

打算弄个自己的网站,询问@jskyzero大佬。

作者

UyNad

发布于

2021-08-27

更新于

2024-08-07

许可协议

CC BY-NC-SA 4.0

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×