搭建个人网站教程,搭建一个个人网站需要多少钱

大家好,我是明哥。前两天我用WordPress 给自己搭建了一个网站,整个过程非常的顺利,体验非常地好,于是我就整个过程、以及其中的一些搭建心得,记录下来。如果

大家好,我是珉哥。

两天前,我使用WordPress 为自己建立了一个网站。整个过程非常顺利,体验非常好,所以我记录了整个过程和一些搭建的心得。

4e1482dc285a47afa1b96a94d9b38560~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=I0ToRqC5ZpVt1FBaxcym4FHQlyY%3D

如果您正在考虑建立个人网站,本文将对您有所帮助。看完这篇文章,你就可以停止使用百度或谷歌了。因为我写得很仔细,很系统。

1. 写在前面

说到网站,我实际上已经建立了很多网站。

从我的第一个Hexo 静态博客开始,我就使用Django 来模仿Hexo-Next 主题并编写带有后端的个人博客。

然后我发现了Sphinx + Github + ReadtheDocs的完美文档排列组合,并用它构建了四个网站。

黑魔法Python:http://magic.iswbm.comPyCharm中文指南:http://pycharm.iswbm.comPython编程时间:http://python.iswbm.comGo编程时间:http://golang.iswbm.com这四个网站整理了我过去写过的适合的文章。将其分类并以漂亮的布局展示在每个需要它的人面前。

所有四个网站都使用三级子域。在我看来,它们都不能成为个人网站。

有几个原因。

内容太悬殊,我无法完全表达自己。可定制性太低,比如没有头像或评论系统。它不利于搜索引擎优化,也不会导致曝光。它托管在ReadtheDocs 上,访问速度太慢。有很多事情令人心碎,但它们也给我的基因带来了好处。

没有成本(当然不包括时间成本):不需要服务器或域名。适合初学者,通过简单的设置即可立即上手。现在我们已经讲得太远了,让我们回到构建WP 网站。

在教程之前,我会先向您展示我的结果,所以请点击这里。

网址:https://iswbm.com

0c9f9ea4d4da4a7ea685ce8d69a528b4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=9SccaxwcnJgAim5wNwMnGcfDuCw%3D

2. 准备工作

一台 Linux 服务器

在开始建立网站之前,第一步当然是购买自己的“服务器”。

您可以通过以下渠道进行选择和购买:

对于阿里云、腾讯云、Ucloud等各大厂商的服务器,避免购买国外服务器厂商的廉价服务器,速度会明显变慢,影响体验。

我的例子是在阿里云上购买的。您可以先购买一台最低配的服务器,以后如果不够了,可以逐步升级扩容。

先领优惠券,再以更实惠的价格购买:点击获取优惠券

如果您是学生,您可以在我们的优惠券收集页面上找到仅限学生的服务器,然后只需点击一下即可购买。非学生也可以团体购买。购买服务器没什么特别要说的。只要付钱。

如果您购买了

一个专属的域名

服务器,一旦设置完毕,您就可以使用该IP访问您的网站,但它仅用于开发和测试。

如果你真的想启动并运行并获得流量,你需要获得一个域名来帮助推广它。

购买域名时,我们建议使用与上面列出的服务器相同的制造商。这将帮助您避免麻烦。例如,如果您想注册在阿里云上购买的域名,则需要阿里云下的服务器。

一个远程登陆软件

稍后您将使用手动部署,因此您需要登录服务器与其交互。

有两种登录方式。

制造商提供的控制台界面登录:Workbench 和VNC

0acc9362d3244c96a97860cfbbc2296e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=hwN2sQM1JMrRYpZlxAcDoA3eDQU%3D

这种方法对于不经常登录服务器运维的人来说很受欢迎。

fbbfd4c80a094dc9b5d74ea3f7f8d259~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=eAOUiK5e6EEjltsO6PVEP%2F8hchU%3D

自行下载专业的远程登录软件:Xshell或CRTSecure

957e46f3c20442fa8454957350c9d476~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=CKtkay3vQnkvtT4LBg%2B6t4YCV38%3D

使用这些远程登录软件时,必须从服务器制造商的控制台获取三项信息。

服务器公网IP 服务器SSH端口服务器远程连接密码您可以自行百度搜索如何使用Xshell。有很多教程。

您可以从阿里云购买。最低配置就足够了。随着流量的增加,您可以稍后进行扩展和升级。

2. 部署方式选择

有两种安装方法。

利用服务器管理软件实现自动化部署。其中最著名的是宝塔面板。通过手动登录远程服务器来实现脚本化部署。那么应该如何选择呢?

一旦您对界面有所了解,使用Pagoda 部署就会很容易。

要使用脚本手动部署,您需要了解以下内容:

远程登录到您的服务器。使用脚本化部署。

有两个原因。

首次提供更详细的部署说明,让您更深入地了解WordPress 的工作原理,包括使用了哪些软件以及安装了哪些软件包。当您建立自己的网站时,将来必然会遇到各种服务器问题。尽早接触Linux,熟悉其各种配置,对于以后的运维工作有很大的帮助。

3. 部署 LNMP

3.1 什么是 LNMP

LNMP 是Linux + Nginx + MySQL + PHP 组合的缩写。

类似的组合包括:

LAMP的正式名称是Linux + Apache + MySQL + PHPL。 NAMP的正式名称是Linux + Nginx + Apache + MySQL + PHP。

Linux是类Unix计算机操作系统的集合,是目前最流行的免费操作系统。典型版本有debian、centos、ubuntu、fedora、gentoo等。

Nginx 是一个高性能的HTTP 服务器、反向代理服务器和IMAP/POP3/SMTP 代理服务器。

Apache 是世界排名第一的Web 服务器软件。 它运行在几乎所有常用的计算机平台上,并且由于其跨平台和安全特性而成为最流行的Web服务器端软件之一。

PHP 是一种运行在服务器端并嵌入到HTML 文档中的脚本语言。

MySQL 是一个关系数据库管理系统。

逐一安装这些软件,尤其是数据库,可能会很乏味。

所以有人把安装和部署这些软件的过程集成到了一个shell脚本中,所以你所要做的就是下载并运行它。实在是不太方便。

3.2 安装 LNMP

下载LNMP安装脚本(最新版本为1.7,我安装的是1.5,其他版本参见: https://lnmp.org/download.html)。

$ 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 有很多选项。如果您不知道选项之间的区别,请单击默认值。

运行脚本时,首先会要求您选择数据库版本。

2b6a8b08abd44fe986fb5e773c92b8cf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=3eJpDQcLAUpXTlVoPBDE9flr6M4%3D

没有特殊需要。我们建议您使用默认设置并直接按Enter键,或者输入您的序列号并按Enter键。

选择数据库后,系统会提示您设置数据库root用户的密码。如果直接按Enter,则默认为lnmp.org#random number。

e52166f671d741838e2821a618806a32~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=LznO746mz%2FiDhc8X2N2Sv8sRf5o%3D

初学者在输入密码时应记住一件事。如果输入错误需要删除,必须按Ctrl+Backspace键删除。

输入密码后,按Enter 继续下一步。

83a71e8d4be447c5a1986f8a8fd7787c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=d6xq5J209Mk7VGw2vzbXqOuolVc%3D

检查是否需要启用MySQL InnoDB。 InnoDB 引擎默认启用。通常最好按Enter 或键入y。

如果您知道自己并不真正需要这个引擎,请输入“n”(在MySQL 5.7 及更高版本中无法关闭InnoDB)。完成后,我们建议按Enter 继续下一步并选择您的PHP 版本。安装PHP 7+ 版本。

3e01a4a18b804d1188e9660fdf5fc124~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=wGWyQUPXakmqLWNMRI3iQ9Uvdo4%3D

按Enter键进入下一步,选择是否安装内存优化。

8413cfb0bce44385b07782ed470c89d5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=2DpUKxT%2Bx6QfvCzYaGtR1FkAMwQ%3D

可以选择不安装Jemalloc或TCmalloc,输入对应的序列号并回车。如果直接回车,默认不会安装。

对于LNMPA 或LAMP,系统会要求您配置电子邮件并选择Apache。

34365d0b2b4e4722af324523a5a5346d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=zRrxc%2F9zDuc28ZxsY5qcOfZWtX8%3D

“输入管理员邮箱地址:”要求您设置报错时将在错误页面上显示的管理员邮箱地址。接下来,选择您的Apache 版本。

49cf4261560f4ad88d49189fa4c618c1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=78FD41HT44urFAJ6bXoDKxb%2B1Fo%3D

出现提示时,输入对应版本前的序列号,然后按Enter。

当您看到消息“按任意键安装.或按Ctrl+c 取消”时,按Enter 确认并开始安装。 LNMP脚本自动安装并编译Nginx、MySQL、PHP、phpMyAdmin等软件及相关组件。

安装时间可能从几十分钟到几个小时不等,主要取决于计算机配置的网络速度等因素。

如果显示Nginx: OK、MySQL: OK、PHP: OK

8c797a0d08744e73aa31c75664fd483c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=veuALv6DHFMpOtbjSzcKzBKPtf4%3D

表明安装成功。

最后几行输出

3306 端口是MySQL 监听端口80 是HTTP 端口22 是SSH 端口

3.3 配置 Nginx

安装完成后,使用以下命令查看nginx 配置文件(如果在服务器上没有找到该文件,则使用find/-name nginx )。会议)

$ cat /usr/local/nginx/conf/nginx.conf 将显示以下内容。

6918fa2754d4404da96e473cd68a0f76~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=rdlYHxiuJ4KZg0ugW8%2BgmJFnF1c%3D

上图显示安装的nginx将网站根目录设置为/home/wwwroot/default。您可以根据自己的喜好更改此设置。

当您在浏览器中打开http://ip时,您将看到以下内容:

f6305aee6fe24e0aacb2ba4f4815ec88~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=8%2FPMXKPj1zKfAbE6eWR65LBk%2B70%3D

事实上,这是一个简单的网页演示,但是如果你对index.html进行一些随机更改,你会看到不同的内容。

4. 安装 WordPress

WordPress是一个使用PHP语言开发的博客平台(这也是我们上面安装PHP的原因),也是一个博客框架。

上一步安装的LNMP仅保证WordPress的基本运行环境。

如果您想运行个人网站,您还需要安装WordPress。

方法也非常简单,只需按照以下步骤操作即可。

第一步:安装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 -pEnter password: MySQL > create database wordpress;第三步:使用 vim 修改 nginx 配置文件(不会vim的自行百度)
$ vim /usr/local/nginx/conf/nginx.conf找到网站根目录位置,如下图所示:
2b4f437456af42828d96f04a5d4943c7~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=%2BWFUWMYDe16%2FzC6LafWKHDKYslI%3D
修改成如下内容:
e2a315fafc9e4d58b4970208bb1c567a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=GEhOjjhei0VfTiy12%2BL2RedxGbg%3D
随后,使用wq保存配置退出即可。
验证nginx是否有配置错误:
$ nginx -t如果出现ok,successful字样,说明没有错误。没有错误,重新加载nginx:
$ nginx -s reload修改wordpress目录权限:
$ cd /home/wwwroot && chown -R www wordpress/ && chgrp -R www wordpress/用浏览器打开http://ip/wp-admin/setup-config.php,你可以看到如下内容:
6b67e9bf65f14ddd82c93213ef826c17~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=f1K2iokyhcMjkk2KQ8h48QFSHLk%3D
现在就开始,进行安装。填写信息如下:
cf4d29130c3349e88018c047f8b17c6e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=Qd3TDHaD1MdrdN%2F5KUpju6%2BXK6Q%3D
其中,*** 改为你设置的MySQL数据库密码。点击提交,出现如下内容:
89d23939d47744ac9ca7cb5085b8a24d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=Dn%2Bw9BmMJnuNF%2FjYgI2X8gjfd2U%3D
在/home/wwwroot/wordpress下,创建并编写wp-config.php文件:
$ vim wp-config.php将上图内容复制进去并wq保存退出,然后点击现在安装。最后就是配置用户信息了,这个是你登录wordpress用户后台的,要记住:
c040dd1ae43346858cf47d4cbdedb72c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=g0tqYH%2B3Gjiwf2KuaagFWKm5Aao%3D
最后点击安装WordPress,安装成功会出现如下界面:
b324869267bb4ce98e2074d942297243~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=0CRkGyqTfVSneHzMBTEleLBSNu8%3D
点击登录,输入账户密码,就可以登录自己的 wordpress 后台了。
3ff699b7ab0840d39d74469d767b4d75~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=piMw02pfNfNHyFzP6if75kgg1RM%3D
这时候你使用浏览器去访问 http://ip ,就可以看到你搭建的第一个网站了。
此时你看到的这个网站,是 wordpress 默认为你安装的免费主题(应该有三个),可能并不是那么的好看,但没关系,后面我会教大家如何挑选一个自己合适的主题,把你的网站装扮得有模有样。

5. 装扮你的网站

到这里,你的网站部署已经全部完成,但是还差最后一步,也是使用 WordPress 最为核心的一步:让你的网站看起来更加专业,更加成熟。
为此我们需要做两件事:
安装主题:让网站变得好看安装插件:丰富网站的功能

5.1 安装主题

同样都使用的 WordPress 的网站,外观上却天差地别。有的很酷炫,有点很简约,这是因为选了不同的主题(可以理解为皮肤)。
在你安装完 WordPress 后,本身就自带了几个免费的主题。
几乎没人会使用它们,因为实在没什么亮点(就是丑)。
在 WordPress 的自带了主题商店,里面有大量的免费主题,各式各样的都有,可能有你喜欢的。
601b52cea9594c7b956323f92a6c4278~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=BVbBkYIOMJQl5EAZ6ZTVECzpQvo%3D
在这里要说明一点,我的主题不是在商店里安装的,而是我通过搜索引擎找到了一个比较清爽的主题,很符合我的审美,我装扮过后的效果如下。
b6cb3cd72fa04ba5a3a177c02551a912~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=INFzbpWaYe%2FQc%2FyX3Dlr7N5cPqA%3D
如果你想和我用一样的主题,我已经将安装包打包好了(需要的添加我微信领取: stromwbm),直接下载后,按下图的方式上传到你的 WordPress 后台安装就行。
73267c4176fa4daf9b8e9eb02e7cb267~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=y%2BkriisEJsiwUfImWxdjD%2F4ttW8%3D

5.2 安装插件

目前我安装的插件比较少,但是基本够用啦,下面列举一下,如果你有什么好插件介绍,可以评论区推荐一下:
1. WP User Avatar
原生 WordPress 默认使用 Gravatar头像,用户(包括访客评论)的头像调取都是根据所留邮箱匹配的 Gravatar 头像。
没有 Gravatar 怎么办?
只要装上 WP User Avatar 这个插件就能可以使用 WordPress 媒体库中的图片作为默认头像了。
2. WP-PostViews
安装了 WP-PostViews,就可以统计你文章的浏览次数。
需要两步配置
第一步:设置显示的文字
d810b227f51e41f4907cfde1886740e2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=6RUg5d9EGtJIavX12LJ7vxVTYmw%3D
第二步:在你要显示的位置写入如下代码
fc143e5395ef4d4b801abdc33660e02b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=4VNALSP4s4Ued%2BsmxWXYZSImeVY%3D
效果如下
0b43cd46073e4fd9993d2d74ec1f4e75~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=9nPmXVbf6u4loWZMGc7X0yPz384%3D
3. Post Views Counter
咦,上面已经安装了一个统计阅读量的插件,怎么这边又推荐一个。
上面那个统计阅读量的插件,其实做的比较粗糙。
这是什么意思。
比如同一个 ip 连续连刷10次,WP-PostViews 的阅读量会 +10,但如果你使用 Post Views Counter,这个规则可以由你来定,可以只显示一次。
e8ec9d3f9cdb4254a4129af4d0b88b21~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=IILCRZESlQ3sTAF5dV4RXGaU0ho%3D
安装完这个插件后,同样需要进行一些配置
3f7d28f3e593490b9df46c337373bae3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=3df9MTebHLApd%2FNvk434nzKISoA%3D
为什么这里选择手动呢?
98316a61396e4b02864a75d712ba9bda~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=lA%2B3U5rxhtrpc99V547NYlLFCbs%3D
因为我发现不管在内容之前,还是在内容之后,显示的位置都比较尴尬(它会换行)。
如果你和我用一样的主题,想和我有一样的效果,那么你选择手动之后,还要按下图指示修改下代码,新增如下一段代码。
c3c83556b0ef420099708771fa97b389~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=kAcWhDMIzKremI4X2RHWQ4e8Lxo%3D
效果如下
017b20a0d3374080840f162ccb6ce249~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=%2BR4jCe8J4aVnuOvmhSpJm9eLsZY%3D
4. WP Editor.md
或许这是一个WordPress中最好,最完美的Markdown编辑器。
可以像 md2all 和 mdnice 那样,即时显示 Markdown 的渲染效果,喜欢在后台写文章的可以安装(其实我是先本地 Typora 写好了再复制上去的)。
8b077824862e43dcbd1256c539e59328~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=zQOfiqe2SRgO1wrvE1hJmeTqXu4%3D
5. Simple Custom CSS
在修改 WordPress主题时,CSS修改是最经常用到的方法,比如调整字体、调整颜色、边距之类的都需要用到自定义的CSS代码。
虽然说 WordPress 本身提供了CSS修改的功能,不过使用起来有很多的弊端,其中最麻烦的一点就是每次更换或者更新主题之前的修改都会消失,需要重复的添加。
使用 Simple Custom CSS 这个插件可以避免这种尴尬,安装后他会在 外观 下新增一个 自定义CSS 的选项。
648b0b9fdce3471bb4af66d39e511dd3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=KO4Tah5nmG6Vvdj6TA4kWwzUriM%3D
6. LuckyWP Table of Contents
使用我这个主题,在文章页面是没有目录索引的,对于读者来说,其实挺不方便的。
因此我安装了 LuckyWP Table of Contents,可以在我的文章中生成一个目录。目录默认是隐藏的(当然你也可以设置默认展示),需要的话再点击展开。
2b0d0e0fabe448098cf7b5c680ab04c0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=A%2B7AyPp%2BWCK5RM1U%2B1QMnnVEMoE%3D
点击目录可以直接跳转到对应位置。
但可能是我这个主题的原因,我的网站无法跳转,如果有人知道原因,还请留言区评论一下。
7. 百度搜索推送管理
百度搜索推送管理插件是一款针对WP开发的功能非常强大的百度和Bing搜索引擎收录辅助插件。
利用该插件,站长可以快速实现百度搜索资源平台和Bing站长平台URL数据推送及网站百度收录数据查询等。
目的在于进一步提升网站的百度和Bing搜索引擎收录效率,提升网站SEO优化效果;及帮助站长通过该插件了解网站百度收录数据情况,基于数据统计参考进一步对网站内容进行调整与优化。
具体使用方法比较复杂,自己百度一下吧
8. Smart SEO Tool
Smart SEO Tool是一款专门针对WordPress开发的智能SEO优化插件,与众多WordPress的SEO插件不一样的是,Smart SEO Tool更加简单易用,帮助站长快速完成WordPress博客/网站的SEO基础优化。

6. 优化你的网站

6.1 使用固定链接

先在后台按如下图示进行设置
96cd88067f974ffc98d427ba01cf4eda~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=igjditPNTeHf%2Fj7apHQ4iFy06tk%3D
但是这样不够,要使用固定链接,服务器还需要开启 rewrite 的功能。
如果你和我使用的是 nginx ,那么只要登陆服务器,在
/usr/local/nginx/conf/nginx.conf 里的 server 里加上这一段(我放在倒数第二段)
location / { if (!-e $request_filename) { rewrite (.*) /index.php; }}然后重启一下 nginx
$ systemctl restart nginx

6.2 网站添加备案号

如果你的域名已经备案了,最好将你的备案号放到底部(好像会有检查)。
4fcfb6e2aaf34f78933f58844672bd39~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=aP2%2FhW1ZF9MP0KWyxUHxBpUcZpE%3D

6.3 美化文章的排版

一个好的排版,能够极大提升阅读体验,因此定制一个好的排版非常有必要。
我网站里的文章排版样式,借用的是 mdnice 的主题,个人非常喜欢。
/* 二级标题 */.view-content h2 { margin: 40px 20px auto; height: 40px; background-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; background-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;}

6.4 部署 HTTPS

关于如何部署 HTTPS ,我在之前的文章里讲过一种。
今天再介绍另外一种:使用宝塔。
注册并登陆宝塔(https://bt.cn),然后进入控制面板,进行实名认证。
dcad688f0acc4f29a1bf4480987f0ef3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=NogvT%2BzC%2BY5wWSrzWXqj7EuWH4U%3D
点击申请证书
7f513d7084ac4b2c9bb645a57617770d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=d7oYGkdtYWgVPbp2a7krEsGPzOI%3D
选择免费的就好
4c62b605ec814231bb73398fc3a50387~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=dDU%2FNVqYhAEI2%2FZsXqv5IHFT1Ok%3D
填写你的域名后,支付订单(其实不要钱)。
f563f013b07f4067b2003034dc306af3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=ucFvkTgrbsaNJrWj1mcZDh737gs%3D
然后点击详情,需要验证该域名是归你所有。
方法它会告诉你,登陆我的阿里云域名解析,根据如下提示去添加 DNS解析规则
c692e8ed53b94f94a8223633e1aea3ac~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=Wy1TzIkUeQwwpqyv6DtFbW7caEs%3D
然后静待一段时间验证成功了,就可以点击如下按钮,下载数据证书。 f1f3332b8ff040c68a5ab3a2ea3de5b7~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=sDZxw2TPy21j4vXlsmedI7lztgk%3D
下载到本地后,你会得到一个 zip 包,解压一下,就可以看到证书文件及私钥。
383e9cf74e954fe18d53c076f882897c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=BGfPGeqU3tjEx%2F4eGn%2BqELEMh8M%3D
因为我的博客使用的是 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,非常顺利。
216bcec79a004dc5a78deebc505321b2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=Xovj%2FZOXJ25imkgoYe4r7%2BluOnY%3D
到这里,事情其实还没有结束,你还需要做两件事情:
第一件事:在后台进行一些配置,不然从网站跳转的时候还是会使用 http
02b5a31683d040198dfed24967c7d764~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=xwgA3UH4brrDU7wE2em0REncLQ0%3D
第二件事:将 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

6.5 图床开启HTTPS

由于我之前的 markdown 文章,使用的图床都是 七牛云,当时并没有开启 https,现在网站开启了 https 后,自然图片也要开启,不然浏览器会显示有部分不安全的资源。
登陆七牛云,然后进入 证书管理 上传证书(注意这个证书得另外申请,不能使用先前申请的 iswbm.com 证书)。
4ab029d6bc9b4a868a7af98229159750~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=puPcWeqvBJq7GJYYIika08yOJdY%3D
进入对象存储 -> 域名管理,找到 HTTPS 配置的位置,点击 修改配置。
383a19e7e74546a6b928495c37fd55fa~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=3OnmmYpEi5wmOH%2FNR2fZFJQAfxQ%3D
将按钮置为开启状态,选择我们刚刚上传的证书。
018d173ced714eac86bb8aa4002e8ccf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=5hdtRDOA0XW%2BRCu%2FIknj5Ncemo8%3D
设置完后,并不能立马使用
81e44b66e53248dfa31ea17a3826a56a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=9txMNJud42m1l2GFVBtWQQhyIUQ%3D
域名的升级需要一定时间,等待即可。
0c47fde7037949918c1fa1aed4ca8333~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=0fvueDcAD8PFRVFHGBvwj5k83Yw%3D
以上就是我搭建网站的全部总结,写了两个晚上,直到昨晚才完成。
全文一共 5000 多字,昨晚写的时候,还出了个小插曲,文章被我误删除了,无论怎么 ctrl + z 都回不来,找了很多方法,都行不通。。
把我吓得都快哭了,生怕今天发不出来文章
好在最后 Typora 还是给我留了一条生路,它居然支持 文件的版本控制,真是有惊无险,差点今天就要哭了。
b9d9bc47246c4a95b69a97d30769f9d1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717857267&x-signature=dg2gRgYuY91hZuc9r7JNGX2F7fk%3D
写文章不容易(特别是这种长文),如果觉得本文写得还可以,给明哥转发下文章,可以吗

原创文章,作者:小条,如若转载,请注明出处:https://www.sudun.com/ask/86389.html

(0)
小条的头像小条
上一篇 2024年6月1日
下一篇 2024年6月1日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注