前段时间突然想起自己好像快20岁了,于是就萌发了给自己做个不一样的20岁礼物的想法。

之前的博客一直在用hexo,从免费的githubpages到部署到自己的vps上,作为一个瓶儿,还是有点艺术细胞的~hexo的主题也挑了好久,觉得还不如自主开发,当练练手。一开始也想着直接做hexo的主题,但是感觉静态博客玩法不是很多,就又开始去研究Typecho,看了一下午的主题开发文档,玩不来、看(太)不(菜)懂(了),于是干脆就用最近在学的flask来写算了,前后端自己全包。

0x01 Make a plan

0ak
一开始只想了前端的计划,后端并没有仔细构思,导致后期开发的时候bug不断~~所以以后开发的时候,一定要记得先构思好框架再下手~~不然调bug会调崩溃~

博客叫 0ak

The oak is a living legend representing all that is true, wholesome, stable, and noble. When you are in need of stability and strength in your life – envision the oak in your minds eye. Picture yourself drawing into its endless energy waves. Soon, you will find yourself sharing in its power.

前端主题 Inspired By Colorlib / 罗磊的独立博客

后端很简陋,只是完成了一些基本功能。

0x02 Bugs

Forms length

后台添加/编辑文章的时候,要注意表单字段的长度,因为中文在表单里是经过编码的,所以长度可能会爆,就会出bug~

Tags

一篇文章要对应多个Tags的时候,需要建立多对多关系。
分割多个Tags的时候有些符号不能使用如 ; - 等。

0x03 Details

0ak基于Python3+flask,由nginx+Docker+Gunicorn+Gevent部署,数据库是Mysql,用docker-compose一键部署维护,特点如下:

  • 支持Mardown
  • 支持文章多标签
  • 支持多Category
  • 伪静态
  • 支持mweb图片一键上传到vps
  • docker自动化部署

暂时没有的功能:

  • 文章分享
  • 图片水印
  • 后台管理Tags、Category
  • 数据库存储评论
  • ajax异步加载(暂时不考虑)

代码块配色

模仿的carbon的mac外框,css用的是COLOR THEMES FOR GOOGLE CODE PRETTIFY

伪静态

可以用send_file()也可以用make_response

post = open(filename, 'tw')
        post_data = str(render_template('blog/post.html', posts=posts, toc=toc))
        post.write(post_data)
        post.close()

搜索

flask-msearch比Flask-Whooshee好用很多。

sitemap

Flask不渲染显示sitemap.xml

Tags Pagination

Tags的分页一直报错~~搞不懂~搜索语句是没有问题的~~

Bug
Flask分页报错

Toc

一开始尝试自己写了toc,但是感觉太丑了,后来看到一个用js实现的tocbot,还挺好用,于是就加进来了。

速度优化

逛大佬博客的时候发现大佬前端的优化贼舒服~然后就自己开始咕咕咕的捣鼓起来。特别是p神的博客,不是高峰的时候,紧逼大陆机子~简直是可怕。
捣鼓了一下午,已经开启了

  • Gzip压缩
  • loadCSS异步加载css(要注意是否会影响兼容性)
  • 通过font-display优化webfont

-w1324
-w583

基本上达到了峰值速度~大陆机子(.me)简直爽的不行。如果不是高峰期,亚马逊也很香~

0x04 Reference

Blog数据库设计之Tags表设计
在 Flask-SQLAlchemy 中联表查询
Building Minimal Docker Containers for Python Applications
用Python-Markdown和google-prettify来处理Markdown和代码高亮
Nginx 开启gzip压缩(图片,文件,css)
字体加载最佳实践
让骨架屏更快渲染
CSS 加载新方式
使用 font-display 优化 Web fonts 的加载
谈谈css的加载及加载循序
外贸网站终极速度优化细节全展示