使用WordPress搭建个人博客

结城 建站 16 次阅读 3476 字 发布于 2024-06-26 预计阅读时间: 16 分钟

一、解决方案

首先我们需要分析问题的解决方案，运行个人博客需要web服务器，数据库，个人博客前端。而WordPress可以完美将三者结合为一个整体，是简历个人博客的首选。

WordPress 建立在 PHP 和 MySQL 之上，并使用 GPLv2 进行许可，是互联网上超过 43% 的站点的首选平台。因为其部署简单，只需简单的几条命令部署后便不必再书写任何代码，用使用软件的习惯创建您的个人博客而不必陷入繁杂的代码书写中。

要运行 WordPress，建议您的服务器支持：

  • PHP 7.4+。
  • MySQL 版本 8.0+ 或 MariaDB 版本 10.5+。
  • HTTPS
  • 至少800MB内存（推荐内存2G或以上）和10G以上的存储（用于存储站点资源）
  • phpmyadmin等数据库管理软件（可选，如果您需要外部编辑数据库）

Web服务器推荐使用 Apache 或者 Nginx， 因为其稳定性和丰富的功能适合运行 WordPress，但是任何支持 PHP 和 MySQL 的服务器都可以。

注意： 如果您处于只有较旧 PHP 或 MySQL 版本的旧环境中，WordPress 仍然可以在 7.0+ 以及 MySQL 5.5.5+ 上工作。 然而，这些版本已经结束了它们的官方支持周期，并且可能使您的站点暴露于安全漏洞之中。

主机vps建议购买国内大厂的云服务器，如腾讯云，阿里云，华为云等。

以下配置均为完全自建所需的配置，即不使用外部mysql，且具备较充足的冗余能力推荐配置为---2核2G---轻量应用服务器；当然有钱上2核4G的云服务器更好，但是对于搭建个人博客而言并不划算。

服务器细致配置条目如下：

  • 至少准备2G以上的内存，且分配至少1G的交换空间用于存储缓存数据，wordpress以内存换性能和便捷性，没有大内存玩什么wordpress
  • 使用docker全量部署参考内存[mysql8.0 --400MB * wordpress --400MB openresty --50MB]
  • 确保购买的服务器使用SSD硬盘，机械硬盘会严重拖慢交换分区速度
  • 国内服务器务必备案，否则服务器厂商会封禁80、443端口，无法直接进行域名解析访问网站
  • 确保服务器带宽为3M或以上，且配置CDN加速（你也不想10秒还打不开你的网站吧）

切记：最小权限原则，自行搭建的mysql配置只允许本机访问，且使用独立的数据库用户，只在数据审核时放通mysql的外部访问！！！！！

1-面板安装-推荐

安装主流的图形化linux管理面板，如宝塔，1panel等，使用图形面板能极大提升服务器运维效率，这种方法最为推荐。

面板安装完成后，只需要进入管理面板的应用商店，安装docker容器后在容器内依次安装MySQL，WordPress，OpenResyt即可。使用面板安装免去了繁杂的配置文件调整部分，如需个性化配置也有图形化页面支持，非常方便。

软件安装面板

容器化安装应用

2-命令安装

注：使用命令安装可能会遇到各种奇奇怪怪的问题，博主更推荐使用面板工具一键部署。

相比传统软件直接安装，容器化部署极少产生垃圾，出现问题可直接摧毁容器重新拉取镜像而不改变主机运行环境，且更换迁移服务更加方便，是新一代的软件安装方式。

  1. 安装docker
  2. 拉取MySQL，WordPress，OpenResty
  3. 启动并创建WordPress数据库
  4. 配置OpenResyt反向代理，启动WordPress

首先，我们通过命令行安装 Docker，更换 Docker 软件源为阿里云，然后拉取 WordPress、MySQL 和 OpenResty，并成功搭建个人博客。

重要提示：由于大陆地区的网络问题，docker镜像的官方源极不稳定，此处推荐直接将镜像源替换为国内的私服，例如阿里云，腾讯云，华为云等。非大陆地区服务器则不必担心。

本文章示例采取更换为阿里云镜像。

1. 安装 Docker

首先，更新你的包索引并安装必要的软件包：

sudo apt-get update
sudo apt-get install apt-transport-https ca-certificates curl software-properties-common

添加 Docker 的官方 GPG 密钥：

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

将 Docker 仓库添加到 APT 源中：

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

更新包索引，并安装 Docker CE：

sudo apt-get update
sudo apt-get install docker-ce

启动 Docker 并设置开机自启：

sudo systemctl start docker
sudo systemctl enable docker

2. 更换软件源为阿里云

首先，创建或编辑 Docker 配置文件 /etc/docker/daemon.json：

sudo nano /etc/docker/daemon.json

添加以下内容以使用阿里云镜像源：

{
  "registry-mirrors": ["https://<你的阿里云加速器ID>.mirror.aliyuncs.com"]
}

注意：阿里云镜像源是私有镜像源，必须登录自己的容器管理页面才能查看，如果没有就需要自己申请一个

保存文件并重新启动 Docker 服务：

sudo systemctl daemon-reload
sudo systemctl restart docker

3. 拉取并运行 WordPress 和 MySQL

创建一个 Docker 网络，以便容器之间可以互相通信：

docker network create wordpress-network

拉取并运行 MySQL 容器：

docker run --name wordpress-mysql --network wordpress-network -e MYSQL_ROOT_PASSWORD=your_password -e MYSQL_DATABASE=wordpress -e MYSQL_USER=wordpress -e MYSQL_PASSWORD=wordpress_password -d mysql:8.2

拉取并运行 WordPress 容器：

docker run --name wordpress --network wordpress-network -e WORDPRESS_DB_HOST=wordpress-mysql:3306 -e WORDPRESS_DB_USER=wordpress -e WORDPRESS_DB_PASSWORD=wordpress_password -e WORDPRESS_DB_NAME=wordpress -p 8080:80 -d wordpress

3.1 MySQL 容器配置

我们之前已经启动了MySQL数据库。

docker run --name wordpress-mysql --network wordpress-network -e MYSQL_ROOT_PASSWORD=your_password -e MYSQL_ATABASE=wordpress -e MYSQL_USER=wordpress -e MYSQL_PASSWORD=wordpress_password -d mysql:8.2

启动的命令参数具有以下释义，这些环境变量的含义如下：

  • MYSQL_ROOT_PASSWORD：MySQL root 用户的密码。
  • MYSQL_DATABASE：要创建的数据库名称（在这个例子中是 wordpress）。
  • MYSQL_USER：要创建的数据库用户（在这个例子中是 wordpress）。
  • MYSQL_PASSWORD：数据库用户的密码（在这个例子中是 wordpress_password）。

3.2 WordPress 容器配置

我们已经使用以下命令启动了 WordPress 容器：

docker run --name wordpress --network wordpress-network -e WORDPRESS_DB_HOST=wordpress-mysql:3306 -e WORDPRESS_DB_USER=wordpress -e WORDPRESS_DB_PASSWORD=wordpress_password -e WORDPRESS_DB_NAME=wordpress -p 8080:80 -d wordpress

这些环境变量的含义如下：

  • WORDPRESS_DB_HOST：MySQL 容器的地址和端口（在这个例子中是 wordpress-mysql:3306，因为我们使用了 Docker 网络 wordpress-network）。
  • WORDPRESS_DB_USER：WordPress 连接数据库时使用的用户名（在这个例子中是 wordpress）。
  • WORDPRESS_DB_PASSWORD：WordPress 连接数据库时使用的密码（在这个例子中是 wordpress_password）。
  • WORDPRESS_DB_NAME：WordPress 使用的数据库名称（在这个例子中是 wordpress）。

3.3 访问 WordPress 安装页面

启动所有容器后，打开浏览器并访问 http://你的服务器IP:8080。你将看到 WordPress 的安装页面。

3.4 配置 WordPress 数据库

在 WordPress 安装页面上，你需要输入以下数据库信息：

  • 数据库名称：wordpress（与 MYSQL_DATABASE 一致）
  • 用户名：wordpress（与 MYSQL_USER 一致）
  • 密码：wordpress_password（与 MYSQL_PASSWORD 一致）
  • 数据库主机：wordpress-mysql:3306（与 WORDPRESS_DB_HOST 一致）
  • 表前缀：wp_（可以使用默认值，也可以根据需要进行更改）

输入这些信息后，点击“提交”按钮。如果数据库配置正确，WordPress 将连接到数据库并继续安装过程。

3.5 完成 WordPress 安装

按照页面提示完成 WordPress 的安装过程，包括设置站点标题、管理员用户名和密码等信息。完成后，你将能够访问并管理你的 WordPress 博客。

通过以上步骤，你应该已经成功配置了 WordPress 数据库，并完成了 WordPress 的安装。

4. 拉取并运行 OpenResty

拉取并运行 OpenResty 容器：

docker run --name openresty --network wordpress-network -p 80:80 -v /path/to/your/nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf:ro -d openresty/openresty:alpine

你需要创建一个适当的 nginx.conf 文件，以便 OpenResty 能够代理到 WordPress 容器。以下是一个示例配置文件：

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    upstream wordpress {
        server wordpress:80;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://wordpress;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

将这个配置文件保存为 nginx.conf，并将其路径替换为 /path/to/your/nginx.conf。

5. 验证安装

打开浏览器并访问 http://你的服务器IP，你应该会看到 WordPress 的安装页面。按照提示完成 WordPress 的安装和配置。

通过以上步骤，你将成功在 Linux 服务器上安装 Docker，更换 Docker 软件源为阿里云，并通过 Docker 容器搭建 WordPress、MySQL 和 OpenResty，成功搭建个人博客。

3-手动上传 X

这种方式仅适合需要公司内网或开发环境等无外网访问的情况，个人用户极度不推荐这种方式。由于购买的云服务器现在均包含可访问的独立IP地址，故此处不讲解这种安装方式。

二、主题美化

WordPress支持可扩展的主题美化，在开源社区包含众多开源的主题，且绝大多数主题均为开箱即用的发行版。

对于Sakura主题，我们可以采取以下方式优化页面显示

1. 悬挂备案号

凡是大陆地区的服务器进行互联网访问必须悬挂备案号，可以在页面尾部添加一下HTML代码：

  <p style="text-align: left; position: absolute; right: 3%;  font-family: 'Arial', sans-serif; font-size: 14px; color: #555; background-color: #f9f9f9; padding: 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
      版权所有 © 2024 Atri 保留所有权利.
      <br>
      备案号：ICP备案号占位123123123
  </p>

显示效果如下：

版权所有 © 2024 Atri 保留所有权利.
备案号：ICP备案号占位123123123

2. 控制台输出信息

在页尾添加以下JS代码

<!-- JavaScript控制台语句 -->  
   <script>
      function printBeautifulMessages(...messages) {
    // 定义样式
    const styles = [
      'color: white', 
      'background: linear-gradient(to right, #ff7e5f, #feb47b)',
      'padding: 10px 20px',
      'font-size: 20px',
      'border-radius: 10px',
      'text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3)',
      'font-family: "Comic Sans MS", cursive, sans-serif'
    ].join(';');

    // 打印每条消息
    messages.forEach(message => {
      console.log(`%c${message}`, styles);
    });
  }

  // 调用函数打印多条消息
  printBeautifulMessages(
    '你好，异世界的漂泊者，欢迎访问先行公约',
    '如遇到问题，请发送邮件至邮箱:admin@waveraven.cn',
    '我们的管理员会在24小时内回复您的邮件'
  );
 </script>

当页面完成加载后，浏览器web页面控制台便会输出以下内容（按F12便可开启浏览器控制台）：

3. 发送弹幕小按钮

在页尾添加以下JS代码和样式表：

JS代码：

  <!-- 弹幕容器 -->
  <div id="danmaku-container"></div>

  <!-- 弹幕按钮 -->
  <button id="danmaku-button">别点我>-<</button>

  <!-- JavaScript弹幕库 -->
  <script>
    // 随机弹幕内容数组，录入想要现实的内容。
    const danmakuTexts = [
      '这是一个弹幕！'
    ];

    // 弹幕函数
    function createDanmaku() {
      const container = document.getElementById('danmaku-container');
      const danmaku = document.createElement('div');
      danmaku.className = 'danmaku';

      // 随机选择弹幕内容
      const randomText = danmakuTexts[Math.floor(Math.random() * danmakuTexts.length)];
      danmaku.innerText = randomText;

      // 随机位置和速度
      const startPos = Math.random() * (window.innerHeight - 50) + 'px';
      const speed = Math.random() * 5 + 5 + 's';

      danmaku.style.top = startPos;
      danmaku.style.animationDuration = speed;

      container.appendChild(danmaku);

      // 动画结束后移除弹幕
      danmaku.addEventListener('animationend', () => {
        container.removeChild(danmaku);
      });
    }

    // 按钮点击事件
    document.getElementById('danmaku-button').addEventListener('click', createDanmaku);

     // 滚动事件，滑动到底部才显示按钮
    window.addEventListener('scroll', () => {
        const button = document.getElementById('danmaku-button');
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            button.style.display = 'block';
        } else {
            button.style.display = 'none'; /* 离开底部时隐藏按钮 */
        }
    });
  </script>

弹幕样式：

<style>
    #danmaku-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 9999;
    }

    .danmaku {
      position: absolute;
      white-space: nowrap;
      font-size: 20px;
      color: white;
      text-shadow: 1px 1px 2px black;
      animation: moveDanmaku linear, fadeInOut 5s;
    }

    @keyframes moveDanmaku {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-100%);
      }
    }

    @keyframes fadeInOut {
      0% {
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

   #danmaku-button {
        position: fixed;
        bottom: 20px;
        left: 5%; /* 改为左边显示 */
        padding: 10px 20px;
        font-size: 16px;
        z-index: -1; /* 确保按钮在弹幕之上 */
        display: none;
        background-color: #007BFF; /* 按钮背景色 */
        color: #ffffff; /* 按钮文字颜色 */
        border: none; /* 去掉边框 */
        border-radius: 5px; /* 圆角边框 */
        cursor: pointer; /* 鼠标悬停时的光标形状 */
        transition: background-color 0.3s; /* 背景色过渡效果 */
    }

    #danmaku-button:hover {
        background-color: #0056b3; /* 鼠标悬停时的背景色 */
    }

    #danmaku-button:active {
        background-color: #003d79; /* 鼠标按下时的背景色 */
    }
  </style>

此时，将页面滑动到最底部，便可显示发送弹幕按钮，点击即可发送弹幕：

弹幕效果演示

注：在sakura主题中使用弹幕按钮，只有在主页面下滑到最低端才会显示，离开页面底部后便会被图层遮盖隐藏，如果想使按钮常态显示，可删除以下代码：

// 滚动事件，滑动到底部才显示按钮
    window.addEventListener('scroll', () => {
        const button = document.getElementById('danmaku-button');
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            button.style.display = 'block';
        } else {
            button.style.display = 'none'; /* 离开底部时隐藏按钮 */
        }
    });

参考文档

给时光以生命，给岁月以文明
最后更新于 2026-05-22