Blog

Posted on August 05, 2018

Introduction:

This blog is built on my own from scratch (e.g. server, database, backend and frontend) and the current version is 3.1. It's mainly based on Mysql, Bootstrap and Flask.


I started to build my blog in 2014 and it’s hosted on a VPS and online for about 4 years!

Here are some descriptions of the tech I used:

  • Server
    • A 24/7 online OpenVZ VPS with DDoS Protection (hosted on budgetvm bandwagon).
    • Auto-backup and auto-restart service using supervisor.
    • A reverse proxy (Nginx) to manage multiple servers for different websites.
    • A WSGI (uWSGI) proxy to accelerate the communication between the server program and Nginx.
    • A SQL (MySQL) database to store the data and database-migration information.
  • Backend
    • A server based on Flask with different configurations (i.e. deployment and development).
    • A command line interface (CLI) to test the backend and manage the database.
    • An authorization system with
      • Password Hashing and Salting.
      • A Password retrieval system through email (removed now since there is only one user).
      • User grouping and permission management.
      • CSRF Protection on the forms.
    • A file server that
      • With Hotlink protection (removed now)
      • With the size and type filter.
      • Stores/Manages/Sorts the uploaded files.
      • Automatically uploads the pasted images instantly in the editor.
    • A SQL-based data-schema with an object-relational mapping (ORM) definitions.
    • A database auto-migration component.
    • An analysis component based on Google Analytics.
    • A set of RESTful API that allows other applications to fetch the posts.
  • Frontend
    • A responsive design based on Bootstrap 3 4.
    • An editing tool that can dynamically load the content with AJAX.
  • Features
    • Editing
      • A rich text editor with CKEditor 4, which can edit images, formula, code, tables, embedded video and many other elements.
      • Customizable tags and categories.
      • A shared JavaScript management system (e.g. code-highlighting scripts).
      • Embeddable and Customizable Scripts (e.g. embed React code in the post).
      • An unsaved file warning when exiting.
    • Viewing
      • Auto-pagination.
      • Searching and filtering.
      • An auto-hiding navigation bar.
      • A timeline-based log.
      • A focusing effect when pointing the brief description of a post.
    • Streaming
      • Broadcast with SRS+FFMPEG via RTMP+HTTP
      • RTMP: Low latency (~5s)
      • HLS (HTTP): No flash needed

Updates in 3.5(Ongoing):

  •  About me.
  • A twin site with the same piece of code http://linyuan.shaofanlai.com
    • Redesign the frontend
    • Refactor a site-specific rendering system
  • fixed the spotlight bug
  • fixed the encoding problem
  • fixed the ulog clickable
  • added online stream
  • Local timezone feature

Updates in 3.4 (Ongoing):

  • New filter design.
  • Move to a new server (new IP).
  • Redesign the filter.
  • Move to a new server (at bandwagon)
  • A change log system.
  • Updates in 3.3 (Aug 2018)
  • New Features:
  • Backend-side updates:
    • Added a set of RESTful API routes.
    • Added an API Key table. 
  • Server-side updates:
    • Re-installed the server, upgraded the packages and moved to python3.
    • Used uWSGI emperor to manage different apps to make a better load-balance management (nginx cannot).
    • Switched the browsing UID to www-data to ensure the safety.

Updates in 3.1 (July 2018)

  • Refactored the backend.
  • Upgraded all flask-related libraries and move to Python3.
  • Upgraded from Bootstrap 3 to Bootstrap 4.
  • Separated the CSS from HTML entirely.
  • Re-designed the navigation bar.
  • Added the “focusing” animation.
  • Updated the CKEditor.
  • Added a “script” field to the Post table.
  • Simplified the post categorization.
  • Corrected the encoding of the database.

 

The 1.0 version of my blog. The domain was hapiscesdream.com (deprecated now).
None