本网站搭建的全过程

wangwen
部署文档
2023-09-22
545热度
0评论

自建workpress的全过程

服务器的选型

本网站搭建服务器选型为阿里云ECS服务器：ecs.e-c1m1.large ，配置：2C2G 40G 10M，系统：Alibaba Cloud Linux 2.1903 LTS 64位，3年费用总计：440.17元。

服务的部署

1、基础环境docker的部署

#卸载docker
rpm -qa | grep docker |xargs rpm -e
#部署依赖
yum install -y yum-utils device-mapper-persistent-data lvm2
#部署docker
yum-config-manager  --add-repo https://dnload.docker.com/linux/centos/docker-ce.repo
yum install docker-ce docker-ce-cli containerd.io docker-compose
#启动docker并设置开机自启
systemctl start docker & systemctl enable docker

2、基础环境mysql5.7的部署

#docker部署mysql5.7，--restart=always参数设置容器开机自启，-v目录持久化 本地目录：容器目录，-p端口映射 本地端口：容器端口，$password为自己设置的mysql数据库root的密码
docker run -d --name mysql --restart=always -v /data/mysql:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=$password -e MYSQL_DATABASE=wordpress -p 3306:3306 mysql:5.7

3、docker部署wordpress

#docker部署wordpress；--link mysql关联容器mysql进行通信
docker run -d --name wordpress --restart=always --link mysql  -v /data/wordpress:/var/www/html -e WORDPRESS_DB_HOST=172.17.0.2:3306 -e WORDPRESS_DB_USER=root -e WORDPRESS_DB_PASSWORD=$password -e WORDPRESS_DB_NAME=wordpress -p  8080:80  wordpress:latest

4、启动完后，设置完用户账号密码，即可进入首页

5、wordpress目录结构如下：

5.1、favicon.ico 为网站的ico

5.2、wp-admin为网站后台目录

5.3、wp-content为网站主题所在目录

6、大部分数据存储在了数据库中

7、若有任何疑问，欢迎添加个人微信进行交流。

: 微信二维码

8、遇到的问题

8.1、进入后台若打开是空白，这个问题通常是由于在PHP代码之外或在PHP代码执行之前有输出发生导致的，解决方法，编辑wp-config.php文件在文件最顶端加入以下3行

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

根据报错，将空白行删除即可解决。

8.2、更换服务器ip地址存在一些问题，ip地址会写到数据库wp_options和postmeta中，因此更换地址后需要更换上述两张表中的ip；使用域名后上面问题可以避免

9、不配https证书方法

###官网
       server {
            #listen       80;
            listen       443 ssl;
            server_name  www.banwan.net banwan.net;
            charset      urf-8;
            ssl_certificate  /etc/nginx/ssl/www.banwan.net.pem ;
            ssl_certificate_key /etc/nginx/ssl/www.banwan.net.key ;
        #    ssl_session_timeout 5m;
        #    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        #    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        #    ssl_prefer_server_ciphers on;
           rewrite ^(.*) http://$host$1 redirect;
   }

           server {
            listen       80;
            #listen       443 ssl;
            server_name  www.banwan.net banwan.net;

       location / {
            root   html;
            index  index.html index.htm;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Content-Type";
            proxy_pass http://127.0.0.1:8080;

           }

    }

11、优化

在主题文件/data/wordpress/wp-content/themes/document/theme-document/functions.php下添加如下内容：

/**
* 统计全站总访问量/今日总访问量/当前是第几个访客
* @return [type] [description]
*/
function wb_site_count_user(){
$addnum = 1; //初始化访问人数
session_start();
$date = date('ymd',time());
if(!isset($_SESSION['wb_'.$date]) && !$_SESSION['wb_'.$date]){
$count = get_option('site_count');
if(!$count || !is_array($count)){
$newcount = array(
'all' => 0,
'date' => $date,
'today' => $addnum
);
update_option( 'site_count', $newcount );
}else{
$newcount = array(
'all' => ($count['all']+$addnum),
'date' => $date,
'today' => ($count['date'] == $date) ? ($count['today']+$addnum) : $addnum
);
update_option( 'site_count', $newcount );
}
$_SESSION['wb_'.$date] = $newcount['today'];
}
return;
}
add_action('init', 'wb_site_count_user');
//输出访问统计
function wb_echo_site_count(){
session_start();
$sitecount = get_option('site_count');
$date = date('ymd',time());
echo '<p>总访问量：<span style="color:#7df1ff">'.absint($sitecount['all']).'</span> &nbsp;&nbsp; 今日访问量：<span style="color:#7df1ff">'.absint($sitecount['today']).'</span> &nbsp;&nbsp; 您是今天第：<span style="color:#7df1ff">'.absint($_SESSION['wb_'.$date]).'</span> 位访问者</p>';
}

在本人实在目录左下角添加统计信息，因为修改文件footer.php，添加如下内容

<?php
<?php wb_echo_site_count(); ?> 
get_template_part( './template/index/footer' );
nicen_theme_config('document_footer_tongji');
/*
 * 是否显示结构化数据
 * */
if(nicen_theme_showStructure()){
    get_template_part( './template/index/structure' );
}
wp_footer();//wordpress底部代码
?>
</body>
</html>

在footer.php文件底部添加如下内容，记录访问ip地址

<?php
// 获取访客的IP地址
$visitor_ip = $_SERVER['REMOTE_ADDR'];
// 访问日志文件路径，这里假设是在WordPress根目录下创建一个名为访问记录.txt的文件
$log_file_path = dirname(__FILE__) . '/counter.txt';
// 记录访问信息到文件
$log_message = date('Y-m-d H:i:s') . ' - IP: ' . $visitor_ip . PHP_EOL;
// 使用文件追加模式打开文件，确保每次访问都添加新的一行而不是覆盖原有内容
if (file_put_contents($log_file_path, $log_message, FILE_APPEND)) {
    // 成功写入
} else {
    // 写入失败，可以在这里添加错误处理逻辑
}
?>

网站新闻优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulletin Display</title>
</head>
<body>

<h1>每日新闻热点</h1>
<div id="bulletinList"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetchBulletinData();
    });

    async function fetchBulletinData() {
        const url = 'https://apis.tianapi.com/bulletin/index';
        const apiKey = '76f5a21322d94fe8b42fa101da6fd997'; // 注意：在实际部署中不要硬编码API密钥，应考虑更安全的存储方式
        
        try {
            const response = await fetch(`${url}?key=${apiKey}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const dataModel = await response.json();

            if ('result' in dataModel && Array.isArray(dataModel.result.list)) {
                const bulletinList = document.getElementById('bulletinList');
                dataModel.result.list.forEach((item, index) => {
                    if ('title' in item) {
                        const listItem = document.createElement('div');
                        listItem.textContent = `${index + 1}、${item.title}`;
                        bulletinList.appendChild(listItem);
                    }
                });
            } else {
                console.error("Error: Expected structure not found in the provided JSON.");
                bulletinList.textContent = "Error fetching bulletins.";
            }
        } catch (error) {
            console.error('There was a problem with the fetch operation:', error);
            const bulletinList = document.getElementById('bulletinList');
            bulletinList.textContent = "Unable to fetch bulletins.";
        }
    }
</script>

</body>
</html>

新版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulletin Display</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
            -webkit-overflow-scrolling: touch; /* 优化iOS滑动 */
            overflow-y: auto;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        #bulletinList {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
        }
        
        #bulletinList div {
            padding: 12px;
            border-bottom: 1px solid #eee;
            line-height: 1.5;
        }
        
        #bulletinList div:last-child {
            border-bottom: none;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            #bulletinList div {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>每日新闻热点</h1>
    <div id="bulletinList"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetchBulletinData();
    });

    async function fetchBulletinData() {
        const url = 'https://apis.tianapi.com/bulletin/index';
        const apiKey = '76f5a21322d94fe8b42fa101da6fd997'; // 注意：在实际部署中不要硬编码API密钥，应考虑更安全的存储方式
        
        try {
            const response = await fetch(`${url}?key=${apiKey}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const dataModel = await response.json();

            if ('result' in dataModel && Array.isArray(dataModel.result.list)) {
                const bulletinList = document.getElementById('bulletinList');
                dataModel.result.list.forEach((item, index) => {
                    if ('title' in item) {
                        const listItem = document.createElement('div');
                        listItem.textContent = `${index + 1}、${item.title}`;
                        bulletinList.appendChild(listItem);
                    }
                });
            } else {
                console.error("Error: Expected structure not found in the provided JSON.");
                bulletinList.textContent = "Error fetching bulletins.";
            }
        } catch (error) {
            console.error('There was a problem with the fetch operation:', error);
            const bulletinList = document.getElementById('bulletinList');
            bulletinList.textContent = "Unable to fetch bulletins.";
        }
    }
</script>

</body>
</html>