使用CSDN 开发云搭建导航网站

本文记录了采用 CSDN 开发云网站搭建的过程，手把手带你搭建起一个导航网站，内容供学习参考。

WordPress和WebStack简介

网上有很多开源免费的软件，例如WordPress、MeLog、Hexo、OneBlog等等，这些开源系统都能满足博客的需求。除了满足博客需求以外，还需要提供导航的功能。

因此最终选择了WordPress和WebStack，原因如下：

• WordPress功能强大，安装部署容易，插件生态很庞大；
• 使用PHP脚本语言，修改内容会比较方便；
• WebStack是现成的主题，可以直接安装使用；
• WordPress中文官网：适用于博客到大型网站的 CMS (内容管理系统)

WebStack GitHub：https://github.com/owen0o0/WebStack

安装与部署

1. 服务器环境搭建LNMP
   1.1 购买Linux服务器
   可以选择 腾讯云、阿里云、华为云、CSDN开发云等国内的云厂商，当然有服务器的话也可以直接使用现有服务器来搭建。

考虑到网站的功能非常的单一，购买一台最轻量的服务器就可以了。

最终我在CSDN 开发云上购买一台入门级的服务器。

为什么没有选择阿里云？阿里云被称套路云，套路如此之深，虽然一直防着，但还是不可避免要上套。想了解阿里云的套路，可以自行百度“阿里云 套路云”，了解各种套路。

腾讯云又称良心云，套路少，优惠多，但仅对新客的某些机型有效，续费时价格可能是你当时购买时的十倍，老用户是不能享受低折扣的。下面是我访问腾讯云 618活动的截图，由于我是腾讯云的用户，已不能享受优惠的价格。

CSDN 的价格相对腾讯云非首单的价格，还是要低一些，这是我选择 CSDN 的原因

接下来就是安装所需要的软件Nginx、MariaDB、PHP。MariaDB数据库管理系统是MySQL的一个分支。

安装 LNMP

安装Nginx

1. 执行以下命令，在 /etc/yum.repos.d/ 下创建 nginx.repo 文件。

vi /etc/yum.repos.d/nginx.repo

2. 按 i 切换至编辑模式，写入以下内容。

[nginx] 
name = nginx repo 
baseurl = https://nginx.org/packages/mainline/centos/7/$basearch/ 
gpgcheck = 0 
enabled = 1

3. 按 Esc，输入 :wq，保存文件并返回。
4. 执行以下命令，安装 nginx。

yum install -y nginx

5. 执行以下命令，打开 default.conf 文件。

vi /etc/nginx/conf.d/default.conf

6. 找到 server{...}，并将 server 大括号中相应的配置信息替换为如下内容。以下配置增加对.php的支持。

Tips:

• 按Esc退出编辑模式，键入100dd 删除100行
• 按 i 切换至编辑模式

server {
	listen       80;
	root   /usr/share/nginx/html;
	server_name  localhost;
	#charset koi8-r;
	#access_log  /var/log/nginx/log/host.access.log  main;
	#
	location / {
		  index index.php index.html index.htm;
	}
	#error_page  404              /404.html;
	#redirect server error pages to the static page /50x.html
	#
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
	  root   /usr/share/nginx/html;
	}
	#pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
	#
	location ~ .php$ {
	  fastcgi_pass   127.0.0.1:9000;
	  fastcgi_index  index.php;
	  fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
	  include        fastcgi_params;
	}
}

7. 按 Esc，输入 :wq，保存文件并返回。
8. 执行以下命令启动 Nginx。

systemctl start nginx

9. 执行以下命令，设置 Nginx 为开机自启动。

systemctl enable nginx 

10. 在本地浏览器中访问以下地址，查看 Nginx 服务是否正常运行。

http://云服务器实例的公网IP

显示如下，则说明 Nginx 安装配置成功。

安装MariaDB

MariaDB和MySQL完全兼容，且性能更好。

1. 执行以下命令，查看系统中是否已安装 MariaDB。

rpm -qa | grep -i mariadb

返回结果类似如下内容，则表示已存在 MariaDB。

为避免安装版本不同造成冲突，请执行以下命令移除已安装的 MariaDB。

yum -y remove 包名

• 若返回结果为空，则说明未预先安装，则执行下一步。

2. 执行以下命令，在 /etc/yum.repos.d/ 下创建 MariaDB.repo 文件。

vi /etc/yum.repos.d/MariaDB.repo

3. 按 i 切换至编辑模式，写入以下内容，添加 MariaDB 软件库。

# MariaDB 10.7 CentOS repository list - created 2022-03-17 06:47 UTC
# http://downloads.mariadb.org/mariadb/repositories/
[mariadb]
name = MariaDB
baseurl = https://mirrors.cloud.tencent.com/mariadb/yum/10.7/centos7-amd64
gpgkey=https://mirrors.cloud.tencent.com/mariadb/yum/RPM-GPG-KEY-MariaDB
gpgcheck=1

为了加快安装速度，以上配置使用了腾讯云镜像源。您可前往 MariaDB 官网 获取其他版本及操作系统的 MariaDB 软件库安装信息。

4. 按 Esc，输入 :wq，保存文件并返回。
5. 执行以下命令，安装 MariaDB。此步骤耗时较长，请关注安装进度，等待安装完毕。

yum -y install MariaDB-client MariaDB-server

6. 执行以下命令，启动 MariaDB 服务。

systemctl start mariadb

7. 执行以下命令，设置 MariaDB 为开机自启动。

systemctl enable mariadb

8. 执行以下命令，验证 MariaDB 是否安装成功。

mysql

显示结果如下，则成功安装。

9. 执行以下命令，退出 MariaDB。

\q

安装PHP

1. 依次执行以下命令，更新 yum 中 PHP 的软件源。

rpm -Uvh https://mirrors.cloud.tencent.com/epel/epel-release-latest-7.noarch.rpm

rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm

2. 执行以下命令，安装 PHP 7.2 所需要的包。

yum -y install mod_php72w.x86_64 php72w-cli.x86_64 php72w-common.x86_64 php72w-mysqlnd php72w-fpm.x86_64

3. 执行以下命令，启动 PHP-FPM 服务。

systemctl start php-fpm

4. 执行以下命令，设置 PHP-FPM 服务为开机自启动。

systemctl enable php-fpm

验证环境配置

当您完成环境配置后，可以通过以下验证 LNMP 环境是否搭建成功。

1. 执行以下命令，创建测试文件。

echo "<?php phpinfo(); ?>" >> /usr/share/nginx/html/index.php

2. 执行以下命令，重启 Nginx 服务。

systemctl restart nginx

2. 在本地浏览器中访问如下地址，查看环境配置是否成功。

http://云主机实例的公网IP

显示结果如下， 则说明环境配置成功。

到此为止，已经完成了LNMP（Linux、Nginx、MariaDB、PHP）的配置

配置数据库

根据 MariaDB 版本，设置用户身份验证方式有一定区别，具体步骤请参见 MariaDB 官网。

1. 执行以下命令，进入 MariaDB。

mysql

2. 执行以下命令，创建 MariaDB 数据库。例如 “wordpress”。

CREATE DATABASE wordpress;

3. 执行以下命令，创建一个新用户。例如 “wordpress”，登录密码为 C123456。

CREATE USER 'wordpress'@'localhost' IDENTIFIED BY 'C123456';

4. 执行以下命令，赋予用户对 “wordpress” 数据库的全部权限。

GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpress'@'localhost' IDENTIFIED BY 'C123456';

5. 执行以下命令，设置 root 帐户密码。

MariaDB 10.7 在 CentOS 系统上已增加了 root 帐户免密登录功能，为了数据库安全，请执行以下步骤设置您的 root 帐户密码并牢记。

ALTER USER [email protected] IDENTIFIED VIA mysql_native_password USING PASSWORD('you_password');

6. 执行以下命令，使所有配置生效。

FLUSH PRIVILEGES;

7. 执行以下命令，退出 MariaDB。

\q

安装和配置 WordPress

下载 WordPress

WordPress 可从 WordPress 官方网站下载 WordPress 最新中文版本并安装，本教程采用 WordPress 中文版本。

1. 执行以下命令，删除网站根目录下用于测试 PHP-Nginx 配置的index.php文件。

rm -rf /usr/share/nginx/html/index.php

2. 依次执行以下命令，进入/usr/share/nginx/html/目录，并下载与解压 WordPress。

cd /usr/share/nginx/html

wget https://cn.wordpress.org/wordpress-5.9.2-zh_CN.tar.gz

tar zxvf wordpress-5.9.2-zh_CN.tar.gz

修改 WordPress 配置文件

1. 依次执行以下命令，进入 WordPress 安装目录，将wp-config-sample.php文件复制到wp-config.php文件中，并将原先的示例配置文件保留作为备份。

cd /usr/share/nginx/html/wordpress

cp wp-config-sample.php wp-config.php

2. 执行以下命令，打开并编辑新创建的配置文件。

vi wp-config.php

3. 按 i 切换至编辑模式，找到文件中 MySQL 的部分，并将相关配置信息修改为以下内容。

	// ** MySQL settings - You can get this info from your web host ** //
	/** The name of the database for WordPress */
	define('DB_NAME', 'wordpress');
	
	/** MySQL database username */
	define('DB_USER', 'wordpress');
	
	/** MySQL database password */
	define('DB_PASSWORD', 'C123456');
	
	/** MySQL hostname */
	define('DB_HOST', 'localhost');

Tips:

按 i 进入编辑模式。按 x 删除当前字符。按 Esc 退出当前模式

4. 修改完成后，按 Esc，输入 :wq，保存文件返回。

设置目录权限

修改目录权限，确保主题、插件、上传图片等功能正常使用

chmod 777  /usr/share/nginx/html/
chmod -R 777  /usr/share/nginx/html/wp-content/

也可以用下列方法更安全的设置目录权限，这样只允许php用户拥有web目录的权限。

查看 /etc/php-fpm.d/www.conf user 和 group 定义，把web目录的所有权给这个用户。这里笔者的用户和用户组是apache。用以下命令把web目录的权限赋予用户apache。

chown -R apache:apache /usr/share/nginx/html/

验证 WordPress 安装

1. 在浏览器地址栏输入http://域名或云服务器实例的公网IP/wordpress 文件夹，例如：

http://202.xxx.xxx.xx/wordpress

转至 WordPress 安装页，开始配置 WordPress。

2. 根据 WordPress 安装向导提示输入以下安装信息，单击【安装 WordPress】，完成安装。

所需信息	说明
站点标题	WordPress 网站名称。
用户名	WordPress 管理员名称。出于安全考虑，建议设置一个不同于 admin 的名称。因为与默认用户名称 admin 相比，该名称更难破解。
密码	可以使用默认强密码或者自定义密码。请勿重复使用现有密码，并确保将密码保存在安全的位置。
您的电子邮件	用于接收通知的电子邮件地址。

现在可以用登录 WordPress 博客，并开始发布博客文章了。

安装WebStack主题

（1）访问WordPress 版 WebStack 导航主题 GitHub网址，下载源文件

Github 网址： https://github.com/owen0o0/WebStack

源文件zip地址：https://codeload.github.com/owen0o0/WebStack/zip/refs/heads/master

（2）访问管理台“外观”-“主题”，上传WebStack主题

点击【外观】-> 【安装主题】-> 【上传主题】 ，

选择 WebStack 源文件，点击【立即安装】

（3）访问管理台“外观”-“主题”，启用WebStack主题

（4）启用完毕之后，可以看到页面已经变成了WebStack主题，但里面内容是空的。接下来就开始学习如何录入数据，把空网站变成以下的样子。

WebStack的使用方法

配置左侧导航

在WebStack中左侧导航是用到了系统中的“网址分类”。路径：网址-网址分类，通过配置网站分类可以控制左侧导航栏目。

配置内容

每一个导航的内容，对应着是网址；通过添加网址，即可填充内容。例如填充CSDN，操作如下。

• 网址：点击后跳转到网站
• 描述：底部描述
• 排序：展示的位置，越大越靠前
• 图标：本地上传logo图片，也可以使用api服务。如果api拉取的图片效果不好，则本地上传图片。

安装 WordPress 需要Linux 系统和 Web 开发的知识，不少WordPress初学者由于缺乏这方面的知识储备，在安装WordPress过程中遇到了很多困难。另一方面，即使是 Linux 系统的老手，安装+配置好 WordPress 也需要花费 1-2 个小时的时间。

针对安装难这个问题，CSDN开发云研发并提供的Wordpress 镜像环境，预装了官方下载的Wordpress 5.9, PHP 7.4, MariaDB 10.7, Nginx等组件，可在云服务器上一键部署，并能一键升级到官方当前版本，主题和插件任意升级，省去繁琐的安装配置过程。

点这里一键安装 WordPress 环境