超仔细图解：从 0 搭建一个个人网站，亦太简单了吧-天涯论坛

u1jodi1q 发表于 2024-7-29 10:51:31

超仔细图解：从 0 搭建一个个人网站，亦太简单了吧

大众好，我是明哥。
前两天我用WordPress 给自己搭建了一个网站，全部过程非常的顺利，体验非常地好，于是我就全部过程、以及其中的有些搭建心得，记录下来。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/4e1482dc285a47afa1b96a94d9b38560~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=KiyYCNQp4G4HO0F3FawOfj%2BJ%2BmY%3D" style="width: 50%; margin-bottom: 20px;">
倘若你亦正好有搭建个人网站的想法，那样本文会给你一个参考，亦许看了这篇文案你就能够不消再百度、乃至谷歌了，由于我会写得 足够的细致而系统。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 写在前面</h2>
说到网站，其实我搭建过挺多个了。
从最起始的 Hexo 静态博客，到后来运用 Django 仿照 Hexo -Next 主题自己写了一个有后端的个人博客。
再后来又发掘了 Sphinx + Github + ReadtheDocs 完美的文档编排组合，用了搭建了四个网站，分别是：黑魔法 Python：<a style="color: black;">http://magic.iswbm.com</a>PyCharm 中文指南：<a style="color: black;">http://pycharm.iswbm.com</a>Python 编程时光：<a style="color: black;">http://python.iswbm.com</a>Go 编程时光：<a style="color: black;">http://golang.iswbm.com</a>
这些四个网站，很好的将我这几年来写的文案进行分类，并以精美的排版展此刻每一个需要的人眼前。
四个网站，用的都是三级子域名，可见在我心里，她们无论哪一个都没法作为我心中的个人网站。
原由有几点：内容过于分散，不可表率一个完整的我。可定制性太低：无头像，无评论系统等等对 SEO 太不友好了，有害于揭发托管在 ReadtheDocs上，拜访速度太慢。虽然有不少让我心痛的地区，然则它们却有流淌在基因里的优良：无成本（时间成本当然不算啦）：你不需要服务器，亦不需要域名。新手友好，只要简单配置，就能马上快速上手。好似扯远了，还是说回 WP 的网站搭建吧。
在教程之前呢，我先 show 一下我的成果，欢迎你去点点点~
网站位置：<a style="color: black;">https://iswbm.</a>com
<img src="https://p3-sign.toutiaoimg.com/pgc-image/0c9f9ea4d4da4a7ea685ce8d69a528b4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=n8g2aMvNm6QbINJyWr269sssDGQ%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 准备工作</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">一台 Linux 服务器</h3>
在起始搭建网站之前，当然第1步是购买一个属于自己的『服务器』。
你能够选取如下途径进行购买：阿里云腾讯云Ucloud等的大厂服务器，不要贪图便宜去买国外的服务器厂商，由于速度很慢非常多，很影响体验。
我的便是在 <a style="color: black;">阿里云</a>上购买的，刚起始买个最低配置的服务器就行，以后不足用了，能够慢慢升级，扩容。
能够先领个券，再购买更实惠：<a style="color: black;">点击领券</a>
倘若是学生能够在领券页面里找到学生专享，服务器9.5元/月，直接点击购买就可。不是学生亦能够组团购买，更便宜，服务器购买就不多说了，拿钱就好了。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">一个专属的域名</h3>
买了服务器后，你就会持有一个公网ip，倘若网站搭建起来了，你完全能够运用这个 ip 去拜访，但仅供研发、测试运用。
倘若要真正运营起来，想要有流量，还得搞一个域名，方便你推广。
域名的购买意见和上面服务器运用同一个厂商，能够省去有些麻烦。例如阿里云购买的域名要备案是需要你在阿里云下有一台服务器的。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">一个远程登陆软件</h3>
因为后面我运用的是手工安排的方式，因此要登陆服务器进行操作。
登陆的办法有两种：
厂商供给的掌控台界面登陆：Workbench 和 VNC
<img src="https://p3-sign.toutiaoimg.com/pgc-image/0acc9362d3244c96a97860cfbbc2296e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=6o44ywJ4oOUN%2FPNUi6X%2BEhOx1w8%3D" style="width: 50%; margin-bottom: 20px;">
这种办法针对不经常登陆服务器运维的人来讲，还是挺香的。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/fbbfd4c80a094dc9b5d74ea3f7f8d259~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=Pe9gzyiFTTK6y%2F9w74xDx8n2y7A%3D" style="width: 50%; margin-bottom: 20px;">
自己下载专业的远程登陆软件：Xshell 或 CRTSecure
<img src="https://p3-sign.toutiaoimg.com/pgc-image/957e46f3c20442fa8454957350c9d476~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=OILU%2BIjtaBIIamnFkDGe5%2ByaVug%3D" style="width: 50%; margin-bottom: 20px;">
在运用这些远程登陆软件时，你需要在服务器厂商掌控台上面先获取到三个信息服务器公网IP服务器SSH端口服务器远程连接秘码
关于 Xshell 怎样运用的，能够自动百度搜索，教程非常多。
能够到阿里云上去购买，选最低配置就足够啦，后续拜访量起来了再扩容升级。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 安排方式选取</h2>
安排方式，可分为两种运用服务器管理软件，实现自动化安排，最著名的便是 <a style="color: black;">宝塔面板</a> 。手动登陆远程服务器，实现脚本化安排。那样怎样选取呢？
运用宝塔安排，门槛低，只要会界面点一点就可。
而运用脚本自己手工安排，需要你学会远程登陆服务器：运用 Xshell 或 直接运用厂商供给的在线SSH窗口有些 Linux 的基本操作：例如 Vi/Vim 的运用，目录及文件的基本操作等在这儿意见大众跟着我运用第二种办法，亦便是手工运用脚本进行安排。
原由有二：第1次接触，更精细的安排过程会让你对 WordPress 的运作方式有更深的理解，例如运用了那些软件，装了那些包？自己搭建了网站，难免以后会碰到各样各样的服务器问题，尽早的接触 Linux，熟练各项配置，对以后的运维工作会有特别有帮忙。<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 安排 LNMP</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3.1 什么是 LNMP</h3>
LNMP 是 Linux + Nginx + MySQL + PHP 组合的简写。
类似的组合还有：LAMP 的全叫作是 Linux + Apache + MySQL + PHPLNAMP 的全叫作是 Linux + Nginx + Apache + MySQL + PHP其中： 
Linux 是类 Unix 计算机操作系统的统叫作，是目前最流行的免费操作系统。表率版本有：debian、centos、ubuntu、fedora、gentoo 等。
Nginx 是一个高性能的 HTTP 和反向代理服务器，亦是一个 IMAP/POP3/SMTP 代理服务器。
Apache 是世界运用排名第1的Web服务器软件。它能够运行在几乎所有广泛运用的计算机平台上，因为其跨平台和安全性被广泛运用，是最流行的Web服务器端软件之一。
PHP 是一种在服务器端执行的嵌入 HTML 文档的脚本语言。
MySQL 是一个关系型数据库管理系统。
这些软件一个一个安装比较费力，尤其是数据库。
因此呢有人把这些软件的安装安排过程集作为一个 Shell 脚本，而你只要下载并执行它就能够了。简直不要太方便。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3.2 安装 LNMP</h3>
下载 LNMP 安装脚本（日前最新版本是 1.7 ，我安装的是 1.5，更加多版本可查看: <a style="color: black;">https://lnmp.org/download.html）</a>$ wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz
解压并执行它$ tar zxf lnmp1.5.tar.gz && cd lnmp1.5 && ./install.sh lnmp
接下来会显现海量的选项，倘若你不是很懂各个选项间的区别，按默认就行啦
运行脚本后，首要会让你选取数据库的版本：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/2b6a8b08abd44fe986fb5e773c92b8cf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=TSCS6lWIan2B0FI%2Biq%2FFiVF6TyM%3D" style="width: 50%; margin-bottom: 20px;">
无特殊需要，意见运用默认配置，直接回车或输入序号再回车。
选好数据库，会让你设置数据库 root 用户的秘码，此时倘若你直接回车，会默认设置为 lnmp.org#随机数字，
<img src="https://p3-sign.toutiaoimg.com/pgc-image/e52166f671d741838e2821a618806a32~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=WCc2kMmNGN4qU93bY4WsbkxxPSA%3D" style="width: 50%; margin-bottom: 20px;">
在输入秘码的时候，针对新手有一点重视：倘若输入有错误需要删除，需要按住Ctrl再按Backspace键进行删除。
秘码输好后，回车进入下一步
<img src="https://p3-sign.toutiaoimg.com/pgc-image/83a71e8d4be447c5a1986f8a8fd7787c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=bShJXQE2Fv9BEs08g7exfHXuzsI%3D" style="width: 50%; margin-bottom: 20px;">
询问是不是需要启用 MySQL InnoDB，InnoDB引擎默认为开启，通常意见开启，直接回车或输入 y 。
倘若确定确实不需要该引擎能够输入 n，(MySQL 5.7+版本没法关闭InnoDB),输入完成，回车进入下一步：选取 PHP 版本，意见安装 PHP 7+的版本
<img src="https://p3-sign.toutiaoimg.com/pgc-image/3e01a4a18b804d1188e9660fdf5fc124~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=PA9C%2Bi%2F26tAd6hzFTwLks2rHpdw%3D" style="width: 50%; margin-bottom: 20px;">
回车进入下一步，选取是不是安装内存优化：
<img src="https://p26-sign.toutiaoimg.com/pgc-image/8413cfb0bce44385b07782ed470c89d5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=NHmhMgnKqtdE%2Fof%2FhuKhwBHjVBY%3D" style="width: 50%; margin-bottom: 20px;">
能够选取不安装、Jemalloc或TCmalloc，输入对应序号回车，直接回车为默认为不安装。
倘若是LNMPA或LAMP的话还会提示设置邮箱和选取Apache：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/34365d0b2b4e4722af324523a5a5346d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=QNkBKwGs376PnFSdihxnxu5c6WA%3D" style="width: 50%; margin-bottom: 20px;">
“Please enter Administrator Email Address:”，需要设置管理员邮箱，该邮箱会在报错时表示在错误页面上。再选取Apache版本：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/49cf4261560f4ad88d49189fa4c618c1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=4lmLNdvQ4CvoBRfASC7VqFSVZ24%3D" style="width: 50%; margin-bottom: 20px;">
按提示输入对应版本前面的数字序号，回车。
提示"Press any key to install...or Press Ctrl+c to cancel"后，按回车键确认起始安装。 LNMP脚本就会自动安装编译Nginx、MySQL、PHP、phpMyAdmin等软件及关联的组件。
安装时间可能会几非常钟到几个小时不等，重点是设备的配置网速等原由会导致影响。
倘若表示Nginx: OK，MySQL: OK，PHP: OK
<img src="https://p3-sign.toutiaoimg.com/pgc-image/8c797a0d08744e73aa31c75664fd483c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=9W%2ByMnbuReAYRHZ9MV806wvUkA8%3D" style="width: 50%; margin-bottom: 20px;">
显示安装成功。
最后几行的输出3306 端口是 MySQL 监听的80 是 HTTP 端口22 是 SSH 端口<h3 style="color: black; text-align: left; margin-bottom: 10px;">3.3 配置 Nginx</h3>
安装好后，运用如下指令查看nginx配置文件（倘若你的服务器上找不到该文件，那请运用 find / -name nginx.conf 搜索一下）$ cat /usr/local/nginx/conf/nginx.conf
你会看到如下内容：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/6918fa2754d4404da96e473cd68a0f76~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=ms7fvVvj9XMVOh3tWF5PA3KwGlU%3D" style="width: 50%; margin-bottom: 20px;">
上图显示，安装好的nginx将网站的根目录设置为/home/wwwroot/default，这个能够按照自己的爱好进行修改。
用浏览器打开http://ip，能够看到如下内容：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/f6305aee6fe24e0aacb2ba4f4815ec88~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=BuNCb9ZCMRGIlBNPYSMnFpxS6OE%3D" style="width: 50%; margin-bottom: 20px;">
其实这便是一个简单的网页demo了，自己随便修改index.html，就会有区别的内容。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 安装 WordPress</h2>
<a style="color: black;">WordPress</a>是运用PHP语言（这亦是咱们上面为何要安装 PHP 的原由）研发的博客平台，亦便是一个博客框架。
上一步安装的 LNMP，只是保准了 WordPress 的基本运行环境。
想要把你的个人网站跑起来，咱还需要安装 WordPress 。
办法亦很简单，下面跟着操作就行。
第1步：安装 wordpress 安装包并解压到 /home/wwwroot$ wget https://cn.wordpress.org/latest-zh_CN.zip && unzip latest-zh_CN.zip -d /home/wwwroot第二步：登录MySQL（秘码在前面 安排LNMP 时你设置过），创建wordpress表，创建完后输入exit退出。$ mysql -u root -p
Enter password:
MySQL > create database wordpress;
第三步：运用 vim 修改 nginx 配置文件（不会vim的自动百度）$ vim /usr/local/nginx/conf/nginx.conf
找到网站根目录位置，如下图所示：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/2b4f437456af42828d96f04a5d4943c7~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=4Hzg3ERnba8oFeP6OAO9Kd7etqs%3D" style="width: 50%; margin-bottom: 20px;">
修改成如下内容：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/e2a315fafc9e4d58b4970208bb1c567a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=zV%2FQvQddwxRV6KfAhPl3Jhh9a6I%3D" style="width: 50%; margin-bottom: 20px;">
随后，运用wq保留配置退出即可。
验证nginx是不是有配置错误：$ nginx -t倘若显现ok，successful字样，说明无错误。无错误，重新加载nginx：$ nginx -s reload修改wordpress目录权限：$ cd/home/wwwroot && chown -R www wordpress/ && chgrp -R www wordpress/
用浏览器打开<a style="color: black;">http://ip/wp-admin/setup-config.php，你能够看到如下内容：</a>
<img src="https://p3-sign.toutiaoimg.com/pgc-image/6b67e9bf65f14ddd82c93213ef826c17~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=vbxvMmq47TxFm%2F3V2njgOMEhOaw%3D" style="width: 50%; margin-bottom: 20px;">
此刻就起始，进行安装。填写信息如下：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/cf4d29130c3349e88018c047f8b17c6e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=PjZk5IaVsLOuOJycBDvQ%2BwI96Sg%3D" style="width: 50%; margin-bottom: 20px;">
其中，*** 改为你设置的MySQL数据库秘码。点击提交，显现如下内容：
<img src="https://p9-sign.toutiaoimg.com/pgc-image/89d23939d47744ac9ca7cb5085b8a24d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=xab2ciEBNFbrV0opviW0l0JNMEQ%3D" style="width: 50%; margin-bottom: 20px;">
在/home/wwwroot/wordpress下，创建并编写wp-config.php文件：$ vim wp-config.php将上图内容复制进去并wq保留退出，而后点击此刻安装。最后便是配置用户信息了，这个是你登录wordpress用户后台的，要记住：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/c040dd1ae43346858cf47d4cbdedb72c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=cyca%2Fou%2FtZmmpQEJsI4c9CktdNQ%3D" style="width: 50%; margin-bottom: 20px;">
最后点击安装WordPress，安装成功会显现如下界面：
<img src="https://p3-sign.toutiaoimg.com/pgc-image/b324869267bb4ce98e2074d942297243~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=cq4YpptxbErXL229UpesfrN1ywE%3D" style="width: 50%; margin-bottom: 20px;">
点击登录，输入账户秘码，就能够登录自己的 wordpress 后台了。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/3ff699b7ab0840d39d74469d767b4d75~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=v5FGDB6uyCUTuNKQskaI2uw9eyo%3D" style="width: 50%; margin-bottom: 20px;">
此时候你运用浏览器去拜访 <a style="color: black;">http://ip</a> ，就能够看到你搭建的第1个网站了。
此时你看到的这个网站，是 wordpress 默认为你安装的免费主题（应该有三个），可能并不是那样的好看，但不碍事，后面我会教大众怎样挑选一个自己合适的主题，把你的网站装扮得有模有样。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5. 装扮你的网站</h2>
到这儿，你的网站安排已然所有完成，然则还差最后一步，亦是运用 WordPress 最为核心的一步：让你的网站看起来更加专业，更加成熟。
为此咱们需要做两件事：安装主题：让网站变得好看安装插件：丰富网站的功能<h3 style="color: black; text-align: left; margin-bottom: 10px;">5.1 安装主题</h3>
一样都运用的 WordPress 的网站，外观上却天差地别。有的很酷炫，有点很简约，这是由于选了区别的主题（能够理解为皮肤）。
在你安装完 WordPress 后，本身就自带了几个免费的主题。
几乎没人会运用它们，由于实在没什么亮点（便是丑）。
在 WordPress 的自带了主题商店，里面有海量的免费主题，各式各样的都有，可能有你爱好的。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/601b52cea9594c7b956323f92a6c4278~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=JqOrrQ1%2BN%2FcyveQfj9Gz81kyNz8%3D" style="width: 50%; margin-bottom: 20px;">
在这儿要说明一点，我的主题不是在商店里安装的，而是我经过搜索引擎找到了一个比较清爽的主题，很符合我的审美，我装扮过后的效果如下。
<img src="https://p26-sign.toutiaoimg.com/pgc-image/b6cb3cd72fa04ba5a3a177c02551a912~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=JAXUqyu7Rg5lg520cREUdQovSV0%3D" style="width: 50%; margin-bottom: 20px;">
倘若你想和我用同样的主题，我已然将安装包打包好了（需要的添加我微X领取: stromwbm），直接下载后，按下图的方式上传到你的 WordPress 后台安装就行。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/73267c4176fa4daf9b8e9eb02e7cb267~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=tG4knza5CAK6By3D2UT6Cla34yc%3D" style="width: 50%; margin-bottom: 20px;">
<h3 style="color: black; text-align: left; margin-bottom: 10px;">5.2 安装插件</h3>
日前我安装的插件比较少，然则基本够用啦，下面列举一下，倘若你有什么好插件介绍，能够评论区举荐一下：
1. WP User Avatar
原生 WordPress 默认运用 Gravatar头像，用户（包含访客评论）的头像调取都是按照所留邮箱匹配的 Gravatar 头像。
无 Gravatar 怎么办？
只要装上 WP User Avatar 这个插件就能能够运用 WordPress 媒介库中的照片做为默认头像了。
2. WP-PostViews
安装了 WP-PostViews，就能够统计你文案的浏览次数。
需要两步配置
第1步：设置表示的文字
<img src="https://p3-sign.toutiaoimg.com/pgc-image/d810b227f51e41f4907cfde1886740e2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=jPr6cjhD85bK4x4BlSB%2F5qpHEzY%3D" style="width: 50%; margin-bottom: 20px;">
第二步：在你要表示的位置写入如下代码
<img src="https://p3-sign.toutiaoimg.com/pgc-image/fc143e5395ef4d4b801abdc33660e02b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=XOCWn30oaCFshVuqvUW1o3VcecE%3D" style="width: 50%; margin-bottom: 20px;">
效果如下
<img src="https://p3-sign.toutiaoimg.com/pgc-image/0b43cd46073e4fd9993d2d74ec1f4e75~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=503VzOwEQMQfVBbvELyGAsgKaOY%3D" style="width: 50%; margin-bottom: 20px;">
3. Post Views Counter
咦，上面已然安装了一个统计阅读量的插件，怎么这边又举荐一个。
上面那个统计阅读量的插件，其实做的比较粗糙。
这是什么意思。
例如同一个 ip 连续连刷10次，WP-PostViews 的阅读量会 +10，但倘若你运用 Post Views Counter，这个规则能够由你来定，能够只表示一次。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/e8ec9d3f9cdb4254a4129af4d0b88b21~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=d88MAh4NTGHrAtm7zBtm6KxelMo%3D" style="width: 50%; margin-bottom: 20px;">
安装完这个插件后，一样需要进行有些配置
<img src="https://p3-sign.toutiaoimg.com/pgc-image/3f7d28f3e593490b9df46c337373bae3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=FACzzJIIpQvrGibbut5CiKpdTKg%3D" style="width: 50%; margin-bottom: 20px;">
为何这儿选取手动呢？
<img src="https://p3-sign.toutiaoimg.com/pgc-image/98316a61396e4b02864a75d712ba9bda~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=JsM%2Fzx0dsIDtq7qn0s0ceKdXSaw%3D" style="width: 50%; margin-bottom: 20px;">
由于我发掘不管在内容之前，还是在内容之后，表示的位置都比较尴尬（它会换行）。
倘若你和我用同样的主题，想和我有同样的效果，那样你选取手动之后，还要按下图指示修改下代码，新增如下一段代码。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/c3c83556b0ef420099708771fa97b389~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=4OtuUIk0ZPnd29oCXCQrfzF2Bas%3D" style="width: 50%; margin-bottom: 20px;">
效果如下
<img src="https://p3-sign.toutiaoimg.com/pgc-image/017b20a0d3374080840f162ccb6ce249~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=adWfPiHhNDwJcs2DTl%2BP3PBJTj4%3D" style="width: 50%; margin-bottom: 20px;">
4. WP Editor.md
或许这是一个WordPress中最好，最完美的Markdown编辑器。
能够像 md2all 和 mdnice 那样，即时表示 Markdown 的渲染效果，爱好在后台写文案的能够安装（其实我是先本地 Typora 写好了再复制上去的）。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/8b077824862e43dcbd1256c539e59328~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=LADnTGpOLpIONaekg0pSrbJAZUQ%3D" style="width: 50%; margin-bottom: 20px;">
5. Simple Custom CSS
在修改 WordPress主题时，CSS修改是最经常用到的办法，例如调节字体、调节颜色、边距之类的都需要用到自定义的CSS代码。
虽然说 WordPress 本身供给了CSS修改的功能，不外运用起来有非常多的坏处端，其中最麻烦的一点便是每次更换或更新主题之前的修改都会消失，需要重复的添加。
运用 Simple Custom CSS 这个插件能够避免这种尴尬，安装后他会在外观下新增一个自定义CSS 的选项。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/648b0b9fdce3471bb4af66d39e511dd3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=Eet5LTJBmjoLuzqgASBw0yPP5CU%3D" style="width: 50%; margin-bottom: 20px;">
6. LuckyWP Table of Contents
运用我这个主题，在文案页面是无目录索引的，针对读者来讲，其实挺不方便的。
因此呢我安装了 LuckyWP Table of Contents，能够在我的文案中生成一个目录。目录默认是隐匿的（当然你亦能够设置默认展示），需要的话再点击展开。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/2b0d0e0fabe448098cf7b5c680ab04c0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=Etsk7HuvSKFmgtINB4pQRmrZekE%3D" style="width: 50%; margin-bottom: 20px;">
点击目录能够直接转到对应位置。
但可能是我这个主题的原由，我的网站没法转，倘若有人晓得原由，还请留言区评论一下。
7. 百度搜索推送管理
百度搜索推送管理插件是一款针对WP研发的功能非常强大的百度和Bing搜索引擎收录辅助插件。
利用该插件，站长能够快速实现百度搜索资源平台和Bing站长平台URL数据推送及网站百度收录数据查找等。
目的在于进一步提高网站的百度和Bing搜索引擎收录效率，提高网站SEO优化效果；及帮忙站长经过该插件认识网站百度收录数据状况，基于数据统计参考进一步对网站内容进行调节与优化。
详细运用办法比较繁杂，自己百度一下吧
8. Smart SEO Tool
Smart SEO Tool是一款专门针对WordPress研发的智能SEO优化插件，与众多WordPress的SEO插件不同样的是，Smart SEO Tool更加简单易用，帮忙站长快速完成WordPress博客/网站的SEO基本优化。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">6. 优化你的网站</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">6.1 运用固定链接</h3>
先在后台按如下图示进行设置
<img src="https://p3-sign.toutiaoimg.com/pgc-image/96cd88067f974ffc98d427ba01cf4eda~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=qpaHiGiGaZv4WgAJb0Fg5y0bM3s%3D" style="width: 50%; margin-bottom: 20px;">
然则这般不足，要运用固定链接，服务器还需要开启 rewrite 的功能。
倘若你和我运用的是 nginx ，那样只要登陆服务器，在 
/usr/local/nginx/conf/nginx.conf 里的 server 里加上这一段（我放在倒数第二段）location / {
if(!-e$request_filename) {
rewrite (.*) /index.php;
}
}而后重启一下 nginx$ systemctl restart nginx<h3 style="color: black; text-align: left; margin-bottom: 10px;">6.2 网站添加备案号</h3>
倘若你的域名已然备案了，最好将你的备案号放到底部（好似会有检测）。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/4fcfb6e2aaf34f78933f58844672bd39~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=lVN40sPjXr6byaPe0PqR6Qw9o2E%3D" style="width: 50%; margin-bottom: 20px;">
<h3 style="color: black; text-align: left; margin-bottom: 10px;">6.3 美化文案的排版</h3>
一个好的排版，能够极重提高阅读体验，因此呢定制一个好的排版非常有必要。
我网站里的文案排版样式，借用的是 mdnice 的主题，个人非常爱好。/* 二级标题 */
.view-content h2 {
margin: 40px 20px auto;
height: 40px;
bac公斤round-color: rgb(251, 251, 251);
border-bottom: 1px solid rgb(246, 246, 246);
overflow: hidden;
box-sizing: border-box;
}

/* 二级标题内容 */
.view-content h2 {
margin-left: -10px;
display: inline-block;width: auto;
height: 40px;
bac公斤round-color: rgb(33, 33, 34);
border-bottom-right-radius:100px;
color: rgb(255, 255, 255);
padding-right: 30px;
padding-left: 30px;
line-height: 40px;
font-size: 16px;
}

/* 二级标题修饰请参考有实例的主题 */
.view-content h2:after {
}

/* 三级标题内容 */
.view-content h3 {
margin-top: 5px;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-size: 17px;
border-bottom: 2px solid rgb(33, 33, 34);
line-height: 1.1;
}

/* 引用文字 */
.view-content blockquote p {
color: #353535;
font-size: 16px;
margin: 0 10px;
display: block;
}

.view-content .blockquote:after {
content: "”";
float: right;
display: block;font-size: 2em;
color: rgb(248, 57, 41);
font-family: Arial, serif;
line-height: 1em;
font-weight: 700;
}

/* 二维码表示 */
header .gongzhonghao {
color: #fff;
font-size: 14px;
position: absolute;
bottom: 30px;
}

header .weixinhao {
color: #fff;
font-size: 14px;
position: absolute;
bottom: 180px;
}<h3 style="color: black; text-align: left; margin-bottom: 10px;">6.4 安排 HTTPS</h3>
关于怎样安排 HTTPS ，我在之前的文案里讲过一种。
今天再介绍另一一种：运用宝塔。
注册并登陆宝塔（<a style="color: black;">https://bt.cn），而后进入掌控面板，进行实名认证。</a>
<img src="https://p3-sign.toutiaoimg.com/pgc-image/dcad688f0acc4f29a1bf4480987f0ef3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=c39f5nBuBwQrfLrq9o%2BIMZeBF44%3D" style="width: 50%; margin-bottom: 20px;">
点击申请证书
<img src="https://p3-sign.toutiaoimg.com/pgc-image/7f513d7084ac4b2c9bb645a57617770d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=RBWRIauZL520%2FNju7gzxXuIqUAc%3D" style="width: 50%; margin-bottom: 20px;">
选取免费的就好
<img src="https://p3-sign.toutiaoimg.com/pgc-image/4c62b605ec814231bb73398fc3a50387~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=BX0YgEOKxANp4mjDYnVgTkqMPIc%3D" style="width: 50%; margin-bottom: 20px;">
填写你的域名后，支付订单（并不要钱）。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/f563f013b07f4067b2003034dc306af3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=b3FfY4EjHdJi7vIwQAX2yyJ4mrg%3D" style="width: 50%; margin-bottom: 20px;">
而后点击详情，需要验证该域名是归你所有。
办法它会告诉你，登陆我的阿里云域名解析，按照如下提示去添加 DNS解析规则
<img src="https://p26-sign.toutiaoimg.com/pgc-image/c692e8ed53b94f94a8223633e1aea3ac~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=KjWhLVlNsyA8Rz%2FtFUoIjWh4O3A%3D" style="width: 50%; margin-bottom: 20px;">
而后静待一段时间验证成功了，就能够点击如下按钮，下载数据证书。 <img src="https://p3-sign.toutiaoimg.com/pgc-image/f1f3332b8ff040c68a5ab3a2ea3de5b7~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=aI32v8pG%2BmVl4%2BYRTVYWWZz93QY%3D" style="width: 50%; margin-bottom: 20px;">
下载到本地后，你会得到一个 zip 包，解压一下，就能够看到证书文件及私钥。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/383e9cf74e954fe18d53c076f882897c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=5pzjI8hIM1RJUGnzr9FQs9B3jlc%3D" style="width: 50%; margin-bottom: 20px;">
由于我的博客运用的是 Nginx，因此呢我该 Nginx 下的两个文件上传到我的服务器上的 nginx 目录下.
详细怎么上传呢？你能够运用远程拷贝软件，例如 WinSCP，亦能够运用 lrzsz （举荐运用）。
传到哪个目录下呢？
先运用 find 命令查询一下你的 nginx.conf 路径$ find / -name nginx.conf
/usr/local/nginx/conf/nginx.conf你的证书文件能够和 nginx.conf 放在同一目录下/usr/local/nginx/conf接下来运用 vim 编辑该文件，找到 server，添加如下行（ server 本来的内容我运用 ... 暗示，意思是不需要去动。）server
{
listen 443 ssl;
 # 注释掉该行
# listen 80 default_server reuseport;

#证书文件名叫作
ssl_certificate 1_iswbm.com_bundle.pem;
 #私钥文件名叫作
ssl_certificate_key 0_iswbm.com.key;

...
}
最后重启 nginx $ systemctl restart nginx尝试用 https 拜访一下我的网站 https://iswbm.com，非常顺利。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/216bcec79a004dc5a78deebc505321b2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=8jaAmMaGVR%2FfjDkPZhm4aeajKFU%3D" style="width: 50%; margin-bottom: 20px;">
到这儿，事情其实还无结束，你还需要做两件事情：
第1件事：在后台进行有些配置，否则从网站转的时候还是会运用 http
<img src="https://p3-sign.toutiaoimg.com/pgc-image/02b5a31683d040198dfed24967c7d764~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=Hm1ItBtdVBuULriiC7GLI9EC9N0%3D" style="width: 50%; margin-bottom: 20px;">
第二件事：将 http 重定向到你 https，否则有人在浏览器输入 iswbm.com 时，拜访的还是 http。
运用 vim 编辑 /usr/local/nginx/conf/nginx.conf，在本来 server 的前面加入下面这么一段代码
server {
listen 80;
server_name iswbm.com;
rewrite ^(.*) https://$server_name$1 permanent;
}而后再重启 nginx$ systemctl restart nginx<h3 style="color: black; text-align: left; margin-bottom: 10px;">6.5 图床开启HTTPS</h3>
因为我之前的 markdown 文案，运用的图床都是七牛云，当时并无开启 https，此刻网站开启了 https 后，自然照片亦要开启，否则浏览器会表示有部分不安全的资源。
登陆七牛云，然后进入<a style="color: black;">证书管理</a> 上传证书（重视这个证书得另一申请，不可运用先前申请的 iswbm.com 证书）。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/4ab029d6bc9b4a868a7af98229159750~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=IcGh0YnBuoW%2F2%2BVd9ybtdnXGiNQ%3D" style="width: 50%; margin-bottom: 20px;">
进入对象存储 -> 域名管理，找到 HTTPS 配置的位置，点击修改配置。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/383a19e7e74546a6b928495c37fd55fa~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=JAvcVZInHcl5rl0m9y1PbFgjbHI%3D" style="width: 50%; margin-bottom: 20px;">
将按钮置为开启状态，选取咱们刚才上传的证书。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/018d173ced714eac86bb8aa4002e8ccf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=40C26P1c1INjMQ0%2BpsEmmxhQjRs%3D" style="width: 50%; margin-bottom: 20px;">
设置完后，并不可马上运用
<img src="https://p3-sign.toutiaoimg.com/pgc-image/81e44b66e53248dfa31ea17a3826a56a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=osunAmw6upC1XyoWUMnUPpoh8I8%3D" style="width: 50%; margin-bottom: 20px;">
域名的升级需要一按时间，等待就可。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/0c47fde7037949918c1fa1aed4ca8333~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=s2%2Fcu%2BCFSlaGT8PKV96h0Rs24bk%3D" style="width: 50%; margin-bottom: 20px;">
以上便是我搭建网站的所有总结，写了两个夜晚，直到昨晚才完成。
全文一共 5000 多字，昨晚写的时候，还出了个小插曲，文案被我误删除了，无论怎么 ctrl + z 都回不来，找了非常多办法，都行不通。。
把我吓得都快哭了，生怕今天发不出来文案
好在最后 Typora 还是给我留了一条生路，它居然支持文件的版本掌控，真是有惊无险，差点今天就要哭了。
<img src="https://p3-sign.toutiaoimg.com/pgc-image/b9d9bc47246c4a95b69a97d30769f9d1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819014&x-signature=W6fyEL2vYhr9PmVRJWJFBWBn3M0%3D" style="width: 50%; margin-bottom: 20px;">
写文案不易（尤其是这种长文），倘若觉得本文写得还能够，给明哥转发下文案，能够吗

nykek5i 发表于 2024-10-5 10:13:01

楼主果然英明！不得不赞美你一下！

7wu1wm0 发表于 2024-10-22 09:57:54

楼主听话，多发外链好处多，快到碗里来！外链论坛 http://www.fok120.com/

页: [1]

天涯论坛's Archiver

超仔细图解：从 0 搭建一个个人网站，亦太简单了吧