建筑工程素材资源网站,搜索优化的培训免费咨询,主流做网站,wordpress调用优酷视频播放器前两天我用WordPress 给自己搭建了一个网站#xff0c;整个过程非常的顺利#xff0c;体验非常地好#xff0c;于是我就整个过程、以及其中的一些搭建心得#xff0c;记录下来。 如果你也正好有搭建个人网站的想法#xff0c;那么本文会给你一个参考#xff0c;也许看了这…前两天我用WordPress 给自己搭建了一个网站整个过程非常的顺利体验非常地好于是我就整个过程、以及其中的一些搭建心得记录下来。 如果你也正好有搭建个人网站的想法那么本文会给你一个参考也许看了这篇文章你就可以不用再百度、甚至谷歌了因为我会写得 足够的细致而系统。
1. 写在前面
说到网站其实我搭建过挺多个了。
从最开始的 Hexo 静态博客到后来使用 Django 仿照 Hexo -Next 主题自己写了一个有后端的个人博客。
再后来又发现了 Sphinx Github ReadtheDocs 完美的文档编排组合用了搭建了四个网站分别是
黑魔法 Pythonhttp://magic.iswbm.comPyCharm 中文指南http://pycharm.iswbm.comPython 编程时光http://python.iswbm.comGo 编程时光http://golang.iswbm.com
这些四个网站很好的将我这几年来写的文章进行分类并以精美的排版展现在每一个需要的人眼前。
四个网站用的都是三级子域名可见在我心里他们无论哪一个都无法成为我心中的个人网站。
原因有几点
内容过于分散不能代表一个完整的我。可定制性太低没有头像没有评论系统等等对 SEO 太不友好了不利于曝光托管在 ReadtheDocs上访问速度太慢。
虽然有不少让我心痛的地方但是它们却有流淌在基因里的优势
无成本时间成本当然不算啦你不需要服务器也不需要域名。新手友好只要简单配置就能立马快速上手。
好像扯远了还是说回 WP 的网站搭建吧。
在教程之前呢我先 show 一下我的成果欢迎你去点点点~
网站地址https://iswbm.com
2. 准备工作
一台 Linux 服务器
在开始搭建网站之前当然第一步是购买一个属于自己的 『服务器』。
你可以选择如下渠道进行购买
阿里云腾讯云Ucloud
等的大厂服务器不要贪图便宜去买国外的服务器厂商因为速度很慢很多很影响体验。
我的就是在 阿里云 上购买的刚开始买个最低配置的服务器就行以后不够用了可以慢慢升级扩容。
可以先领个券再购买更实惠点击领券
如果是学生可以在领券页面里找到学生专享服务器9.5元/月直接点击购买即可。不是学生也可以组团购买更便宜服务器购买就不多说了拿钱就好了。
一个专属的域名
买了服务器后你就会拥有一个公网ip如果网站搭建起来了你完全可以使用这个 ip 去访问但仅供开发、测试使用。
如果要真正运营起来想要有流量还得搞一个域名方便你推广。
域名的购买建议和上面服务器使用同一个厂商可以省去一些麻烦。比如阿里云购买的域名要备案是需要你在阿里云下有一台服务器的。
一个远程登陆软件
由于后面我使用的是手工部署的方式所以要登陆服务器进行操作。
登陆的方法有两种 厂商提供的控制台界面登陆Workbench 和 VNC 这种方法对于不经常登陆服务器运维的人来说还是挺香的。 自己下载专业的远程登陆软件Xshell 或者 CRTSecure
在使用这些远程登陆软件时你需要在服务器厂商控制台上面先获取到三个信息
服务器公网IP服务器SSH端口服务器远程连接密码
关于 Xshell 如何使用的可以自行百度搜索教程非常多。
可以到阿里云上去购买选最低配置就足够啦后续访问量起来了再扩容升级。
2. 部署方式选择
部署方式可分为两种
使用服务器管理软件实现自动化部署最著名的就是 宝塔面板 。手动登陆远程服务器实现脚本化部署。
那么如何选择呢
使用宝塔部署门槛低只要会界面点一点即可。
而使用脚本自己手工部署需要你学会
远程登陆服务器使用 Xshell 或者 直接使用厂商提供的在线SSH窗口一些 Linux 的基本操作比如 Vi/Vim 的使用目录及文件的基本操作等
在这里建议大家跟着我使用第二种方法也就是手工使用脚本进行部署。
原因有二
第一次接触更精细的部署步骤会让你对 WordPress 的运作方式有更深的理解比如使用了哪些软件装了哪些包自己搭建了网站难免以后会碰到各种各样的服务器问题尽早的接触 Linux熟悉各项配置对以后的运维工作会有很有帮助。
3. 部署 LNMP
3.1 什么是 LNMP
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 是世界使用排名第一的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接下来会出现大量的选项如果你不是很懂各个选项间的区别按默认就行啦
运行脚本后首先会让你选择数据库的版本 没有特殊需要建议使用默认配置直接回车或输入序号再回车。
选好数据库会让你设置数据库 root 用户的密码此时如果你直接回车会默认设置为 lnmp.org#随机数字 在输入密码的时候对于新手有一点注意如果输入有错误需要删除需要按住Ctrl再按Backspace键进行删除。
密码输好后回车进入下一步 询问是否需要启用 MySQL InnoDBInnoDB引擎默认为开启一般建议开启直接回车或输入 y 。
如果确定确实不需要该引擎可以输入 n(MySQL 5.7版本无法关闭InnoDB),输入完成回车进入下一步选择 PHP 版本建议安装 PHP 7的版本 回车进入下一步选择是否安装内存优化 可以选择不安装、Jemalloc或TCmalloc输入对应序号回车直接回车为默认为不安装。
如果是LNMPA或LAMP的话还会提示设置邮箱和选择Apache “Please enter Administrator Email Address:”需要设置管理员邮箱该邮箱会在报错时显示在错误页面上。再选择Apache版本 按提示输入对应版本前面的数字序号回车。
提示Press any key to install…or Press Ctrlc to cancel后按回车键确认开始安装。 LNMP脚本就会自动安装编译Nginx、MySQL、PHP、phpMyAdmin等软件及相关的组件。
安装时间可能会几十分钟到几个小时不等主要是机器的配置网速等原因会造成影响。
如果显示Nginx: OKMySQL: OKPHP: OK 表明安装成功。
最后几行的输出
3306 端口是 MySQL 监听的80 是 HTTP 端口22 是 SSH 端口
3.3 配置 Nginx
安装好后使用如下指令查看nginx配置文件如果你的服务器上找不到该文件那请使用 find / -name nginx.conf 搜索一下
$ cat /usr/local/nginx/conf/nginx.conf你会看到如下内容 上图表明安装好的nginx将网站的根目录设置为/home/wwwroot/default这个可以根据自己的喜好进行修改。
用浏览器打开http://ip可以看到如下内容如果访问不了有可能是你服务器的安全组没有开放 80 端口去控制台开放一下即可 其实这就是一个简单的网页demo了自己随便修改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 -p
Enter password:
MySQL create database wordpress;第三步使用 vim 修改 nginx 配置文件不会vim的自行百度
$ vim /usr/local/nginx/conf/nginx.conf找到网站根目录位置如下图所示 修改成如下内容 随后使用wq保存配置退出即可。
验证nginx是否有配置错误
$ nginx -t如果出现oksuccessful字样说明没有错误。没有错误重新加载nginx
$ nginx -s reload修改wordpress目录权限
$ cd /home/wwwroot chown -R www wordpress/ chgrp -R www wordpress/用浏览器打开http://ip/wp-admin/setup-config.php你可以看到如下内容 现在就开始进行安装。填写信息如下 其中*** 改为你设置的MySQL数据库密码。点击提交出现如下内容 在/home/wwwroot/wordpress下创建并编写wp-config.php文件
$ vim wp-config.php将上图内容复制进去并wq保存退出然后点击现在安装。最后就是配置用户信息了这个是你登录wordpress用户后台的要记住 最后点击安装WordPress安装成功会出现如下界面 点击登录输入账户密码就可以登录自己的 wordpress 后台了。 这时候你使用浏览器去访问 http://ip 就可以看到你搭建的第一个网站了。
此时你看到的这个网站是 wordpress 默认为你安装的免费主题应该有三个可能并不是那么的好看但没关系后面我会教大家如何挑选一个自己合适的主题把你的网站装扮得有模有样。
5. 装扮你的网站
到这里你的网站部署已经全部完成但是还差最后一步也是使用 WordPress 最为核心的一步让你的网站看起来更加专业更加成熟。
为此我们需要做两件事
安装主题让网站变得好看安装插件丰富网站的功能
5.1 安装主题
同样都使用的 WordPress 的网站外观上却天差地别。有的很酷炫有点很简约这是因为选了不同的主题可以理解为皮肤。
在你安装完 WordPress 后本身就自带了几个免费的主题。
几乎没人会使用它们因为实在没什么亮点就是丑。
在 WordPress 的自带了主题商店里面有大量的免费主题各式各样的都有可能有你喜欢的。 在这里要说明一点我的主题不是在商店里安装的而是我通过搜索引擎找到了一个比较清爽的主题很符合我的审美我装扮过后的效果如下。 5.2 安装插件
目前我安装的插件比较少但是基本够用啦下面列举一下如果你有什么好插件介绍可以评论区推荐一下
1. WP User Avatar
原生 WordPress 默认使用 Gravatar头像用户包括访客评论的头像调取都是根据所留邮箱匹配的 Gravatar 头像。
没有 Gravatar 怎么办
只要装上 WP User Avatar 这个插件就能可以使用 WordPress 媒体库中的图片作为默认头像了。
2. WP-PostViews
安装了 WP-PostViews就可以统计你文章的浏览次数。
需要两步配置
第一步设置显示的文字 第二步在你要显示的位置写入如下代码 效果如下 3. Post Views Counter
咦上面已经安装了一个统计阅读量的插件怎么这边又推荐一个。
上面那个统计阅读量的插件其实做的比较粗糙。
这是什么意思。
比如同一个 ip 连续连刷10次WP-PostViews 的阅读量会 10但如果你使用 Post Views Counter这个规则可以由你来定可以只显示一次。 安装完这个插件后同样需要进行一些配置 为什么这里选择手动呢 因为我发现不管在内容之前还是在内容之后显示的位置都比较尴尬它会换行。
如果你和我用一样的主题想和我有一样的效果那么你选择手动之后还要按下图指示修改下代码新增如下一段代码。 效果如下 4. WP Editor.md
或许这是一个WordPress中最好最完美的Markdown编辑器。
可以像 md2all 和 mdnice 那样即时显示 Markdown 的渲染效果喜欢在后台写文章的可以安装其实我是先本地 Typora 写好了再复制上去的。 5. Simple Custom CSS
在修改 WordPress主题时CSS修改是最经常用到的方法比如调整字体、调整颜色、边距之类的都需要用到自定义的CSS代码。
虽然说 WordPress 本身提供了CSS修改的功能不过使用起来有很多的弊端其中最麻烦的一点就是每次更换或者更新主题之前的修改都会消失需要重复的添加。
使用 Simple Custom CSS 这个插件可以避免这种尴尬安装后他会在 外观 下新增一个 自定义CSS 的选项。 6. LuckyWP Table of Contents
使用我这个主题在文章页面是没有目录索引的对于读者来说其实挺不方便的。
因此我安装了 LuckyWP Table of Contents可以在我的文章中生成一个目录。目录默认是隐藏的当然你也可以设置默认展示需要的话再点击展开。 点击目录可以直接跳转到对应位置。
但可能是我这个主题的原因我的网站无法跳转如果有人知道原因还请留言区评论一下。
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 使用固定链接
先在后台按如下图示进行设置 但是这样不够要使用固定链接服务器还需要开启 rewrite 的功能。
如果你和我使用的是 nginx 那么只要登陆服务器在
/usr/local/nginx/conf/nginx.conf 里的 server 里加上这一段我放在倒数第二段
location / {if (!-e $request_filename) {rewrite (.*) /index.php;}
}然后重启一下 nginx
$ systemctl restart nginx6.2 网站添加备案号
如果你的域名已经备案了最好将你的备案号放到底部好像会有检查。 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然后进入控制面板进行实名认证。 点击申请证书 选择免费的就好 填写你的域名后支付订单其实不要钱。 然后点击详情需要验证该域名是归你所有。
方法它会告诉你登陆我的阿里云域名解析根据如下提示去添加 DNS解析规则 然后静待一段时间验证成功了就可以点击如下按钮下载数据证书。
下载到本地后你会得到一个 zip 包解压一下就可以看到证书文件及私钥。 因为我的博客使用的是 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非常顺利。 到这里事情其实还没有结束你还需要做两件事情
第一件事在后台进行一些配置不然从网站跳转的时候还是会使用 http 第二件事将 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 nginx6.5 图床开启HTTPS
由于我之前的 markdown 文章使用的图床都是 七牛云当时并没有开启 https现在网站开启了 https 后自然图片也要开启不然浏览器会显示有部分不安全的资源。
登陆七牛云然后进入 证书管理 上传证书注意这个证书得另外申请不能使用先前申请的 iswbm.com 证书。 进入对象存储 - 域名管理找到 HTTPS 配置的位置点击 修改配置。 将按钮置为开启状态选择我们刚刚上传的证书。 设置完后并不能立马使用 域名的升级需要一定时间等待即可。 以上就是我搭建网站的全部总结写了两个晚上直到昨晚才完成。
全文一共 5000 多字昨晚写的时候还出了个小插曲文章被我误删除了无论怎么 ctrl z 都回不来找了很多方法都行不通。。
把我吓得都快哭了生怕今天发不出来文章
好在最后 Typora 还是给我留了一条生路它居然支持 文件的版本控制真是有惊无险差点今天就要哭了。 写文章不容易特别是这种长文如果觉得本文写得还可以来个赞吧大兄弟
