
之前连载了两篇文章,为啥没动静了呢,因为我忙着去弄网站了。。。
前阵子花了半个月的时间,利用 Strapi+Gatsby 做了一个全新的个人网站。
做这个网站的初衷就是市面上的 CMS 和主题都不能满足我的需求,我想要展示更多的内容类型,更符合我想法的设计。
于是我选择了 Headless CMS 作为后端和内容源。这种 CMS 只提供接口和数据,你需要自己把数据获取到并自己决定如何展示。数据库是 Postgresql ,不过除了最开始的创建数据库、授权用户,后面我再没管过。
因为更新频率可能是两周一次,所以我选择了 Gatsby 这种静态网站方案。
设计完全是我自己搞定的,因为本来就是设计师。其实开发的成品跟设计稿也是有些偏差的,开发中也会不断调整设计。首页的小动效也是自己想的。
内容分为三块:文章、摄影和视频。其中视频支持切换视频源。(但是 YouTube 源好像有问题,待修复。西瓜和 B 站是好的)
网站支持响应式布局,会自动根据系统主题切换明暗,支持 RSS ,支持搜索。
另外如果你网络状况良好的话(我是说在境外,或者梯子够好。备案通过后会给国内加 CDN ),会感到网站速度非常快,极其块,秒开。
目前还有一些设计细节需要优化,“关于本站”放了链接但还没开发。但基本的框架和内容都具备了。
本来正式发布是要等备案通过,所以目前是禁止解析境内请求的。不过既然你能看到这篇帖子,说明你应该能正常访问我的网站。
国内 ip 是打不开的!需要用代理
做完以后还是挺有成就感的,因为这是我开发的第一个网站。后面也会把我设计、开发这个网站的过程写成文章发表在上面。
说了这么多放出链接:https://darmau.design
希望能得到各位的反馈和建议。谢谢!
1 chihiro2014 Oct 8, 2022 访问不了=。=? |
2 me221 Oct 8, 2022 在 1080 屏幕上有横向滚动条 |
3 dandycheung Oct 8, 2022 via Android 很好! |
4 leedarmau OP |
5 keepeye Oct 8, 2022 还阔以哦 |
6 pendulum Oct 8, 2022 不错,想扒 |
7 leedarmau/a> OP @pendulum 那就给个 star 吧 https://github.com/Darmau/darmau-gatsby @me221 应该跟屏幕没关系吧。我知道在移动端点击搜索再切回来会有滚动条,缩一下就可以了。暂时懒得修这个。 |
8 wakarimasen Oct 8, 2022 via Android 简体中文博客拒绝大陆请求是什么用意 |
10 p8YFk4f3E8SJ3aEv Oct 8, 2022 确实有横向滚动条,是你的 width: 100vw;属性造成的,原因是有个纵向滚动条占用了宽度,所以实际视窗宽度不足 100vw |
12 hhacker Oct 8, 2022 不要备案 不要备案 不要备案 |
16 xilou31 Oct 8, 2022 另外做的确实挺有意思的。 |
17 CSGO Oct 8, 2022 牛蛙!我也花了一周学了标注语言 wangyifang.com 然后到了 js 就看不下去了。 |
18 C64NRD Oct 8, 2022 清爽干净,操作丝滑,爱了爱了 |
19 296727 Oct 8, 2022 @leedarmau windows 上也有滚动条,应该是有个地方多了 index-module--cover-block--rECgE width 100vw ,别用 vw ,用 100%就可以了 |
20 Rache1 Oct 8, 2022 让我见识到了 border-image-slice 这个属性 |
21 danc Oct 8, 2022 首页图片有点糊,是压缩太过了吗? |
22 cvooc Oct 8, 2022 很棒, 这个呼吸动画相当赞了 |
24 silencil Oct 8, 2022 很漂亮 |
25 protonme Oct 8, 2022 Developer 部分可以设置一下 CSS 字体?并且空格好像不等宽? |
26 rabsicBot Oct 8, 2022 Star 下~~回头考虑迁移下 Hexo 的 |
27 silencil Oct 8, 2022 收藏了,提个意见,我点了下视频的封面图,没法点进去,建议图也做成个链接。 |
28 kinboy Oct 8, 2022 via Android 这个 403 果然不一般 |
29 KMpAn8Obw1QhPoEP Oct 8, 2022 via Android 不愧是设计师 |
30 gimp Oct 8, 2022 看着真不错 |
31 kongkx Oct 8, 2022 via iPhone 访问不了啊 |
32 cssk Oct 8, 2022 via iPhone 65-70 分 |
33 xiaoluoboding Oct 8, 2022 好像 Header Menu 没有居中,额,有点点别扭 |
34 shenqi Oct 8, 2022 让我想起可可托海的牧羊人 |
36 haozi3156666 Oct 8, 2022 看起来不错 |
37 eycode Oct 8, 2022 比较喜欢这段话:“我就是个普通人,没啥能力目光也短浅。我只想好好生活,那些虚幻的未来对我来说没有意义”,我也是回家后才慢慢明白 |
38 shenqi Oct 8, 2022 设计师的设计就是有点牛。 |
39 witcat Oct 8, 2022 牛 前端学了多久啊 |
41 gps949 Oct 8, 2022 照片拍得不错 |
42 Tanix2 Oct 8, 2022 右边的心跳真的很有感觉! |
43 laolaowang Oct 8, 2022 不错,和一些人相反,我不喜欢那个“呼吸动画” |
44 makelove Oct 8, 2022 作为程序员身份 90 分 作为设计师身份 50 分 |
45 KillPaul Oct 8, 2022 同为设计师,然而我还在学 CSS 基础啊哈哈哈哈.... 老粉了,立马 rss 订阅一个。坐等大佬的网站开发教程~ 另外提一个小建议,希望摄影作品可以点开看全屏大图~ |
46 swirling Oct 8, 2022 上方没居中对齐 首页右边那个块一直动和左边没对齐 然后左边 I create and build things on screen 右边是 I create and build things for screen 还有就是 Header 上的对齐和 内容部分的对齐不太一致 (强迫症 |
47 cais Oct 8, 2022 建议文章和图片模块里 图片也支持点击事件 |
48 falost Oct 8, 2022 过来人告诉你 备案了也不能做小程序 这属于未开放类目 |
49 wzdsfl Oct 8, 2022 https://beta.darmau.design/article/qinghai-galaxy-3 这个页面里有 <br> 标签没渲染哦 |
50 LavaC Oct 8, 2022 我 7 月 20 开始做的博客每隔几天写几行代码,以这进度写到年末都不一定能把想要的功能实现完,看到 op 每天熬夜肝,感到很惭愧。 |
51 Innovatino Oct 8, 2022 挺好的,不过感觉好像没啥设计 最好搞点个人风格进来 |
52 LavaC Oct 8, 2022 之前在 B 站看过另一位设计师的做法,借用现成游戏引擎来实现页面,把个人网站当游戏做,也是个降低前端代码学习难度的法子。 |
53 leedarmau OP @makelove 有没可能是程序员分不够实现不了一些想法 @cais 可以有 @Innovatino 明年大改版再考虑吧。之前弄了好几天设计,后来觉得应该先上线再优化。而且内容为主的话,不太好搞太个性的风格。比如不同视频网站的视频卡片基本都差不多。 @LavaC 那不是更难了吗?我这个说实话就是取数据,展示数据。没啥难度。 |
54 allgy Oct 8, 2022 非设计观点:杂,图片可以弄成影集,不要平铺 |
55 CHXX Oct 8, 2022 页面过于杂乱,不够简洁。https://dribbble.com/search/blog |
56 Arrowing Oct 8, 2022 整体色彩搭配比较和谐。 我有强迫症,导航栏的标题下划线没居中! |
57 vivipure Oct 8, 2022 顶部导航应该高亮当前路由 |
58 duan602728596 Oct 8, 2022 图片何不上 webp 和 avif ? |
59 KevinDo2 Oct 8, 2022 难受,导航栏 hover 出现的下划线不是和文字居中对齐的。。 如果是特意设计的左对齐,那有感觉长度太短。 文章仅支持点击标题,不太符合第一直觉 |
60 thulof Oct 8, 2022 性能很好啊,Lighthouse 94 分,应该是专门做了性能优化? |
61 dongtingyue Oct 8, 2022 ???我访问的为啥头部一大块是广告 |
62 AllenCai Oct 8, 2022 作为一个没有艺术细胞的前端, 我觉得挺不错的 |
63 camillo Oct 8, 2022 搜索框的内阴影感觉可以再优化下 有点 too much |
64 anychuan Oct 8, 2022 网站没法留言,这里说一下,感觉分享深圳回成都的文章,对我个人很有参考意义 |
65 fkdtz Oct 8, 2022 整挺好 |
66 GeekJason Oct 8, 2022 很好看! |
67 ch3nOr Oct 8, 2022 挺好看的,如果有个夜间模式,那就更加酷了 |
68 leedarmau OP |
69 sarlanori Oct 8, 2022 via Android 博客到没啥感觉,照片是拍的真好 |
70 Donahue Oct 8, 2022 酷 好看 有设计感 |
71 ahxsong Oct 8, 2022 via iPhone 很赞 |
72 Vesper Oct 8, 2022 不 |
73 syfless Oct 8, 2022 safari 下有内存泄漏问题,一开网站风扇狂转 |
74 leedarmau OP @KevinDo2 @Arrowing 查到原因了。设置了 letter-spacing ,但是这个 space 是加在每个字的后面,导致右边多出来了一个空隙 @duan602728596 已上 @syfless 没有遇到这种情况 |
75 littlewing Oct 8, 2022 “视频” 给个建议,点击图片也能跳转 |
76 littlewing Oct 8, 2022 “配乐:RICHNOMADIC - Dirty Snow ,购于网易云” 购于网易云没必要,非商业用途注明一下这是什么歌就行了,商业用途的话,你这网易云购买的也不是商业授权 |
77 niuoh Oct 8, 2022 体验挺不错 提交一个优化建议 首页 可以鼠标下滑的时候自动慢慢滑动到对应的栏目增加一点丝滑感 |
78 niuoh Oct 8, 2022 看的出来网站各方面都用了很多心思 之前我写尝试过些自己的记事博客但最终没有坚持下去 现在虽然初步实现了时间自由但也没有心思做这个事了 希望楼主坚持吧 |
79 leedarmau OP |
80 wanacry Oct 8, 2022 没啥卵用,还是内容为王 |
81 litesoar Oct 9, 2022 简洁美观。 |
82 youshh Oct 9, 2022 很赞呀~ |
83 ZeroDu Oct 9, 2022 摄影详情页,可以加个左右切图片 |
84 Eagleyes Oct 9, 2022 摄影作品不错,非常喜欢那篇《来了不是深圳人,拜拜了深圳》 |
85 xzh654321 Oct 9, 2022 内容不错,设计需加强,不过能做出来就是成功 |
86 chuyik Oct 9, 2022 看了几篇深圳的文章,有理有据 |
87 TomPig0216 Oct 9, 2022 看起来真的不错 |
89 tyrad Oct 9, 2022 访问速度挺不错 |
90 someonedeng Oct 9, 2022 不愧是设计师,好看 |
92 criag Oct 9, 2022 同为设计师会点前端的来点赞,很棒 |
93 Prideeeeee Oct 9, 2022 棒极了 |
94 DuDuDu0o0 Oct 10, 2022 真棒 |
95 DuDuDu0o0 Oct 10, 2022 个人感觉字体可能稍微小了点 |
96 alw Oct 12, 2022 妈的,这设计师 写程序的能力似乎比我还强(狗头 我也想多学些设计。 |
97 Daniel17 Oct 12, 2022 很棒! |
98 Vipcw95 Oct 14, 2022 坏了,前端感觉到一丝危机 |
99 laravel Oct 14, 2022 设计学前端优势非常大 |