django建站经历

本文最后更新于：1 个月前

Django学习以及个人博客制作路程

服务器部署步骤记录以及问题的解决
修改hostname
  • 最好最直接不报错的办法：在127.0.0.1 localhost 后面加上主机名称(hostname) 即可, /etc/hosts 内容修改成如下: 直接将hostname（abc）追加到后面
为了安全起见

  • 将网站项目以及部署的文件全部保存在一个用户目录下而非root目录

    1
    $ adduser username #所有命令代码开头的$只是模拟终端，可忽略
正式开始项目部署

  • Python的安装，参考CSDN收藏的链接

    1
    2
    3
    $ sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.5 1
    $ sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.6 2
    //通过以上命令可以设置Python的优先级为3.6版本；在终端中输入python时会显示版本为3.6

    • 上述方式在终端输入python，会默认使用你设置的版本，但是如果你想在终端输入python时显示2.7的版本，输入python3时才是你想要的版本时，需要关联一下版本。

    • 指定python3为Python启动

      1
      2
      3
      4
      5
      6
      $ whereis python  
      # 若已经链接想要的版本就不需要往下操作了
      # 删除软链接
      $ rm /usr/bin/python
      #生成制定python版本的软链接
      $ ln -s /usr/bin/python3.6 /usr/bin/python

  • 更新以及配置环境

    • 首要便是更新下载库： sudo apt-get update 和 apt-get upgrade
    • 安装好需要的相关组件：Python的虚拟环境 virtualenv；git ; nginx服务器配置 ；gunicorn
    1
    $ git clone your project address on github or gitee project-name   #拉取项目 以及命名项目文件夹名称

  • 使用pip安装对应项目依赖时记住切换国内镜像源

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    pip install -r requirements.txt -i http://pypi.douban.com/simple --trusted-host pypi.douban.com
    #使用临时镜像源

    #永久修改镜像源
    #在指定文件中修改
    mkdir -p ~/.pip
    vim ~/.pip/pip.conf
    #但这是在root目录下使用的修改，若是在某个用户目录下进行的修改，还需要修改对应目录下的.conf文件才能有效
    #如：我的用户是yamakosu，我需要在 /home/yamakosu/.config/pip/pip.conf 文件中加入以下信息

    [global]
    index-url = http://pypi.douban.com/simple

    [install]
    trusted-host=pypi.douban.com

  • 使用pip安装所有依赖

  • 在项目对应的虚拟环境下执行运行django项目的相关命令

  • 在执行收集静态文件命令后 

    1
    2
    cp -r ../collected_static/* static/
    #将静态文件资源搬移如static中才不会报错（这是我项目的一个设计缺陷）

  • 内容尽量不要包含敏感信息，如密钥之类的

    • 需要Linux服务器的系统环境变量中设置相应的信息
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    SECRET_KEY = os.getenv('CUBER_SECRETKEY', 'your_secret_key')
    #上面的即需要设置的环境变量,对应在环境变量文件中添加如下命令
    export PATH="$PATH:path" #此为添加路径的形式
    export CUBER_SECRETKEY="your_secret_key"

    #--------------完整流程-------------
    vim /etc/profile #这是设置的全局变量
    #在文档最后，添加:
    export env_var="..."
    # 保存退出后执行以下命令才会生效
    source /etc/profile
    #可env查看设置是否成功
    $ env

  • 生成依赖列表：pip install -r requirements.txt

  • 在服务器上运行django本地测试

    1
    2
    3
    4
    5
    6
    7
    8
    9
    DEBUG=True #测试完后部署gunicorn记得要修改为 False

    # 修改settings.py中的内容,确保服务器的8000端开放
    ALLOWED_HOSTS = ['your ip address', 'localhost', '0.0.0.0:8000', '127.0.0.1']

    #修改完文件后保存，运行 runserver
    python manage.py runserver 0.0.0.0:8000

    #使用 公网IP:8000 地址访问项目检查是否正常运行

  • 配置nginx以及gunicorn

  • 免费获取SSL安全证书

    • 设置定时任务，利用linux系统的crontab

      1
      2
      3
      4
      5
      6
      7
      8
      9
      查看任务： crontab -l
      编辑任务： crontab -e
      1.Ctrl+O  写入
      2.出现“FIile name to Write...”，输入Enter
      3.Ctrl+x 保存输出
      提示“crontab:installing new crontab”表示成功
        
      #最后下述命令使任务生效
      sudo service cron restart

  • 服务器上运行测试成功后要记得将settings.py的DEBUG模式修改为False,以及将ALLOW_HOST 修改

  • 尽量提前备份数据库文件方便移植

  • 开放端口号4497为SSH远程连接，安全性更高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ sudo netstat -tunlp | grep "ssh" #查看当前监听的端口号

#修改端口号
$ sudo vim /etc/ssh/sshd_config

Port 22
Port 4497

测试中涉及到端口号，对此作总结：
一般用到的是1~65535。
其中0不使用，1-1023为系统端口，也叫BSD保留端口。
0-1023  #BSD保留端口，也叫系统端口，这些端口只有系统特许的进程才能使用；
1024-65535 #为用户端口，又分为：BSD临时端口(1024-5000)和BSD服务器(非特权)端口(5001-65535)。其中：
1024-5000 # BSD临时端口，一般的应用程序使用1024到4999来进行通讯；
5001-65535 #BSD服务器(非特权)端口，用来给用户自定义端口。

#重启ssh服务使配置生效
$ service sshd restart
$ sudo netstat -tunlp | grep "ssh" #查看当前监听的端口号验证是否设置成功

最后用Xshell测试4497端口连接，成功后将22端口屏蔽保证安全
步骤同上，修改配置文件并重启服务

  • 网站上传图片前需要修改nginx的上传文件大小上限

  • 默认上传文件的大小是1M，可nginx的设置中修改。
    打开nginx配置文件 nginx.conf, 路径一般是：/etc/nginx/nginx.conf。
    在http{}段中加入 client_max_body_size 20m; 20m为允许最大上传的大小。
    保存后重启nginx，问题解决

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    $ vim /etc/nginx/nginx.conf 

    #如下修改

    http {
            ##
            # Basic Settings
            ##
            sendfile on;
            tcp_nopush on;
            tcp_nodelay on;
            keepalive_timeout 65;
            types_hash_max_size 2048;
            client_header_timeout 120s;
            client_body_timeout 120s;
            client_max_body_size 30m; #设置最大限制30m
            client_body_buffer_size 256k;
            # server_tokens off;
            ...
    }

    $ sudo nginx -t
    $ sudo systemctl restart nginx

  • 若是修改gunicorn或Django项目文件

    1
    2
    $ sudo systemctl daemon-reload
    $ sudo systemctl restart gunicorn_tendcode #只修改了django文件，只需执行该命令
网站的设计与改进
设计部分（目标）
  • 文字附上删除线表示已完成

博客的权限设置为只有我自己能写文

优化用户登录，注册，写文章页面 为了方便审核暂时取消用户功能

文章列表添加标题图，标题图鼠标悬浮中心放大:

实现过程： 1. 添加标题图元素至数据库模型中-考虑数据大小与格式，是否需要换乘mysql作为数据库

​ 2.添加标题图，即上传图片到项目中，Pillow为插件—上传与打开图片要求如下

  • 核验上传文件格式是否为图片-jpg,png
  • 上传时能够压缩图片（预先处理-压缩，大小控制）
  • 从数据库读取图片文件时自动修改图片为统一大小
  • 图片不存在时是否使用默认图片作补充
  • 图片不作为超链接Docker部署
  • 增加时间轴页，浏览网站时间线事件

  • 添加网站地图，便于检索

  • 增加面包屑导航，更加直观的导向

改进部分（创新与迭代）

  • 时间轴与个性化内容展示

  • 11.4 对首页进行优化，以首页为基础进行设备兼容展示网页内容的改进，个人认为开发效率较低。

    1. 个人认为是前端知识的不充足导致的，虽然有基础但实现起来较难，而且在开发代码的时候，习惯不好，用VSCODE会出现添加一段代码就实时查看一次效果的习惯，虽然这样可以时刻观察开发进度，但耗时。
    2. 还是有必要思考清除步骤，下次开发前，先对自己要实现的功能有个初步了解，同时要联系已有的代码再进行系统的更新，不然维护起来很麻烦。

    • 目前的目标：实现一个通过在首页点击自动下滑到文章列表的主页效果。

      博客样式设计更新—————-

      • 思考如何简化代码量

        • 侧边回到顶部按钮统一
  • 博客的数据库文件要备份—后期可以转用mysql， .db文件可以在每次项目文件全部重载时，先备份到指定文件夹下，然后再重新复制到项目文件夹里
  • 可以考虑结合Vue设计前后端分离模式
开发过程中的问题
  • HTML的编写不熟练
后台设计

  • 先了解Xadmin的使用与项目的结合

  • 后台的板块设计，功能设计

    • 自定义界面

      • 后台管理登录

      • 后台首页：

        1.侧边栏按钮（网站各主要信息板块）

        2.进入首页自动生成统计图表

        • 访问量
        • 点赞数
        • 解析IP地址-用户分布图
        • 调用Echarts插件来制图

  • 各模块的优化设计

    • 文章 Article Post
      • title
      • body
      • create_time
      • update_time
      • 字数统计（可以后期添加，当做python学习的另一种方式）
      • 文章的转载许可与开源性
    • 用户版块（暂且不使用）
    • 评论模块（与用户版块结合才行）
    • 一些小功能的设计（以后再说）
      • 在线功能，网站作为一个接口
      • 自制导航页
        • 节省访问流量（背景不同高清图，用一种CSS设计的图片就行了）
        • 百度搜索引擎接口
        • 一些常用网址链接展示

开启新的旅程！

HEXO 博客的安装，分本地和服务器部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
sudo npm install -g n
sudo n stable
PATH=$PATH

//修改指定端口连接服务器并发布
deploy:
- type: 'git'
  repo:
     site: ssh://username@ip:port/path/blog.git,master
- type: baidu_url_submitter 


#查看远程连接端口
netstat -tunlp | grep ssh
#修改ssh服务配置
vim /etc/ssh/sshd_config

#重启ssh服务使配置生效
service ssh restart

HEXO博客的自定义设计

  • 在原有主题基础上修改主题样式，实现自己想要的效果

进阶功能

  • Picx图床（免费，GitHub作为仓库，网络上是公开的）
  • 资源压缩
  • 网站地图（百度搜索，谷歌搜索），知识公开共享
  • 能否使用echarts工具做一些有趣的数据可视化图形
  • 为网站添加一些在线工具
技术拓展 Django
Web-Dev

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！