网站搭建的推进记录

by WZhang published 2026-02-07 views 92

网站搭建事项进展记录

1. References

2. Timeline

Dec.10, 2025

• 初步学习全栈基础知识

Dec.20, 2025

• 梳理涉及到的所有实施事项
• 未来要写的blog

Dec.21, 2025

• 学习 CDN 原理、服务器搭建方法
• 域名申请(www.weinnz.com)、备案、CDN 服务器购买、云服务器续费
• 熟悉 jQuery / JS 语法
• 增加动态效果，修改 Blog 主页面

Dec.22, 2025

• 博客详情页路由设置

  ❗ 考虑增加博客上传、修改页面(管理员权限)

• 详情页布局设计

• Markdown –> HTML 效果验证

  escape, safe, 超链接链接地址总添加本地前缀问题

Dec.23, 2025

• mistune 源码阅读

  1. 目录最大层级限制

     class myTableOfContents(TableOfContents):
         def __init__(self, min_level: int = 1, max_level: int = 4) -> None:
             self.min_level = min_level
             self.max_level = max_level
     
         def generate_heading_id(self, token, index) -> str:
             return token["text"]
     

     toc0, _, blog.blog_content = html_txt.partition("") _, _, toc = toc0.partition("") toc = '

     ' + toc + '
     '

  2. 标签、名称、格式自定义

• 考虑博客中 emoji，公式 的渲染支持问题

Dec.25, 2025

• hover 动态交互实现

• 颜文字（14种）

  :)
  :(
  :<
  :>
  :D
  :P
  :b
  x)
  x(
  x<
  x>
  xD
  xP
  xb
  

• 字体

  Roboto
  PingFang RC
  Open sans
  

Dec.26, 2025

• 博客中公式渲染支持实现： KaTeX 使用

Dec.27, 2025

• 相册主页布局实现

  Django 自定义过滤规则，修改时间显示格式

Dec.31, 2025

• 精简代码结构，调整 CSS 命名，合并分拆

Jan.1, 2026

• 博客详情页css格式设计

  h1: 36/32/30
  h2: 24/24/20
  h3: 18/20/18
  h4: ?/16/16
  p: 16/14/16
  

• 修改minute中code风格，方便添加行号

  class myHTMLRenderer(mistune.HTMLRenderer):
  
      def block_code(self, code: str, info: None) -> str:
          code = "".join([f"<div>{escape_text(line)}</div>" for line in code.splitlines(True)])
          html = "<pre><code"
          if info is not None:
              info = info.strip()
          if info:
              lang = info.split(None, 1)[0]
              html += ' class="language-' + lang + '"'
          return html + ">" + code + "</code></pre>\n"
  

• markdown的公式、代码渲染和格式设计

Jan.2, 2026

• 博客详情页配色

  💡 对比色，莫兰迪 + 灰度 三种（考虑增加配色选择功能）

  

• 博客首页调整

Jan.3, 2026

• 博客首页交互优化

• 相册详情页设计

Jan.4, 2026

• 相册详情页设计与实现

Jan.5, 2026

• 相册详情页设计与实现

Jan.6, 2026

• 博客中typora语法的emoji渲染支持

  目前支持以下表情 (后续只需要在字典中添加想要支持的表情即可)

Jan.7, 2016

• 考虑在相册底部加形状背景，增加层次感(可以使用表情或字母)；滚动出现，否则渐隐，增强互动感

Jan.8, 2016

• 首页轮播实现

Jan.9, 2016

• 博客字数统计功能实现

• 博客阅读时间估算实现

• 数据库表设计

  • 全文索引，支持站内搜索
  • 数据加密
  • 数据备份
  • 访问权限控制
  • 注入防护
  • 敏感信息脱敏或加密
  • 版本控制(Flyway、Liquibase等工具)
  • 日志记录
  • 监控告警(Prometheus+Grafana等工具)

//// Docs: https://dbml.dbdiagram.io/docs
//// -- LEVEL 1
//// -- Schemas, Tables and References

Table t_user{
  id int [pk, not null]
  name varchar [not null]
  password varchar [not null]
  bio varchar
  region varchar
  email varchar
  phone varchar
  profile_photo varchar [note: "url"]
  level varchar [note: "admin, normal, guest"]
  register_time datetime
  last_login_time datetime
}

Table t_article{
  id int [pk, not null]
  title varchar [not null]
  user_id varchar [ref: > t_user.id, not null]

  abstract varchar
  content varchar [not null]
  status varchar [note: "draft, published, trashed", not null]
  
  columns varchar
  tags varchar

  comments varchar
  views_count int
  likes_count int
  words_count int
  read_time int

  publish_time timestamp
  update_time timestamp
}

Table t_comment{
  id int [pk, not null]
  article_id int [ref: > t_article.id, not null]
  user_id int [ref: > t_article.id, not null]
  content varchar [not null]
  parent_id int [ref: > t_comment.id, not null]
  create_time timestamp
}

Table t_column{
  id int [pk, not null]
  name varchar [not null]
}

Table t_tag{
  id int [pk, not null]
  name varchar [not null]
}

Table t_article_column{
  article_id int [ref: > t_article.id]
  column_id int [ref: > t_column.id]
}

Table t_article_tag{
  article_id int [ref: > t_article.id]
  tag_id int [ref: > t_tag.id]
}

// only open to admin
Table t_gallery{
  id int [pk, not null]
  title varchar [note: "date",not null]
  cover_description varchar
  detail_description varchar
  location varchar
  camera varchar
  number varchar
  user_id int [ref: > t_user.id]
  cover char [note: "url", ref: > t_photo.id]
  photo_id int [ref: > t_photo.id]
  create_time timestamp
}

Table t_photo{
  id int [pk, not null]
  width int
  height int
  description varchar
  lens varchar
  focal_length varchar
  aperture varchar
  shutter varchar
  iso varchar
  shoot_time timestamp
}

// 后续设计
Table t_recipe{
  id int [pk, not null]
}

Table t_sheet_music{
  id int [pk, not null]
  title varchar [not null]
  artist varchar
  cover varchar [note: "default: first page"]
  content varchar [note: "urls"]
  instrument varchar [note: "guitar, harmonica"]
  difficult varchar [note: "easy, difficult"]
  genre varchar [note: "classic, light"]
  original_key varchar
  pages int
  duration float
  score_from varchar
  ref_learn_video varchar
  create_time timestamp
}

Table t_paper{
  id int [pk, not null]
  title varchar [not null]
  author varchar
  publish_time timestamp
  extra_info varchar [note: "code link or something"]
  status varchar [note: "translate: finished or not"]
  pages int
  create_time timestamp
  download_count int
  download_url varchar
}

Jan.10, 2016

想法 💡

• 相册考虑增加单个图片全屏查看功能： 参考pixea呈现方式
• 博客详情页考虑增加阅读模式（消除阴影，扁平化）

• 设计重构整个数据库表及其结构

• 重构blog主页面分类逻辑

  Category/Article：类别，标记文章类型或领域，如备忘录(Memo)，想法(Thoughts)，知识(Knowledge/Learning)，翻译(Translation)，计算机，艺术等；或用来标记最近的、Top10热度诸如此类的文章 // 浅色

  Columns：专栏，记录用于解决一个问题或实现一个目标而做的一系列事情，与文章是多对多关系 // 红色

  Tags：标签，标记文章主要内容(而非类型)，类似于论文里的关键字keywords，与文章是多对多关系 // 蓝色

Jan.11, 2016

• 学习ajax，事件委托(解决ajax局部更新的js失效问题)

• 重构和精简博客主页代码

• 博客主页交互实现(包括top-navbar中类别元素的点击响应)

• SVG修改

Jan.12, 2016

• 增加 cookie 管理，个性化展示内容，增加随机性

  1. 访问者的自定义主题颜色
  2. 首页的图片：一天会更新一次
  3. 语言
  4. 颜表情：具有随机性

• 文章查看数量统计实现

Jan.13, 2016

• 文章查看数量统计实现
• 相册翻页功能

Jan.14, 2016

• 相册详情页背景修改
• 相册详情页懒加载

Jan.15, 2016

• 博客主页翻页实现(利用Ajax异步实现)

Jan.16, 2016

• 博客主页排序实现
• 线上部署初步实现

Jan.20, 2016

• SSL 证书购买申请与配置
• 配置nginx：http:// , http://www. , https:// , https://www 重定向至统一 https://

Jan.24, 2016

• contact 页设计与实现

Jan.25, 2016

• Notes 主页和详情页设计与实现
• Contact 页, notes 页, blog 页增加点赞、评论功能

Jan.31, 2016

• 评论功能实现
• 二维码验证

Feb,2. 2016

• 代码精简
• view统计实现
• 数据库搭建
• 部署

Feb,3. 2016

• MySQL 云服务器搭建

Feb,4. 2016

• 完善对公式的渲染支持

Feb,5. 2016

• 博客详情页左下角加入猫元素
• 完善对公式支持

Feb,6. 2016

• 增添内容，渲染测试

Feb,7. 2016

• 增添内容，测试
• 部署

Notes

首页

• logo-word 图片初始尺寸、书写、大小修改
• 下拉页设计与实现

博客

• 文章查看数量统计
  • 使用Logging方式初步实现（内容很多，可以写一篇博客分享；包括logging配置、多进程文件处理、文件解析、定时任务等）
  • 利用缓存改进，缓解数据库潜在存在的读写压力
• 去掉作者页？
• 初始显示(ALL)
• 顶部数量显示
• 顶部Article分类优化
• Filter实现
• 底部翻页
• 主题色
• 详情页平面化
• 详情页评论
• 详情页点赞
• 页脚版权声明

个人页

• 归档数据
• 最近活动
• 联系信息

相册详情页

• 背景修改
• 查看数量统计
• 评论功能
• 点赞功能
• 翻页功能
• 懒加载（后续：使用js灵活调整）

消息页(认证)

• 消息提醒/记录系统

其他

• 搜索系统
• 主题设计
• 断点设计
• 验证码
• 中英文切换
• MySQL服务器搭建
• Log日志输出管理
• 菜单名称统一
• 右侧菜单栏显示优化
• 菜谱、项目、收藏的主页和详情页设计和实现
• 缓存
• 中间件
• 个人信息脱敏
• 评论页或消息页分页

3. Deploy

3.1 django

• Requirements

  pip install -r requirements.txt

  django
  uuid
  django_extensions
  django_apscheduler
  filelock
  

• settings

  # mysite/settings.py
  Debug = False
  ALLOWED_HOSTS = ['*']
  
  STATIC_URL = '/static/'
  STATIC_ROOT = os.path.join(BASE_DIR, 'static')
  

  # mysite/urls.py
  from django.views import static
  from django.conf import settings
  from django.urls import re_path as url
  
  urlpatterns = [
      url(r'^static/(?P<path>.*)$', static.serve, {'document_root': settings.STATIC_ROOT}, name='static')]
  

• run server

  1. 开启防火墙端口port

     如果有端口占用，可以查看占用程序，然后 kill

  2. 收集静态文件

     python3 manage.py collectstatic  // 该路径与nginx静态文件路径设置一致
     

     3. 数据库更新

     python3 manage.py makemigrations
     python3 manage.py migrate
     

  3. 服务器启动

      python3 manage.py runserver 0.0.0.0:port
     

3.2 Nginx

• nginx

  1. 下载nginx

     sudo apt install nginx
     

  2. 文件配置

     // /etc/nginx/nginx.conf 
     
     http{
     
     server {
          #SSL 默认访问端口号为 443
          listen 443 ssl;
          #请填写绑定证书的域名
          server_name weinnz.com;
          #请填写证书文件的相对路径或绝对路径
          ssl_certificate /home/ubuntu/weinnz.com_nginx/weinnz.com_bundle.crt;
          #请填写私钥文件的相对路径或绝对路径
          ssl_certificate_key /home/ubuntu/weinnz.com_nginx/weinnz.com.key;
          ssl_session_timeout 5m;
          #请按照以下协议配置
          ssl_protocols TLSv1.2 TLSv1.3;
          #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
          ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
          ssl_prefer_server_ciphers on;
          location / {
             proxy_pass http://127.0.0.1:8000;
             include proxy_params;
              #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
              #例如，您的网站主页在 Nginx 服务器的 /etc/www 目录下，则请修改 root 后面的 html 为 /etc/www。
             #root html; 
             #index  index.html index.htm;
     
         }
      }
     
     server {
             listen 80;
             server_name weinnz.com;
             return 301 https://weinnz.com$request_uri;
     }
     
     server {
             listen 80;
             server_name www.weinnz.com;
             return 301 https://weinnz.com$request_uri;
     }
     }
     

     // /etc/nginx/sites-available/mysite.conf
     
     upstream django {
         server [127.0.0.1:port]; # for a web port socket (we'll use this first)
     }
     
     server{
         listen 80;
         server_name [mysite];
         charset utf-8;
         client_max_body_size 75M;  #上传文件大小限制
     
         # 网站静态文件所在目录
         location /static{
             alias [/home/mysite/static];
         }
     
         # 上传文件所在目录
         location /media{
             alias [/home/mysite/media];
         }
     
         # 动态文件交给uwsgi处理
         location / {
             uwsgi_pass [127.0.0.1:port];
             include /etc/nginx/uwsgi_params;
         }
     }
     

  3. 服务启动

     // 软连接
     ln -s /etc/nginx/sites-available/mysite.conf   /etc/nginx/sites-enabled/mysite.conf
     // 启动
     sudo systemctl start nginx
     

3.3 uwsgi

• uwsgi

  1. 安装

     pip3 install uwsgi
     

  2. 配置

     cd /home
     mkdir mysite_uwsgi
     cd mysite_uwsgi
     vi mysite.ini
     

     // /home/mysite_uwsgi/mysite.ini
     [uwsgi]
     chdir = /home/mysite
     home = /home/django
     module = djangoblog.wsgi:application
     master = True
     processes = 4
     max-requests = 5000
     harakiri = 60
     socket = [127.0.0.1:port]
     uid = root
     gid = root
     pidfile = /home/mysite_uwsgi/master.pid
     daemonize = /home/mysite_uwsgi/mysite.log
     vacuum = True
     

  3. 服务启动

     uwsgi --ini /home/mysite_uwsgi/mysite.ini 
     

     查看是否启动 ps -aux | grep uwsgi

     关闭服务可以直接杀死进程，或者结束所有相关进程 killall -s INT uwsgi

🌈 至此，网站基本搭建完成。享受学习和记录的快乐吧。

未来优化的点：

• 断点设计，适配手机屏幕显示
• 完善登陆认证功能，可分配账号
• 完善搜索系统
• 利用缓存提高响应效率的一些技术
• 网页高并发、分布式一些技术
• 利用开源大模型，增加一个 AI agent