当设计师学了前端……看看我这个博客什么水平

[leedarmau]

之前连载了两篇文章，为啥没动静了呢，因为我忙着去弄网站了。。。

前阵子花了半个月的时间，利用 Strapi+Gatsby 做了一个全新的个人网站。

做这个网站的初衷就是市面上的 CMS 和主题都不能满足我的需求，我想要展示更多的内容类型，更符合我想法的设计。

于是我选择了 Headless CMS 作为后端和内容源。这种 CMS 只提供接口和数据，你需要自己把数据获取到并自己决定如何展示。数据库是 Postgresql ，不过除了最开始的创建数据库、授权用户，后面我再没管过。

因为更新频率可能是两周一次，所以我选择了 Gatsby 这种静态网站方案。

设计完全是我自己搞定的，因为本来就是设计师。其实开发的成品跟设计稿也是有些偏差的，开发中也会不断调整设计。首页的小动效也是自己想的。

内容分为三块：文章、摄影和视频。其中视频支持切换视频源。（但是 YouTube 源好像有问题，待修复。西瓜和 B 站是好的）

网站支持响应式布局，会自动根据系统主题切换明暗，支持 RSS ，支持搜索。

另外如果你网络状况良好的话（我是说在境外，或者梯子够好。备案通过后会给国内加 CDN ），会感到网站速度非常快，极其块，秒开。

目前还有一些设计细节需要优化，“关于本站”放了链接但还没开发。但基本的框架和内容都具备了。

本来正式发布是要等备案通过，所以目前是禁止解析境内请求的。不过既然你能看到这篇帖子，说明你应该能正常访问我的网站。

国内 ip 是打不开的！需要用代理

做完以后还是挺有成就感的，因为这是我开发的第一个网站。后面也会把我设计、开发这个网站的过程写成文章发表在上面。

说了这么多放出链接：https://darmau.design

希望能得到各位的反馈和建议。谢谢！

关于大陆用户请访问这个链接 https://beta.darmau.com

主域名还在备案，就停止对大陆访问的解析了，境外没问题。

至于为什么要备案，因为后面还想弄个小程序版，必须得是备案域名。另外 Gatsby Cloud 速度虽然还行，但可能还是有不稳定，所以想加个 CDN 。

手滑打错了，上面的地址应该是 https://beta.darmau.design

备案完成，beta 子域名停止访问。境内主域名将会解析到阿里云 CDN 。
另外又更新了一大波优化。

[chihiro2014]

访问不了=。=？

[me221]

在 1080 屏幕上有横向滚动条

[dandycheung]

很好！

[leedarmau]

@chihiro2014 …… 我临时把大陆请求打开了，现在应该可以了。

访问不了是因为你的代理不够智能，没有把我的域名当成境外 IP 。。。

[keepeye]

还阔以哦

[pendulum]

不错，想扒

[leedarmau]

@pendulum 那就给个 star 吧 https://github.com/Darmau/darmau-gatsby

@me221 应该跟屏幕没关系吧。我知道在移动端点击搜索再切回来会有滚动条，缩一下就可以了。暂时懒得修这个。

[wakarimasen]

简体中文博客拒绝大陆请求是什么用意

[leedarmau]

@angrylid ……备案

[p8YFk4f3E8SJ3aEv]

确实有横向滚动条，是你的 width: 100vw;属性造成的，原因是有个纵向滚动条占用了宽度，所以实际视窗宽度不足 100vw

[xilou31]

@leedarmau #9 跟备案有啥关系，如果你的境外服务器的话，根本就不需要备案吧。

[hhacker]

不要备案
不要备案
不要备案

[leedarmau]

@xilou31 可我想保证大陆访问速度啊

@f056917 的确是那个搜索的锅

[hhacker]

@xilou31 OP 设置了 DNS 区域解析, 等备案了就能解析到国内服务器上

[leedarmau]

@hhacker 后面还想弄个小程序，域名必须备案

[xilou31]

另外做的确实挺有意思的。

[CSGO]

牛蛙！我也花了一周学了标注语言 wangyifang.com 然后到了 js 就看不下去了。

[xiaoshan5733]

清爽干净，操作丝滑，爱了爱了

[296727]

@leedarmau windows 上也有滚动条，应该是有个地方多了
index-module--cover-block--rECgE width 100vw ，别用 vw ，用 100%就可以了

[Rache1]

让我见识到了 border-image-slice 这个属性 👍

[danc]

首页图片有点糊，是压缩太过了吗？

[cvooc]

很棒, 这个呼吸动画相当赞了

[leedarmau]

@296727
@f056917
@me221 已修复

[silencil]

很漂亮

[protonme]

Developer 部分可以设置一下 CSS 字体？并且空格好像不等宽？

[rabsicBot]

Star 下~~回头考虑迁移下 Hexo 的

[silencil]

收藏了，提个意见，我点了下视频的封面图，没法点进去，建议图也做成个链接。

[kinboy]

这个 403 果然不一般

[KMpAn8Obw1QhPoEP]

不愧是设计师

[gimp]

看着真不错 👍

[kongkx]

访问不了啊

[cssk]

65-70 分

[xiaoluoboding]

好像 Header Menu 没有居中，额，有点点别扭

[shenqi]

让我想起可可托海的牧羊人

[leedarmau]

@kinboy
@kongkx 看 append

[haozi3156666]

看起来不错

[eycode]

比较喜欢这段话：“我就是个普通人，没啥能力目光也短浅。我只想好好生活，那些虚幻的未来对我来说没有意义”，我也是回家后才慢慢明白

[shenqi]

设计师的设计就是有点牛。

[witcat]

牛 前端学了多久啊

[leedarmau]

@witcat 俩月

[gps949]

照片拍得不错👍🏻

[Tanix2]

右边的心跳真的很有感觉!

[laolaowang]

不错，和一些人相反，我不喜欢那个“呼吸动画”

[makelove]

作为程序员身份 90 分
作为设计师身份 50 分

[KillPaul]

同为设计师，然而我还在学 CSS 基础啊哈哈哈哈.... 老粉了，立马 rss 订阅一个。坐等大佬的网站开发教程~
另外提一个小建议，希望摄影作品可以点开看全屏大图~

[swirling]

上方没居中对齐
首页右边那个块一直动和左边没对齐
然后左边 I create and build things on screen 右边是 I create and build things for screen
还有就是 Header 上的对齐和 内容部分的对齐不太一致
(强迫症

[cais]

建议文章和图片模块里 图片也支持点击事件

[falost]

过来人告诉你 备案了也不能做小程序 这属于未开放类目

[wzdsfl]

https://beta.darmau.design/article/qinghai-galaxy-3
这个页面里有 <br> 标签没渲染哦

[LavaC]

我 7 月 20 开始做的博客每隔几天写几行代码，以这进度写到年末都不一定能把想要的功能实现完，看到 op 每天熬夜肝，感到很惭愧。

[Innovatino]

挺好的，不过感觉好像没啥设计😂

最好搞点个人风格进来

[LavaC]

之前在 B 站看过另一位设计师的做法，借用现成游戏引擎来实现页面，把个人网站当游戏做，也是个降低前端代码学习难度的法子。

[leedarmau]

@makelove 有没有可能是程序员分不够实现不了一些想法

@cais 可以有

@Innovatino 明年大改版再考虑吧。之前弄了好几天设计，后来觉得应该先上线再优化。而且内容为主的话，不太好搞太个性的风格。比如不同视频网站的视频卡片基本都差不多。

@LavaC 那不是更难了吗？我这个说实话就是取数据，展示数据。没啥难度。

[allgy]

非设计观点：杂，图片可以弄成影集，不要平铺

[CHXX]

页面过于杂乱，不够简洁。https://dribbble.com/search/blog

[Arrowing]

整体色彩搭配比较和谐。
我有强迫症，导航栏的标题下划线没居中！

[vivipure]

顶部导航应该高亮当前路由

[duan602728596]

图片何不上 webp 和 avif ？

[KevinDo2]

难受，导航栏 hover 出现的下划线不是和文字居中对齐的。。
如果是特意设计的左对齐，那有感觉长度太短。
文章仅支持点击标题，不太符合第一直觉

[thulof]

性能很好啊，Lighthouse 94 分，应该是专门做了性能优化？

[dongtingyue]

？？？我访问的为啥头部一大块是广告

[AllenCai]

作为一个没有艺术细胞的前端, 我觉得挺不错的

[camillo]

搜索框的内阴影感觉可以再优化下 有点 too much

[anychuan]

网站没法留言，这里说一下，感觉分享深圳回成都的文章，对我个人很有参考意义

[fkdtz]

整挺好

[GeekJason]

很好看！

[ch3nOr]

挺好看的，如果有个夜间模式，那就更加酷了

[leedarmau]

@dongtingyue 链接错了

@thulof 静态网站本来就快

@ch3nOr 有，只是没支持手动切换，跟系统来的。

[sarlanori]

博客到没啥感觉，照片是拍的真好👍

[Donahue]

酷 好看 有设计感

[ahxsong]

很赞

[Vesper]

不錯

[syfless]

safari 下有内存泄漏问题，一开网站风扇狂转

[leedarmau]

@KevinDo2 @Arrowing 查到原因了。设置了 letter-spacing ，但是这个 space 是加在每个字的后面，导致右边多出来了一个空隙

@duan602728596 已上

@syfless 没有遇到这种情况

[littlewing]

“视频” 给个建议，点击图片也能跳转

[littlewing]

“配乐：RICHNOMADIC - Dirty Snow ，购于网易云”

购于网易云没必要，非商业用途注明一下这是什么歌就行了，商业用途的话，你这网易云购买的也不是商业授权

[niuoh]

体验挺不错 提交一个优化建议 首页 可以鼠标下滑的时候自动慢慢滑动到对应的栏目增加一点丝滑感

[niuoh]

看的出来网站各方面都用了很多心思 之前我写尝试过些自己的记事博客但最终没有坚持下去 现在虽然初步实现了时间自由但也没有心思做这个事了 希望楼主坚持吧

[leedarmau]

@silencil @cais @littlewing 已加

[wanacry]

没啥卵用，还是内容为王

[litesoar]

简洁美观。

[youshh]

很赞呀~

[ZeroDu]

摄影详情页，可以加个左右切图片

[Eagleyes]

摄影作品不错，非常喜欢那篇《来了不是深圳人，拜拜了深圳》

[xzh654321]

内容不错，设计需加强，不过能做出来就是成功

[chuyik]

看了几篇深圳的文章，有理有据

[TomPig0216]

看起来真的不错

[cais]

@leedarmau 不错不错

[tyrad]

访问速度挺不错

[someonedeng]

不愧是设计师，好看

[leedarmau]

@falost 查了一下还真是。艸了

不学小程序了

[criag]

同为设计师会点前端的来点赞，很棒

[Prideeeeee]

棒极了

[DuDuDu0o0]

真棒

[DuDuDu0o0]

个人感觉字体可能稍微小了点

[alw]

妈的，这设计师 写程序的能力似乎比我还强（狗头
我也想多学些设计。

[Daniel17]

很棒！

[Vipcw95]

坏了，前端感觉到一丝危机

[laravel]

设计学前端优势非常大