前段时间突然想起自己好像快20岁了,于是就萌发了给自己做个不一样的20岁礼物的想法。
之前的博客一直在用hexo,从免费的githubpages到部署到自己的vps上,作为一个瓶儿,还是有点艺术细胞的~hexo的主题也挑了好久,觉得还不如自主开发,当练练手。一开始也想着直接做hexo的主题,但是感觉静态博客玩法不是很多,就又开始去研究Typecho,看了一下午的主题开发文档,玩不来、看(太)不(菜)懂(了),于是干脆就用最近在学的flask来写算了,前后端自己全包。
0x01 Make a plan
一开始只想了前端的计划,后端并没有仔细构思,导致后期开发的时候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
Tags Pagination
Tags的分页一直报错~~搞不懂~搜索语句是没有问题的~~
Bug
Flask分页报错
Toc
一开始尝试自己写了toc,但是感觉太丑了,后来看到一个用js实现的tocbot,还挺好用,于是就加进来了。
速度优化
逛大佬博客的时候发现大佬前端的优化贼舒服~然后就自己开始咕咕咕的捣鼓起来。特别是p神的博客,不是高峰的时候,紧逼大陆机子~简直是可怕。
捣鼓了一下午,已经开启了
- Gzip压缩
- loadCSS异步加载css(要注意是否会影响兼容性)
- 通过font-display优化webfont
基本上达到了峰值速度~大陆机子(.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的加载及加载循序
外贸网站终极速度优化细节全展示