开源项目 纸房子个人博客改版,已开源,希望得到大家指点~~

cod7ce · 2014年03月01日 · 最后由 cod7ce 回复于 2014年10月11日 · 7678 次阅读

前言

之前一直用 wordpress 写些博客,不知时啥时候,ruby china 的同学问我,博客是不是 rails 做的,恰好当时在迷茫,应该怎么写博客,感觉之前一直在搞排版,内容简直无法直视,于是有了用 rails 重写博客的打算,准备写一些注重内容的博客,想让页面简单,纯粹。

项目开源了代码,需要的同学可以看看,从 ruby china 代码入手,简直是自虐,有木有?希望可以帮到刚接触 ruby、rails 的同学。

另外,页面全过程都用 chrome,safiri 看的页面效果,ie 什么的都没考虑,大家发现问题告诉我一声。thx

26 号布到外网,主要功能开发完毕,现已基本稳定,内容还未填充,选了两篇还算有点价值的文章更新到了上面。

项目信息

网站地址:纸房子 www.zhifangzi.com Github 地址:maison https://github.com/cod7ce/maison

版本信息:

Ruby: 2.0.0-p247 Rails: 4.0.2

服务器:

http: nginx + puma db: mongodb

楼主的设计细胞很拽啊,很不错,点赞👍

貌似移动端的自适应不太好啊

移动端还有问题 字很小 文章还有点偏移

机器在阿里云?哪款配置呢?

首页很赞

刚刚上去喵了一下,确实很牛逼!All Stack Programmer!!

#4 楼 @liliang13 很明显是最低配置了。。。要不然为吗选彪马。。。

很不错啊 页面很棒,不过你这个管理员怎么初始化的啊

刚开始页面很卡,不知道是不是因为我的网速不好。

页面好卡!

#1 楼 @jimneylee #5 楼 @diguage 还好了,都是在 http://reeoo.com 上看了几十页才有的一点点想法,thx

#4 楼 @liliang13 确实是阿里云的低配,这都被 @pynix 看穿,对于我这种小网站来说,puma 确实厉害~

#7 楼 @fxllong262553 在服务器端执行的 seed.rb,不过这个没有放在 github 上

#6 楼 @pynix #11 楼 @cod7ce

因为我打开很快,好奇他的带宽了。我之前的低配感觉好憋屈的样子 = =

#8 楼 @appell #9 楼 @jun1st 是吗?你们用什么浏览器,我去测试下~会不会是我的服务器带宽不行啊?首页的图片好几百 k,毕竟是低配...

#3 楼 @jevanwu 我刚才用 ipad 看了下,确实有问题,回头修复下~有没有介绍移动端排版的好文给发一枚?

#15 楼 @cod7ce 看 Foundation 的源代码呗,其实主要是针对小屏幕

#13 楼 @liliang13 我这个上还放着之前的老网站,有 3 个 wordpress 程序在跑,访问的人少,所以还没啥压力~~

19 楼 已删除
20 楼 已删除

很炫啊,羡慕死了

不错。就是有种首页和子页的风格不搭配的感觉呢。

@cod7ce safari@osx 10.9-air 刚打开卡,过一会就不再卡了,估计是我的网速慢吧。

#23 楼 @blackanger 恩恩,首页主要展示下之前写的东西,其它页面主要想写点有用的东西,突出内容,我也没有想到用什么方法,可以把两个结合起来,还需努力啊~~

#24 楼 @appell 第一次可能因为背景图片太大了,没加载完造成的吧?第二次浏览器有缓存了就不会卡了,看来图片还得处理的小点~

建议背景大图分切成几个图来加载。

@cod7ce 样样精通啊,全栈工程师有没有兴趣 http://ruby-china.org/topics/17268

#26 楼 @cod7ce Nginx 有压缩图片么?

如何部署呢?

#28 楼 @swordray 感谢邀请,我人要去苏州了,so

#29 楼 @mystery 我刚才看了下 nginx 配置,图片只做了缓存没有做压缩,晚上折腾下,谢谢提示

#30 楼 @masterqing 纸房子的博客的文章栏目有一篇有关部署的,代码栏目里有纸房子的服务器配置文档可供参考

检查一下代码,前端内存泄露了

好奇,css 怎么做到行起第一个字样式不一样。。难道是 css3 写法。。求教。

太漂亮,我啥时能搞个这么炫的作品就好。

@cod7ce 很炫啊,就是主页的地方好卡。。。

#40 楼 @wildflame 确实,pad 上有点卡。 不过,很棒。

#40 楼 @wildflame 确实有点卡,本来以为是首页的背景图片质量太高,nginx 有没对图片进行压缩造成,可今天降低了图片的质量,现在大小 187K,并且对图片进行了 gzip 压缩,貌似只是提高了图片的加载速度,页面还是会有卡顿,你有这方面的经验吗?

#36 楼 @small_fish__ 不是 css3 的特有写法,使用了:first-letter 伪元素,为该块的第一个字加样式。

纸房子是这样做的

p {
  font-size: 14px;
  line-height: 1.5em;
}
p:first-letter {
  /*让首文字浮动,不去影响其它文字位置*/
  float: left;
  /* 主要是这里,首文字大小为 (当前所在行行高的2倍 - 第一行文字的上部分空白 - 第二行文字的下部分空白*/
  font-size: 2.5em; 
  line-height: 1em; 

  /*后面再做些块内的微调*/
}

具体效果还与字体有关,希望对你有帮助。

#41 楼 @wikimo 恩恩,当时没有考虑移动设备,字体大小也不是很舒适,@assyer 给了意见,现在正在学习...

#35 楼 @saiga 这么严重,具体有什么表现,可否共享以下?thx

#45 楼 @cod7ce 从首页点进文章,然后在文章正文,列表,代码这几个地方来回切换 4,5 次,内存从 5M 飙到 26M。具体哪里的问题还不清楚,不过建议先将 assets 前后端分离。

#46 楼 @saiga 恩恩,太感谢了,我现在就看下~~

#46 楼 @saiga 我初步认定,是 TurbolinksDisqus 造成的~ 现在正在研究~

#42 楼 @cod7ce :)
另外,在这几个地方可以优化一下,首页速度应该会有很大提升的。

  • js/css 前后公用,jq-ui 都进来了,js 接近 1M,这个分离一下
  • 首页速度除了 180k 的背景,还有 1m 的和 2M 各一张的项目预览图,即使使用 display:none浏览器还是会下载的。可以考虑使用 lazy load,动态创建 Image 对象)

#50 楼 @saiga 太宝贵的意见了,感谢啊~你说的这些确实需要优化,jquery ui 没有项目中使用,我自己都忘记了,没有去除引用,再次感谢~~

话说阿里云备案麻烦吗?最近辞职了,闲着没事想把之前写的东西放上去....

#50 楼 @saiga 现在 OK 了,我把Turbolinks暂时去掉了,得好好看看文档,然后再加上,确实有很多 js 陷阱啊~ 对了,mac 版本的 chrome 做快照都是 50-80 M,windows 版本的 chrome 就只有 4-10 M,这是怎么回事啊?

#52 楼 @saiga 不麻烦,而且中间不会产生费用,照片需要背景幕布,都是阿里云给负责的,就是需要寄些纸质文档,然后就是耐心的等待

#54 楼 @cod7ce 谢谢 XD 我去了解一下,可以的话就立即入手一个最屌丝的玩玩

@cod7ce 只是玩的话 linode 就可以了。速度跟阿里云差不多,省去备案的麻烦。之后需要再转移就好了。

#50 楼 @saiga 靠,真是这样?

#57 楼 @cqcn1991 对的,因为使用了Turbolinks,我又对它缺乏了解,出现了很多 js 陷阱,我想彻底弄清楚了再使用,现在纸房子停用了Turbolinks,并且把 js 代码优化了下~现在 ok 了~

#58 楼 @cod7ce turbolinks 推荐看@Rei博客上的那几篇,很实用。

非常不错。

#59 楼 @cassiuschen 嗯,他那片博客我看了,受益良多~感谢

ruby on rails

你的评论是用了哪个 gem 啊?好好用的感觉

需要 登录 后方可回复, 如果你还没有账号请 注册新账号