快速搭建个人博客

偶然间，看到某乎上高赞的一个问题：怎么证明下计算机专业学生的能力？问题下面呢，也是有众多网友评论哈，我记得最清晰、也最现实的一条是：有什么能力的，为了装个 X 罢了

看到这个我就不得不站出来说一句了，证明能力的方式也不是只有建网站这一种方式是吧，那毕竟还是“术业有专攻”呢，对吧。也不知道为什么锻炼下自己的实操能力，拓宽下学识就成了键盘侠下的装 X，咱也喷不过，求饶求饶啊

好了，回归正题，我建立个人网站呢，初衷其实非常简单，说不定你也想过，只是没去做而已。我是想：现在的网络中有好多的写作平台，比如我现在在用的C站，它已经非常成熟，社区讨论、问题发布、Blink动态等等，一应俱全。我在学完相关知识后，为什么不能自己写一个呢？也许更多的是我爱折腾罢了，哈哈

最开始接触是在C站文章发布“板块自定义”模块中，输入几行代码，就能有漂亮的界面。当时因为还没有接触到CSS、Web前端这些，是从网上白嫖来的，更是激起了我深入学习的兴趣

什么是博客，博客是大家分享、交流的一个平台，我们可以从中吸取别人的经验，提升自己。对于看博客的人来说是这样，对于写博客的博主呢，更是对自己所学的总结，能理清自己的思路，便于日后复盘，养成良好的习惯。技术博客，能记录我们遇到的问题，更好的Bug处理方案，在我们日后开发的过程中遇到同样的问题，记忆会更加深刻

有了想法就要动手，当我真正动手去实现的时候，才发现并不是一些标题党发的文章，像“十分钟建立属于你的网站、你还不会自己建网站？”。等到自己真正看着他们的视频、文章去操作的时候，有的是真大神，他默认的一些东西你应该是会的，会写的简单一些。还有一些，就是“伟大的搬运工”了，完完全全就是发布了别人的文章，还不放原文链接那种

正是我没有发现一套完整的，能帮助新手开发一个网站的资源，所以决定写下 UP 建站的过程，分享我从初学到最后实现的一些经验。所以，如果你也想要拥有一个属于自己的网站，可以跟着上手操作下，过程中如果遇到问题可以私信或留言。下面，让我们一起开始吧

思考下，我们查资料用的最多的是什么？有些朋友就会说了：那还用问，必须是“在B站上大学“啦，亦或是搜索引擎了。没错，我想这正是我们大多数人学习新东西、不断探索向前时使用最多的工具了。那，我们搜些什么呢？比如，你可以这样：

或许，你还可以这样：

的确能搜到很多的视频、文章。但是在这部分，我以我是初学者的角度来描述下我的心路历程：因为这东西目前在我的脑子里就是一个初步的想法，我还不知道怎么去实现它。就像是一个人在山里迷路了，我只知道要出去，可我找不到路啊

这一 pa，我们就来聊一些建站，我应该准备什么。网上大多数教程啊，都是一个大长篇，鼠标滑好几下都不带滑完的那种。会给刚入门的朋友一种：”哇，好难啊，这么多东西啊“的感觉，所以这里我对各部分的内容进行了分类，你只要按照顺序，一步步往下走就好啦

这里为什么要强调是”本地“呢，一开始啊，我也是看的教程，跟着别人的思路来走，像什么先买个域名，买台服务器啥的，我都踩过坑。这对刚入门的朋友在购买或者选择上会造成困难，我们莫不如换一种思考方式，现在我自己的电脑上建立一个网站，然后在”发送“出去，让别人都能看到。你看，这不就很明确了吗？

在自己的电脑上实现网站，必须的两个东西浏览器、开发工具，前者大家肯定是都有了，不做赘述（不然你拿什么看到的我这篇文章呢，嘿嘿），我们重点介绍后者

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能

废话少说，来这里下载 传送门

这儿呢，有个小问题，这玩意是收费的，如果你是一名大学生，可以通过学生认证免费申请到教育账号，如果……（不多说奥，自己去问度娘，能找到方法），直接无脑下一步安装就行，不要慌

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统

传送门

这两个工具具体来说就是：前者是全家桶（啥都有，不用你管，直接用就行），后者是一个空壳公司，需要各种员工（插件）去实现一些功能。所以如果你懒得去配置了，就直接下第一个，第二个可能在写博客Markdown语法上更方便一些，这个我后面会说到。此处如果你是新手，我建议你下WebStorm，后文的一些配置上，会更加方便

“框架”这是啥，懵了吧，嘿嘿。遇到事情不要慌，且听杰森娓娓道来。这里咱们看下某度词条的解释：

框架（framework）是一个框子——指其约束性，也是一个架子——指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题 框架这个广泛的定义使用的十分流行，尤其在软件概念。框架也能用于机械结构

这东西相当于什么呢，比如咱们建房子，你说你怎么建？咱不能没有图纸、没有工人就开始吧，这不是“天方夜谭”嘛。首先肯定是需要设计师根据用户需求设计好这个图纸，然后工人再依据这张图纸开始建房子对吧。这里省略了很多，行业大咖求放过，举个栗子哈

我们搭建网站也一样如此，你真的以为那么多的网站，都是程序猿没日没夜一行一行从零开始写出来的吗？emmm，其实最开始对于这个问题，我的回答是：嗯，是的，那肯定得呀。直到我去实习的时候，才发现企业里的一些东西也并不是全部从零开始开发的。（开源大法好，哈哈哈）难道你想成为这样？

一个产品、项目、网站……只要是有前人做过的东西，我们都可以从中汲取经验啊，学习好的编码，开源的，别人已经实现的我们何必浪费时间再去搞一遍呢？尤其是下文要将的WordPress，简直就是“无脑式操作”，你可能都不知道自己做了什么，但一个属于你的网站就那么出来了

博客框架通俗的说就是别人写好的一套源码，你拿过来会用就行，改一改自己的配置啊，配上想要的主题啊，这种就足够了（大佬请绕路）。所以下面我会给大家分享一些在搭建我的个人网站时，了解到的一些框架，并简单分析，供大家选择

还是老话，此专栏受众对象是刚接触的朋友，所以一些复杂，不需要知道的参数我并不会提及，只涉及到最关键的部分，方便大家快速找到适合自己的那一个

提前声明，杰森用的框架是 Hexo ，各位可以和我选择不同，但配置不尽相同，同理可得的那种

Hexo 是一个快速、简单且功能强大的博客框架。你用Markdown（或其他标记语言）写帖子，Hexo 会在几秒钟内生成带有漂亮主题的静态文件。>点我直达 点我直达 看这里 下载直达 参考这里 看这里 戳我直达 戳我直达 戳我直达 点击此处 < 查询你想要的域名

举个栗子，输入后查询，选好后加入清单，付款购买即可。不同的后缀价格不同，凭个人喜好

域名后缀，亦被称为顶级域名，是指代表一个域名类型的符号。 不同后缀的域名有不同的含义。域名共分为两类：国别域名（ccTLD），例如中国的.cn、美国的.us、俄罗斯的.ru、以及国际通用域名（gTLD），例如.com、.xyz、.top、.wang、pub、.xin、.net等1000多种，所有域名后缀作用无差异，仅外观和本身含义不同，但只有少数例如举例中的域名后缀可以在国内支持网站的备案

更多域名后缀信息，查看这里

因为我们现在已经有了用户名.github.io这样一个网站，为了简单易记，我们将“用户名.github.io“解析”到所购买的域名，这样，网站就有了所有域名和username.github.io两个网址了

打开仓库，找到设置，进入pages设置，添加域名

你还可以使用免费的强制HTTPS

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 HTTPS 在HTTP 的基础下加入SSL，HTTPS 的安全基础是 SSL【SSL(Secure Sockets Layer 安全套接字协议),及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层与应用层之间对网络连接进行加密】 因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP与 TCP 之间）。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯，例如交易支付等方面

打开这个选项

在阿里云官网进入域名控制台

若没有，在此处搜索

找到需要与username.github.io绑定的域名，点击“解析”

进入后，点击“添加记录”，需添加两次记录

第一次

第二次

DNS解析需要时间，稍等片刻后，若在浏览框中输入你的域名，正常访问则解析成功

这里为什么要说是正式上线呢，毕竟网站到了服务器看得才，才正规一点儿是吧，像GitHub Pages，倒是免费，但是在国内，DNS解析后需要时间，总会有无法访问或者断连的情况，太不方便

先来看看，服务器是何方神圣？

服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性 根据服务器所提供的服务，一般来说服务器都具备承担响应服务请求、承担服务、保障服务的能力。服务器作为电子设备，其内部的结构十分的复杂，但与普通的计算机内部结构相差不大，如：cpu、硬盘、内存，系统、系统总线等

简单理解：一台不断电，有空间的主题在“天上（云端）”一直在为你放置（部署）上去的资源而服务，能处理各种请求（比如你在导航栏输入域名访问网站）

有两种类型的服务器国内和国外的，根据我国法律规定，中国大陆的网站需要备案，等待的时间可能会长一点。国外的到时不需要备案，但是稳定性和访问速度就不敢保证了，各位小伙伴自己衡量，杰森用的是阿里云的轻应用服务器部署的个人博客网站

这是我的服务器配置，大家可以参考下

如果你是初学者，这个入门级的配置已经足够学生机，可免费领取，具体规则详见社区 > 戳我直达 成长计划

学生专享（体验后即可得到半月免费ECS服务器，社区内发表使用感受（发一篇博客）可免费续费两月），具体规则请查看官网

账号中心-> 基本信息位置完成学生认证即可

最新活动 位置购买优惠力度会更大

在图示位置出更改远程连接密码，保存好

虽然可以用浏览器远程连接，但是并不建议，因为有一些键盘上的快捷键会被系统误认为是对浏览器的操作，而不是对话框

为避免这样的问题出现，我们选择使用第三方工具Putty，具体操作步骤，阿里云的帮助文档已经非常详细，这里不再重复

从这里开始看，根据提示完成操作

启动Putty工具，链接服务器，登陆用户名为root，密码就是在服务器位置设置的密码（Linux操作系统中输入密码为了安全不显示，不必担心）出现以下界面时，说明配置正常，继续下一步即可

1.输入命令，安装git

中途如果暂停，则根据提示输入 yes / y / Y，表示继续安装，知道最后出现complete表示安装成功

2.创建git账户

3.添加git账户权限

4.执行最后一条命令后，点击键盘i键进入编辑模式，找到图示位置代码

在下面加入一行

按 Esc键并输入 :wq（含义：保存后退出）

5.回改权限

6.设置git账户密码

输入命令回车后连续输入两次密码即可（不显示，正常），出现图示即成功

7.切换至git账户

创建 ~/.ssh 和 ~/.ssh/authorized_keys 文件

点击键盘i键进入编辑模式，粘贴本地电脑生成的SSH公钥，文件位置如图

粘贴后，按 Esc键并输入 :wq（含义：保存后退出）

赋予权限

8.本地 git bash here 中测试是否免密登陆成功

出现图示内容表示连接成功

9.服务器中创建仓库并完成配置 切换到root账户

创建repo仓库目录

赋予权限

建立网站根目录hexo

赋予权限

新建空白的git仓库并初始化

10.创建 Git 钩子，用于自动部署

同上，进入编辑模式，粘贴下面代码并保存退出

修改权限

仓库建立完毕

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务，其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名

中途输入 y，表示继续安装（和上面一样）等待安装完成，会显示登陆网址和初始密码

注意红框位置，如果两个网址都无法访问，请在服务器安全组 / 防火墙中放行8888端口

输入初始账户名、密码登陆

进入后，搜索Nginx点击安装（我这里已经装过了）

网站--> 添加站点，域名形式xxx.com 无需任何前缀

设置--> 配置文件，修改红框内容

设置--> 网站目录，修改为 /www/hexo 并保存

服务器终端，重启服务

至此，服务器端配置完成

进入本地博客根目录，修改 _config.yml 文件部署位置

GitHub Pages 设定

服务器设置

源码如下

打开Putty工具，连接服务器赋予权限

本地根目录下打开 git bash here执行命令

出现图示内容表示部署成功，等到备案完成后就可以通过域名访问了

杰森的网站也是最近才备案下来，所以如果你等不及，就另寻他路吧，在国内，咱可不敢造次啊啊啊 你会经历以下几个阶段

购买服务器后，绑定域名后系统会提示你没有备案，根据提示完成即可

英文全称：Internet Content Provider，中文全称：网络内容提供商 ICP可以理解为向广大用户提供互联网信息业务和增值业务的电信运营商，是经国家主管部门批准的正式运营企业或部门

进入官网 在阿里云完成ICP备案后，系统也会提示你操作

部署完成后，选择联网备案登陆

提交网站所有人信息和一些基本材料等待审核通过，最后在网页底部插入代码即可，效果如图

到这里，你的个人网站就成功上线了，也部署到了服务器。内容会根据大家的反馈情况持续更新！！！

最后，放上杰森的小破站地址，欢迎到访 haha >>> 杰森的小破站

参考资料

技术小白如何建站

Picgo+Gitee搭建个人免费图床

Git 错误：OpenSSL SSL_read: Connection was reset, errno 10054