天涯论坛

 找回密码
 立即注册
搜索
查看: 68|回复: 2

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

[复制链接]

3028

主题

210

回帖

9777万

积分

论坛元老

Rank: 8Rank: 8

积分
97779018
发表于 2024-7-29 10:51:31 | 显示全部楼层 |阅读模式

大众好,我是明哥。

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

倘若正好有搭建个人网站的想法,那样本文会给你一个参考,许看了这篇文案你就能够不消再百度、乃至谷歌了,由于我会写得 足够的细致而系统

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

这些四个网站,很好的将我这几年来写的文案进行分类,并以精美的排版展此刻每一个需要的人眼前。

四个网站,用的都是三级子域名,可见在我心里,她们无论哪一个都没法作为我心中的个人网站。

原由有几点:

内容过于分散,不可表率一个完整的我。可定制性太低:头像,评论系统等等对 seo 太不友好了,有害揭发托管在 ReadtheDocs上,拜访速度太慢。

虽然有不少让我心痛的地区然则它们却有流淌在基因里的优良

无成本(时间成本当然不算啦):你不需要服务器,不需要域名。新手友好,只要简单配置,就能马上快速上手。

好似扯远了,还是说回 WP 的网站搭建吧。

在教程之前呢,我先 show 一下我的成果,欢迎你去点点点~

网站位置https://iswbm.com

2. 准备工作

一台 Linux 服务器

起始搭建网站之前,当然第1步是购买一个属于自己的 『服务器』。

能够选取如下途径进行购买:

阿里云腾讯云Ucloud

等的大厂服务器,不要贪图便宜去买国外的服务器厂商,由于速度很慢非常多,很影响体验。

我的便是阿里云上购买的,刚起始买个最低配置的服务器就行,以后不足用了,能够慢慢升级,扩容。

能够先领个券,再购买更实惠:点击领券

倘若是学生能够在领券页面里找到学生专享,服务器9.5元/月,直接点击购买就可。不是学生能够组团购买,更便宜,服务器购买就不多说了,拿钱就好了。

一个专属的域名

买了服务器后,你就会持有一个公网ip,倘若网站搭建起来了,你完全能够运用这个 ip 去拜访,但仅供研发、测试运用

倘若要真正运营起来,想要有流量,还得搞一个域名,方便你推广。

域名的购买意见和上面服务器运用同一个厂商,能够省去有些麻烦。例如阿里云购买的域名要备案是需要你在阿里云下有一台服务器的。

一个远程登陆软件

因为后面我运用的是手工安排的方式,因此要登陆服务器进行操作。

登陆的办法有两种:

厂商供给掌控台界面登陆:Workbench 和 VNC

这种办法针对不经常登陆服务器运维的人来讲,还是挺香的。

自己下载专业的远程登陆软件:Xshell CRTSecure

运用这些远程登陆软件时,你需要在服务器厂商掌控台上面先获取到三个信息

服务器公网IP服务器SSH端口服务器远程连接秘码

关于 Xshell 怎样运用的,能够自动百度搜索,教程非常多。

能够到阿里云上去购买,选最低配置就足够啦,后续拜访量起来了再扩容升级。

2. 安排方式选取

安排方式,可分为两种

运用服务器管理软件,实现自动化安排,最著名的便是 宝塔面板 。手动登陆远程服务器,实现脚本化安排

那样怎样选取呢?

运用宝塔安排,门槛低,只要会界面点一点就可

运用脚本自己手工安排,需要你学会

远程登陆服务器:运用 Xshell 直接运用厂商供给的在线SSH窗口有些 Linux 的基本操作:例如 Vi/Vim 的运用,目录及文件的基本操作等

这儿意见大众跟着我运用第二种办法便是手工运用脚本进行安排

原由有二:

第1次接触,更精细的安排过程会让你对 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 是世界运用排名第1的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 InnoDB,InnoDB引擎默认为开启,通常意见开启,直接回车或输入 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 Ctrl+c to cancel"后,按回车键确认起始安装。 LNMP脚本就会自动安装编译Nginx、MySQL、PHP、phpMyAdmin等软件及关联的组件。

安装时间可能会几非常钟到几个小时不等,重点设备的配置网速等原由导致影响。

倘若表示Nginx: OK,MySQL: OK,PHP: 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,能够看到如下内容:

其实这便是一个简单的网页demo了,自己随便修改index.html,就会有区别的内容。

4. 安装 WordPress

WordPress运用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

找到网站根目录位置,如下图所示:

修改成如下内容:

随后,运用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,你能够看到如下内容:

此刻起始,进行安装。填写信息如下:

其中,*** 改为你设置的MySQL数据库秘码。点击提交,显现如下内容:

在/home/wwwroot/wordpress下,创建并编写wp-config.php文件:

$ vim wp-config.php

将上图内容复制进去并wq保留退出,而后点击此刻安装。最后便是配置用户信息了,这个是你登录wordpress用户后台的,要记住:

最后点击安装WordPress,安装成功会显现如下界面:

点击登录,输入账户秘码,就能够登录自己的 wordpress 后台了。

此时候你运用浏览器去拜访 http://ip ,就能够看到你搭建的第1个网站了。

此时你看到的这个网站,是 wordpress 默认为你安装的免费主题(应该有三个),可能并不是那样的好看,但不碍事,后面我会教大众怎样挑选一个自己合适的主题,把你的网站装扮得有模有样。

5. 装扮你的网站

这儿,你的网站安排已然所有完成,然则还差最后一步,运用 WordPress 最为核心的一步:让你的网站看起来更加专业,更加成熟。

为此咱们需要做两件事:

安装主题:让网站变得好看安装插件:丰富网站的功能

5.1 安装主题

一样运用的 WordPress 的网站,外观上却天差地别。有的很酷炫,有点很简约,这是由于选了区别的主题(能够理解为皮肤)。

在你安装完 WordPress 后,本身就自带了几个免费的主题。

几乎没人会运用它们,由于实在没什么亮点(便是丑)。

在 WordPress 的自带了主题商店,里面有海量的免费主题,各式各样的都有,可能有你爱好的。

这儿要说明一点,我的主题不是在商店里安装的,而是我经过搜索引擎找到了一个比较清爽的主题,很符合我的审美,我装扮过后的效果如下。

倘若你想和我用同样的主题,我已然将安装包打包好了(需要的添加我微X领取: stromwbm),直接下载后,按下图的方式上传到你的 WordPress 后台安装就行。

5.2 安装插件

日前我安装的插件比较少,然则基本够用啦,下面列举一下,倘若你有什么好插件介绍,能够评论区举荐一下:

1. WP User Avatar

原生 WordPress 默认运用 Gravatar头像,用户(包含访客评论)的头像调取都是按照所留邮箱匹配的 Gravatar 头像。

Gravatar 怎么办?

只要装上 WP User Avatar 这个插件就能能够运用 WordPress 媒介库中的照片做为默认头像了。

2. WP-PostViews

安装了 WP-PostViews,就能够统计你文案的浏览次数。

需要两步配置

第1步:设置表示的文字

第二步:在你要表示的位置写入如下代码

效果如下

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 nginx

6.2 网站添加备案号

倘若你的域名已然备案了,最好将你的备案号放到底部(好似会有检测)。

6.3 美化文案的排版

一个好的排版,能够极重提高阅读体验,因此呢定制一个好的排版非常有必要。

我网站里的文案排版样式,借用的是 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; }

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,非常顺利。

这儿,事情其实还结束,你还需要做两件事情:

第1件事:在后台进行有些配置,否则从网站的时候还是会运用 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 nginx

6.5 图床开启HTTPS

因为我之前的 markdown 文案运用的图床都是 七牛云,当时并开启 https,此刻网站开启了 https 后,自然照片要开启,否则浏览器会表示有部分不安全的资源。

登陆七牛云,然后进入证书管理 上传证书(重视这个证书得另一申请,不可运用先前申请的 iswbm.com 证书)。

进入对象存储 -> 域名管理,找到 HTTPS 配置的位置,点击 修改配置。

将按钮置为开启状态,选取咱们刚才上传的证书。

设置完后,并不可马上运用

域名的升级需要一按时间,等待就可

以上便是我搭建网站的所有总结,写了两个夜晚,直到昨晚才完成。

全文一共 5000 多字,昨晚写的时候,还出了个小插曲,文案被我误删除了,无论怎么 ctrl + z 都回不来,找了非常多办法,都行不通。。

把我吓得都快哭了,生怕今天发不出来文案

好在最后 Typora 还是给我留了一条生路,它居然支持 文件的版本掌控,真是有惊无险,差点今天就要哭了。

文案不易尤其是这种长文),倘若觉得本文写得还能够,给明哥转发下文案能够





上一篇:Linux:一行代码创建一个可执行命令的 Web 服务器
下一篇:自己创立网站需要怎么操作
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-10-5 10:13:01 | 显示全部楼层
楼主果然英明!不得不赞美你一下!
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109194
发表于 2024-10-22 09:57:54 | 显示全部楼层
楼主听话,多发外链好处多,快到碗里来!外链论坛 http://www.fok120.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 09:48 , Processed in 0.138988 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.