个人网站设计

写于
  1. 放置博客信息
  2. 放置个人信息页
  3. 个人主页仅修改了html，其他可以保持不变
  4. 放crm系统
  5. 更新博客信息及个人信息页面，布局、版式更改
  6. 博客将不同的页面分开，相互无法查看（IT教学、IT笔记、生活日记）
  7. 增加照片页面，仅个人或给予账号的可以查看
    • 新增一个插入照片功能，将照片放置到腾讯云图床中
    • 建立一个MySQL数据库，放置照片拍摄时间、照片创建时间、照片的图床url地址、照片标题、照片描述等信息
    • 可以以时间顺序的方式来网页上展示照片
    • 路径为/life/photo

可以做的方式

  • [ ] 让现有van-blog单独成一个体系，进行小修改
  • [x] 页面着色修改
  • [ ] 各分栏内容隔开，相互不可见
  • [ ] 阅读栏,reading
  • [ ] IT记录栏,it
  • [ ] 教学栏，teching
  • [ ] 日常生活栏，life
  • [ ] 单独设计首页，然后将van-blog链接进去，网址链接均保持不变
  • [x] 重新设计个人网站
    • [x] 关于我| 联系我
  • [x] 疑问，域名访问如何解决？
    • 考虑用blog.liufeisheng.cn这个域名
    • 然后www.liufeisheng.cn首页，链接进去
  • [ ] 增加照片、视频页面
  • [x] 将原来的域名链接全放进去/post/id保持不变

目前想法

  • 用django设计网站，docker容器封闭，放进服务器使用
  • 使用一级域名www.liufeisheng.cn
  • 将van-blog、crm系统之类链接进去，原链接保持不变
  • 参考https://www.kuangstudy.com/course建立课程、项目
  • [ ] 个人介绍原先的保留不变，新增 www.liufeisheng.cn/me链接，内容一致，但放到django项目中

整体框架思路

要在Windows上使用Django开发个人网站，并最终在Ubuntu系统上通过Docker进行封闭部署，你可以按照以下步骤进行：

1. 在Windows系统上进行Django开发

  1. 安装依赖工具 - 确保安装了Python（推荐使用最新版本）。 - 安装pip包管理工具。 - 使用pip安装virtualenv，以便在虚拟环境中隔离你的项目依赖。

  2. 创建虚拟环境并安装Django bash python -m venv page_env page_env\Scripts\activate pip install django 激活虚拟环境后，使用pip安装Django。

  3. 创建Django项目 bash django-admin startproject mysite cd mysite python manage.py startapp myapp

  4. 使用VSCode进行开发

  • 打开VSCode并加载你的Django项目目录。
  • 安装VSCode的Python扩展，以获得语法高亮、代码提示等功能。
  • 配置.vscode文件夹中的settings.json文件，使VSCode可以正确识别和使用虚拟环境。
  1. 在Windows上进行测试运行 bash python manage.py runserver 确保在Windows环境中可以成功运行Django项目。

网站基本设置

静态文件设计

1. 设计Django项目的静态目录

在Django项目中，通常会有一个专门的目录用于存放静态文件（如CSS、JavaScript、图像等）。为了设计一个静态目录，可以按以下步骤操作：

  1. 创建静态目录结构 在Django项目的根目录下创建一个名为static的文件夹。可以按如下结构进行组织： mysite/ ├── manage.py ├── mysite/ │ ├── settings.py │ ├── urls.py │ └── ... ├── myapp/ │ ├── views.py │ └── ... └── static/ ├── css/ ├── js/ └── images/ - css/ 用于存放所有的CSS文件。 - js/ 用于存放所有的JavaScript文件。 - images/ 用于存放所有的图像文件。

  2. 在Django设置中配置静态目录 打开settings.py文件，添加或修改以下配置： python STATIC_URL = '/static/' STATICFILES_DIRS = [ BASE_DIR / "static", ] 这样，Django将能够正确地识别和使用你定义的静态目录。

2. 设计一个简洁的首页

接下来，设计一个简单的首页模板，介绍网站的基本信息。假设你的网站主要介绍个人信息和一些项目经历，可以按以下步骤进行：

  1. 创建一个HTML模板文件 在myapp/templates/myapp/目录下创建一个名为index.html的文件。目录结构应如下： mysite/ ├── myapp/ │ ├── templates/ │ │ └── myapp/ │ │ └── index.html └── ...

  2. 编写HTML代码 index.html文件可以设计为如下的简单介绍页面：

编辑个人主页，注意在要前面加{% load static %} 加载静态文件

```html {% load static %}

Welcome to My Personal Website

Welcome to My Personal Website

Explore my projects and learn more about me.

About Me

This is a brief introduction about myself. You can include your background, education, and current work here.

My Projects

Here is a list of my projects. Each project can have a brief description and a link to more details.

© 2024 My Personal Website. All rights reserved.

```

  1. 创建对应的CSS文件 在static/css/目录下创建一个名为style.css的文件，编写一些基本样式： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }

header { background-color: #333; color: #fff; padding: 20px; text-align: center; }

section { padding: 20px; margin: 10px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

footer { text-align: center; padding: 10px; background-color: #333; color: #fff; } ```

  1. 配置视图和路由 最后，在views.py文件中创建一个视图函数来渲染首页，并在urls.py中配置路由： ```python # views.py from django.shortcuts import render

def index(request): return render(request, 'myapp/index.html')

# urls.py from django.urls import path from . import views

urlpatterns = [ path('', views.index, name='index'), ] ```

通过以上步骤，你将拥有一个基本的静态目录结构，并且首页设计也已完成。你可以根据需要进一步扩展和美化网站。

确保myapp已经在settings.py中的INSTALLED_APPS列表里注册。如果没有注册，Django将无法识别和使用该应用。

pythonCopy codeINSTALLED_APPS = [
    ...
    'myapp',  # 确保 myapp 在这里
]

myapp/urls.py 的作用

myapp/urls.py 是你在myapp应用内的路由配置文件。它专门处理由mysite/urls.py分发过来的请求。通过这种方式，你可以将不同的应用模块化管理。通常你会在myapp/urls.py中定义与这个应用相关的URL和视图对应关系。例如：

from django.contrib import admin
from django.urls import path,include
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.index,name='index')
]
  1. HTML 与 CSS 基本设计基础： 学习网页的基本结构和样式布局，掌握响应式设计技巧。
  2. JavaScript 动态网页设计： 通过 JavaScript 实现网页的动态交互功能，提升用户体验。
  3. 前端开发框架： 使用 jQuery、Vue 等前端框架，开发模块化和高效的前端应用。
  4. 数据库管理： 学习数据库的基本操作与管理，为网站提供数据支持。
  5. Linux 操作系统与服务器配置： 了解 Linux 系统的基本操作，以及服务器的配置与管理。
  6. Web 安全： 掌握常见的 Web 安全漏洞与防护措施，确保网站的安全性。
  7. Docker 容器技术： 通过 Docker 容器化技术，实现应用的快速部署与管理。
  8. Git 版本管理： 学习 Git 的使用方法，进行项目的版本控制与协作开发。

上传至Ubuntu的Docker容器部署

网站大致设计好之后 ，通过git上传至服务器，然后放到Docker容器中实现

  1. 编写Dockerfile 在Django项目的根目录下创建一个Dockerfile，内容如下：

```dockerfile # 使用官方Python镜像 FROM python:3.x

# 设置工作目录 WORKDIR /usr/src/app

# 复制项目的requirements.txt文件 COPY requirements.txt ./

# 安装项目依赖 RUN pip install --no-cache-dir -r requirements.txt

# 复制项目文件到工作目录 COPY . .

# 运行Django服务器 CMD ["python", "manage.py", "runserver", "0.0.0.0:8002"] ```

  1. 编写requirements.txt文件 使用以下命令生成依赖文件：

bash pip freeze > requirements.txt

  1. 编写docker-compose.yml文件（可选） 如果需要使用数据库等服务，可以编写docker-compose.yml文件。

代码上传和同步

  1. 使用Git进行版本控制和上传

  • 在本地Windows系统上使用Git管理代码，并将代码推送到GitHub、GitLab等远程代码仓库。

  • 在Ubuntu系统上通过Git拉取代码并进行Docker构建和部署。

因为上传至githubb会出现网络问题，后续出现故障，帮上传至gitee

git init 
git add .
git commit -m '首次上传'
git remote add gitee  https://gitee.com/xiaofei90/flynn-page.git
git push -u gitee main

然后在ubuntu服务器用git 下拉仓库信息

git clone  https://gitee.com/xiaofei90/flynn-page.git

打开项目目录，

2. Docker化并部署到Ubuntu系统

  1. 在Ubuntu系统上构建和运行Docker容器

  • 将你的Django项目代码上传到Ubuntu系统。

  • 创建了docker-compose.yaml文件

    bash docker-compose up -d

  2. 配置Nginx和Docker（可选） 如果需要使用Nginx作为反向代理，还需要编写Nginx配置文件并将其与Docker容器集成。

3.

现有Flynn_page的docker容器与mongo容器连接

vanblog-mongo-1和vanblog-vanblog-1两个容器已经位于同一个网络vanblog_default中。这表明他们可以通过此网络相互通信，使用容器名称作为主机名进行通信。

如果您想让flynn-page-web-1容器也能访问MongoDB，您可以将它连接到vanblog_default网络。这样，所有的容器都在同一个网络中，能够更简单地进行数据共享和通信。以下是如何操作的步骤：

  1. 连接flynn-page-web-1到vanblog_default网络：

bash docker network connect vanblog_default flynn-page-web-1

  1. 确认连接是否成功： 您可以再次检查flynn-page-web-1的网络配置来确认它是否已经加入到vanblog_default网络： bash docker inspect --format='{{.NetworkSettings.Networks}}' flynn-page-web-1

完成这些步骤后，flynn-page-web-1就可以使用vanblog-mongo-1容器名来访问MongoDB数据库了。确保在flynn-page-web-1的数据库配置中使用正确的容器名称和端口。例如：

DATABASE_URL="mongodb://vanblog-mongo-1:27017/vanBlog"

vanBlog为实际使用的数据库名称。这样设置后，flynn_page应用应能正确连接到MongoDB数据库。

项目与mongo数据库连接

要在 Django 项目中连接到 Docker 容器中的 MongoDB 数据库，需要使用 Django 的第三方库，因为 Django 默认不支持 MongoDB。一个常用的解决方案是使用 djongo，这是一个允许 Django 使用 MongoDB 作为数据库后端的适配器。

安装 Djongo

首先，确保安装了 djongo。在您的项目环境中运行以下命令：

bash
Copy code
pip install djongo

配置 Django settings.py

然后，您需要修改 settings.py 中的 DATABASES 设置，以使用 djongo 并指定 MongoDB 的连接字符串。

pythonCopy codeDATABASES = {
    'default': {
        'ENGINE': 'djongo',
        'NAME': 'vanBlog',  # 数据库名
        'ENFORCE_SCHEMA': False,
        'CLIENT': {
            'host': 'mongodb://vanblog-mongo-1:27017/vanBlog'  # MongoDB URI
        }
    }
}

注意事项

  • Djongo 版本兼容性：请确保 djongo 的版本与您使用的 Django 和 MongoDB 版本兼容。
  • MongoDB URI：请确保您的 MongoDB URI 是正确的，特别是 Docker 容器的名称 vanblog-mongo-1 是 MongoDB 服务容器的名称，并且两者在同一个 Docker 网络中，以确保可以相互通信。
  • 测试连接：在应用这些设置后，尝试运行 Django 的迁移或访问数据库以测试连接是否成功。

使用 Djongo 连接到 MongoDB 会使 Django 能够通过其 ORM 系统操作 MongoDB，但要注意这种方法可能不支持 Django 的所有特性，如某些类型的查询和迁移。如果您的项目对数据库的要求比较复杂，建议评估是否真的适合使用 MongoDB 作为后端。如果需要更传统的关系数据库支持，可能需要考虑 PostgreSQL 或 MySQL 等选项。

在网页中将markdown文本渲染成网页文本

将 Markdown 转换为 HTML： 为了将 Markdown 转换为 HTML，可以使用 markdown 模块。

实现步骤

  1. 安装 Markdown 模块：

如果您还没有安装 markdown 模块，可以通过以下命令进行安装：

pip install markdown

  1. 更新 Django 视图： 在视图中，将文章内容从 Markdown 转换为 HTML。

``` pythonCopy codeimport markdown from django.shortcuts import render, get_object_or_404 from .models import Article

def article_detail(request, article_id): article = get_object_or_404(Article, id=article_id) # 将 Markdown 转换为 HTML article_content_html = markdown.markdown(article.content, extensions=['extra']) return render(request, 'article_detail.html', {'article': article, 'article_content_html': article_content_html}) ```

  1. 更新 HTML 模板： 在模板中渲染经过 Markdown 转换的 HTML 内容，并确保显示动态的图片 URL。

```

   <h1>{{ article.title }}</h1>
   <div class="content">
       <!-- 渲染 Markdown 转换后的 HTML 内容 -->
       {{ article_content_html|safe }}
   </div>

```

在网页中渲染图床图片

项目启动及持久化运行

项目启动，找到项目目录所在位置，然后

python manage.py runserver便可运行，但当终端关闭时会停止运行

如果希望你的 Django 项目在生产环境中稳定运行，要经过以下设置

具体的gunicorn配置文件和systemd服务文件的示例，以帮助您在Ubuntu服务器上持久化运行您的Django项目。

1. gunicorn配置文件

首先创建一个gunicorn配置文件，比如命名为gunicorn.conf.py，可以放在您的项目根目录/var/www/FlynnPage/flynn-page/下面：

pythonCopy code# /var/www/FlynnPage/flynn-page/gunicorn.conf.py

import multiprocessing

bind = "0.0.0.0:8000"  # 绑定的IP和端口
workers = multiprocessing.cpu_count() * 2 + 1  # 根据CPU核心数设定工作进程数
loglevel = 'info'  # 日志级别
errorlog = '/var/www/FlynnPage/flynn-page/logs/gunicorn-error.log'  # 错误日志文件
accesslog = '/var/www/FlynnPage/flynn-page/logs/gunicorn-access.log'  # 访问日志文件

确保日志目录存在，或者修改为已存在的目录。

2. systemd服务文件

接着创建一个systemd服务文件，比如命名为flynnpage.service，放在/etc/systemd/system/目录下：

iniCopy code# /etc/systemd/system/flynnpage.service

[Unit]
Description=Gunicorn instance to serve FlynnPage
After=network.target

[Service]
User=fei
Group=www-data
WorkingDirectory=/var/www/FlynnPage/flynn-page
Environment="PATH=/var/www/FlynnPage/venv/bin"
ExecStart=/var/www/FlynnPage/venv/bin/gunicorn --config /var/www/FlynnPage/flynn-page/gunicorn.conf.py mysite.wsgi:application

[Install]
WantedBy=multi-user.target

这里，ExecStart指令中使用了之前创建的gunicorn配置文件，并指定了WSGI应用程序的位置。

3. 确保日志目录存在且权限正确

首先，检查 logs 目录是否存在。如果不存在，创建该目录：

bash


Copy code
mkdir -p /var/www/FlynnPage/flynn-page/logs

确保 Gunicorn 和系统服务有权限在日志目录中创建文件并写入日志。你可以将该目录的所有者设置为 fei 用户，或者将其权限设置为适当的值。

sudo chown -R fei:fei /var/www/FlynnPage/flynn-page/logs
sudo chmod -R 755 /var/www/FlynnPage/flynn-page/logs

启动和管理服务

创建好服务文件后，您需要重新加载systemd管理器配置，使新的服务文件生效，然后启动服务：

sudo systemctl daemon-reload
sudo systemctl start flynnpage.service
sudo systemctl enable flynnpage.service

检查服务状态

您可以通过以下命令检查服务的状态：

sudo systemctl status flynnpage.service

这样设置之后，您的Django项目将会作为一个系统服务运行，可以实现自动启动、重启和管理。如果出现任何错误，可以查看gunicorn的日志文件或使用上述状态命令进行诊断。

本地代码与远程代码git同步

要将本地代码更新为远程仓库的最新代码，可以按照以下步骤进行操作：

  1. 获取远程仓库的更新:

首先，你需要从远程仓库拉取最新的代码。在终端中进入你的项目目录，执行以下命令：

bash git fetch origin

这会从远程仓库获取更新，但不会自动合并到你的本地分支。

  1. 检查分支状态（可选）:

如果你想查看远程和本地分支的差异，可以使用以下命令：

bash git status

  1. 合并远程更新到本地分支:

如果你想直接将远程分支的更新合并到本地分支，可以使用以下命令：

bash git pull origin <your-branch-name>

例如，如果你在 main 分支上，则执行以下命令：

bash git pull origin main

这会将远程仓库中 main 分支的最新代码合并到本地 main 分支。

  1. 处理冲突（如果有的话）:

如果你的本地代码与远程仓库的代码有冲突，git 会提示你解决冲突。此时需要手动编辑有冲突的文件，并在解决冲突后执行以下命令：

bash git add <conflicted-file> git commit

然后就可以继续工作了。

通过这些步骤，你可以将本地代码更新为远程仓库的最新代码。

20241105 部署到本地Linux系统

首先直接从github下载项目代码 ，然后打开项目目录

这个时候不需要创建本地虚拟环境，因为 Dockerfile 中已经指定了使用 Python 3.10.12 的镜像。Docker 的优势就是可以独立于本地环境运行。让我们直接使用这个 Dockerfile：

  1. 确保项目文件准备完整：
# 确保在 /usr/local/mysite 目录下有：
- Dockerfile
- requirements.txt
- manage.py
- 其他项目文件
  1. 构建 Docker 镜像：
# 在 Dockerfile 所在目录执行
docker build -t mysite .
  1. 使用 docker-compose.yaml配置：
version: '2'  # 适配您的旧版本 docker-compose
services:
  web:
    build: .  # 添加 build 指令，使用当前目录的 Dockerfile
    image: mysite  # 改用与 docker build 相同的镜像名
    ports:
      - "82:82"  # 改用与您的 Dockerfile 相同的端口
    volumes:
      - /usr/local/mysite:/usr/local/mysite  # 改用正确的路径

使用 docker-compose 命令：

# 构建镜像
docker-compose build

# 启动服务
docker-compose up -d

这个修改后的 docker-compose.yaml 完全可以替代docker run 命令，它们实现的是相同的功能。

  1. 检查容器状态：
# 查看容器是否正常运行
docker ps

# 查看容器日志
docker logs mysite_web
  1. 如果需要进入容器：
docker exec -it mysite_web bash
  1. 如果需要停止和删除容器：
docker stop mysite_web
docker rm mysite_web

注意事项：

  1. 本地 Python 版本（2.7.16）不会影响 Docker 容器的运行
  2. Docker 会使用 Dockerfile 中指定的 Python 3.10.12
  3. 确保 requirements.txt 文件包含了所有必要的依赖
  4. 如果是 Django 项目，可能需要在 settings.py 中修改 ALLOWED_HOSTS 设置

新增照片上传功能

主要包含以下几个部分:

  1. 创建模型存储图片信息
  2. 实现图片上传视图
  3. 添加模板显示上传界面
  4. 配置腾讯云 COS 作为图床

20241209部署到阿里云服务器

因为阿里云服务器无法访问docker hub，所以用之前的docker容器部署会出错

直接部署反而容易些

先创建虚拟python运行环境，然后pip安装requirements.txt的库，

最后直接python manage.py runserver 0.0.0.0:82就能运行

但需要注意的是requirements.txt有一些库的版本不对，或者冲突 ，可以根据实际情况调整

最后创建systemctl服务来运行这个网站

20241224

  • 调整了网页的整体布局，看起来美观一些
  • 通过caddy添加了https访问信息