关于javascript:快速搭建个人博客保姆级教程

偶然间，看到某乎上高赞的一个问题：怎么证实下计算机专业学生的能力？问题上面呢，也是有泛滥网友评论哈，我记得最清晰、也最事实的一条是：有什么能力的，为了装个 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 会在几秒钟内生成带有丑陋主题的动态文件。> 点我中转 <

Hexo 个性：

运行成果极佳，成本低
多平台：本地、云、PC、挪动端通吃
反对多种 CDN 服务（开启能够进步网页的打卡速度）
各大搜索引擎对网站的收录及权重有较大劣势（用户搜到你公布的内容可能性更大）

如果你喜爱配置，对代码操作后实现肯定的配置，这款合乎你胃口。放上配置截图供参考：

WordPress 是基于 PHP 和 MySQL 的收费开源内容管理系统（CMS）。是寰球应用最宽泛的 CMS 软件，从最开始一款简略的博客零碎，倒退成为当初具备数千款插件，小工具和主题性能残缺的 CMS 零碎。> 点我中转 <
WordPress 个性：

商用范围广
不便后续备份和转移，有自带的工具反对
扩展性弱小（此处可联想 Google 的插件商城）
对自定义用户十分敌对（相对能够打造出你想要的）

如果你并不像看那些代码，能够用这款，WordPress自带后端治理，抉择本人想要的主题，而后拖拽所需控件（比方你想实现显示工夫这个性能，会有一个像手机端桌面小组件一样的货色，拖拽到想显示的地位即可实现）。另外最重要的是，应用它你须要先搞一台服务器

为了大家能更疾速的找到适合的，我不会给大家很多的可选项，更不会通知大家还有什么（不然你会感觉，我当初的可能不是最好的，我要尝试更多的。假使这样的话，人不知; 鬼不觉间你就会节约很多工夫，莫不如跟着一个先搭建下来，等日后相熟了，再更换其余的。）等到本人独立上手时，也能有个清晰的思路，不至于在某一点上花太多工夫

这一块呢，不必过多的介绍，能够了解为咱们建房子须要水泥、铲子等工具和原料一样，本地的环境就是咱们用到的铲子，是工具。而 Hexo 的博客框架就是水泥这样的原材料，咱们须要用工具才开始干活，不然你 * 用手干啊……

简略形容下它用来做什么，Look Here：

>Git 是一个开源的分布式版本控制系统，用于麻利高效地解决任何或小或大的我的项目。是 Linus Torvalds 为了帮忙治理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与罕用的版本控制工具 CVS, Subversion 等不同，它采纳了分布式版本库的形式，不用服务器端软件反对

不用理睬下面你从未听过的词汇，这么来。某度网盘用过吧，是不是有个主动备份，你选中本地的某个文件夹，当本地文件产生扭转时，只有软件在后盾运行，是不是云上也会和本地主动保持一致。过程就是这么个状况，然而 git 的操作目前你就能够相像成一个云，用一些命令你就能够把本地的代码“发送 / 备份”到云上

我并未深刻开展讲 git 的分布式个性，命令等内容，这里举荐入门的敌人能够 > 看这里 < 的教程，不便疾速入门

既然要应用 Git，那么咱们首先就要装置并配置 Git 的环境，点击这里下载（Windows 操作系统），点击 Download 按钮即可

装置过程不再赘述，间接应用默认配置，一“Next(站)”到底

上面咱们配置环境变量信息，详情参考此处，关上 Path 变量后，增加本地环境装置目录（确保文件地位达到 cmd）

装置实现后，你可能没有看到桌面的快捷方式，不要焦急。咱们在 Windows 搜寻框中搜寻 Git 就能够看到这样几个图标

能够间接点击 Git Bash 或者在桌面任意地位右键，关上 Git Bash Here 就能够应用啦

> 下载中转 <

很多敌人纠结这两个版本，看下这个解释置信就晓得须要哪个了，杰森用的是LTS 版本

LTS代表“Long Term Support（长期反对）”，Current 代表“以后的”
Current就代表最新公布的版本（每 6 个月一次的），它可能是奇数版本也可能是偶数版本

桌面右击，关上 git bash here 输出命令装置（默认地位即可，方面后续配置，不倡议批改）

npm install -g hexo-cli

这里我曾经装过了，可能显示的和你的不一样，执行完后敞开窗口就行，此时本地曾经有了 hexo 的环境。怎么样，是不是很简略呢？

在你本地任意地位（但要记住门路）不便起见 倡议间接在除 C 盘的任意盘符下的跟目录新建，命名任意，比方我这里是在 D 盘新建的 hexo-jason-blog 文件夹，能够参考下

原本我想用本人曾经搭好的本地环境给大家演示，然而为了能实在体现“老手”的操作环境，杰森决定从新建设，一步步从新操作，只为大家能走好每一步，直到胜利

在该文件夹下关上 git bash here 输出命令

hexo init

此时你可能会遇到这个谬误，不要慌乱，是从 GitHub 克隆时网络起因，多试几次就好

对于此类问题的解决方案请 > 参考这里 <

胜利成果：

根文件目录下多了这些文件

简略介绍下 hexo 的文件构造：

public 最终所见网页的所有内容
node_modules 插件以及 hexo 所需 node.js 模块
_config.yml 站点配置文件，设定一些公开信息等
package.json 应用程序信息，配置 hexo 运行所需 js 包
scaffolds 模板文件夹，新建文章，会默认蕴含对应模板内容
themes 寄存主题文件，hexo 依据主题生成动态网页（速度贼快）
source 用于寄存用户资源（除 posts 文件夹，其余命名形式为“ + 文件名”的文件被疏忽）

咱们日常写文的操作都在 source/_post 下，既然咱们曾经有了建房子时“和泥”的工具——WebStorm，为什么不必呢？

在 WebStorm 中关上根目录 hexo-jason-blog（间接将该文件拽到桌面 WebStorm 的快捷方式关上就行），关上终端并输出命令

hexo s

点击链接 http://localhost:4000（图中黄色下划线地位）进行本地预览，默认是 hexo 内置的 landscape 主题

光标停留在 Terminal 地位，组合键 Ctrl+C 进行本地预览，这就是本地最简略的一个网站啦

emmm，默认的页面敌人们也预览胜利了，大略呢，就是这样，嘿：

但总感觉，还是差了点什么货色。没有一些博客、网站该有的货色，那怎么能让它更像一个网站呢？

这里咱们介绍下主题和框架，咱们当初应用的Hexo 是一款疾速、简略的博客框架，主题就是开发者依据此框架开发的性能更加齐备、页面款式、栏目更多的一种”配件“。就像你用的手机，换上手机壳，选手机壳时须要匹配本人手机的型号，不然也不配套啊是吧

再举个“栗子”，像 Android 手机（IOS 闭源，除非越狱），厂家生产时默认的桌面主题，在 主题商店 这个 app 里你能依据本人的爱好抉择更好看的图标、背景、字体。就像是“换上新衣”，能够从这个角度了解咱们上面要做的操作

提及主题，必定就会有很多啦。还是那句话，大家依据本人的爱好抉择就好，这里是官网主题库，我比拟喜爱 Butterfly 这款主题，上面带大家给本人的网站“换新衣”

先给大家看下主题的页面

博客主页

博文页面

从主题的文档中看，作者也是始终在保护的，工夫很近。正所谓好的产品必须要有好的文档嘛，作者也是相当用心，大家能够跟着文档一步一步配置，非常简单，只是把一些工具组成链条罢了

Terminal 输出命令

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

期待装置实现，themes文件夹下显示了 butterfly 主题的一些文件

装置插件

装置 pug 以及 stylus 的渲染器，如果没有装置，预览界面是这样的

控制台输出命令，回车期待装置即可

npm install hexo-renderer-pug hexo-renderer-stylus --save

批改配置文件

网站根目录下找到 _config.yml 文件，批改主题为 butterfly（留神yml 文件格式）

本地预览

hexo clean // 执行此命令后持续下一条
hexo g // 生成博客目录
hexo s // 本地预览

效果图

可能看上去还是那么的“简陋”，额，这个问题呢，会波及到后续的”主题丑化“（其实就是加上了一些难看的图片而已，也很简略）。我的博客也没有优化的很细节，十分毛糙，工夫无限，前面再说吧，能够看下，留个”念想“，置信你做的会比我更好

我的博客

这是个 ma 玩意啊？？？不要慌，大家不是看咱们默认主题的网站一点儿都不难看么，那是因为没图片啊，你要是给它换上一套配图，优化一下，是不是就好多了呢？那在网络中咱们援用图片一种是本地上传，代码里放上门路援用；另一种则是通过网址，显然后者更不便（如果类比到前面要用到的服务器上，随着图片量日渐增多、存储空间缓缓缩小，每次发文都须要连同图片一起上传，那得占用多大的空间呐）

然而，如果咱们本人有一个中央，能把本地图片转换成链接（人人通过这个链接都能拜访到你公布的照片）是不是就很棒了 nie。Picgo和一些其余插件就能实现

前些时候更新过一片文章，应用 GitHub 和SM.MS。如果有不能类比操作的敌人，> 看这里 < 因为 GitHub 毕竟是国外的，访问速度上会有点儿慢，SM.MS倒是一个运行了很久的老牌子了，但它俩在访问速度上都略慢

杰森强烈推荐国内的 码云（Gitee），配合 Picgo 应用。稳固、疾速，还不容易失落。（ps：此处就会有些敌人问了，我公开了我的仓库，外面全放的是我的照片，会不会隐衷存在隐衷泄露什么的）对于这类问题，我只能说

谁天天闲的没事去看你仓库啊？？再者说，你能上传到仓库里 XXX（自行设想）照片么？？所以说，释怀用，不要想辣么多真的是

另外，情谊提醒：Gitee 对免费版账户存储容量最大为 5G，仓库满了记得从软件中改下门路，应用后不要乱改本人 Gitee 账户的名称（不是昵称，英文那个名称），不然就等 404 吧

间接放上官网文档，敌人们能够先配置一下，非常简单。你看到的页面可能是繁体中文，不要用浏览器自带的翻译引擎（可能翻译后，局部内容不显示）贴心的作者，早已想到了，咱们只有在网站右下角设置中切换一下就好

杰森在前面会专门出一期，来讲下主题配置中的一些问题，置信看到这里的小伙伴曾经急不可待想要把本人的网站发不到网上了吧，咱们重点讲这个问题

GitHub Pages是一种由 GitHub 中的仓库 / 我的项目间接创立的网页。治理简略，在本地编辑仓库中的内容，上传到 GitHub 上，GitHub Pages 就能疾速实现更新，重点是 不花钱，不花钱，不花钱

新建仓库，填写内容如下，特地留神红框地位

保障仓库 public，名称填写正确 用户名.github.io，零碎主动变更为Pages

在仓库设置中找到Pages

记住仓库地址，咱们会将本地的文件上传到仓库

如果你是在电脑上第一次应用git，请先配置SSH 公钥（一种平安协定，你能够了解为登陆某网站须要的验证码）

在 WebStorm 中链接到近程，增加仓库地址，这里 不是公布网站须要的仓库（非“用户名”+github.io 仓库，新建一个，为了治理本地代码）

因为这里都是根本的 git 命令，后面也提到过，不分明的小伙伴能够看这个专栏里的材料，都是一些根底操作，非常容易上手

批改网站部署设置

在网站本地 根目录 下关上 git bash here 顺次执行以下命令

hexo clean // 执行此命令后持续下一条
hexo g // 生成博客目录
hexo s // 本地预览
hexo d // 部署我的项目

执行结束后，所有人就能通过 你的用户名 +github.io这个域名拜访你的网站了。到这儿，咱们就胜利上线了本人的网站

如果感觉 GitHub 拜访速度慢（嗯，其实就是慢，还会有打不开的状况）能够部署到Gitee，都是一样的操作，还是中文，不要太简略 ei

额，公布的确是公布了，那你感觉像 用户名 +github.io这样的名称不便记忆吗？？我想，如果是一个老手（可能都不晓得 GitHub 是什么的用户，必定是很艰难了）

那，怎么样不便记忆，而且足够个性化呢？

当然，这部分必定是不收费的了，哪儿有什么都白嫖的情理呢？对吧，举荐在 阿里云 或腾讯云 实现上面的操作哦，如果你应用其余的平台，不是不行，然而倡议购买域名和服务器都在雷同的平台，方便管理

国内的大厂，都有保障，无脑冲就能够啦。从经济性角度来看，哪个有流动，更实惠就选哪个，杰森是看到了 阿里云 过后的流动比 腾讯云 更实惠，so~~

收到有些敌人反馈：那么多入口，都找不到从哪里买 / 找不到流动入口。这里讲下怎么查看最新的流动，平台会有哪些优惠，入口在哪里

账号核心实现学生认证购买更优惠

最新流动 > 戳我中转 <

不得不说，两家界面基本一致，相熟一个就行，所以地位差不多都一样

学生党查看这里 > 戳我中转 <

最新流动 > 戳我中转 <

域名（英语：Domain Name），又称网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识（有时也指地理位置）
因为 IP 地址具备不不便记忆并且不能显示地址组织的名称和性质等毛病，人们设计出了域名，并通过网域名称零碎（DNS，Domain Name System）来将域名和 IP 地址互相映射，使人更不便地拜访互联网，而不必去记住可能被机器间接读取的 IP 地址数串

如果你没有看懂，没关系，那听杰森细细道来。简略来说，在公网上拜访的资源都有其固定地址 IP，然而如果你要拜访特定的IP，就须要记住它。然而呢，它不不便记忆，人们就想出了域名这货色

给 IP 起了一个个性化的名称，比方攻城狮杰森是全称，敌人们喊我森森、阿森、小森，都是别名，但都指向“攻城狮杰森”这个人。那在网络中如何实现起别名呢？这里介绍下 DNS，它是互联网中的一项服务，实域名和IP的互相映射，也就是说，你输出域名拜访的就是域名所对应的IP 地址

既然了解了什么是域名，那咱们先来买个域名吧！
> 点击此处 < 查问你想要的域名

举个栗子，输出后查问，选好后退出清单，付款购买即可。不同的后缀价格不同，凭集体爱好

域名后缀，亦被称为顶级域名，是指代表一个域名类型的符号。不同后缀的域名有不同的含意。域名共分为两类：国别域名（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

yum install git

中途如果暂停，则依据提醒输出 yes / y / Y，示意持续装置，晓得最初呈现 complete 示意装置胜利

2. 创立 git 账户

adduser git

3. 增加 git 账户权限

chmod 740 /etc/sudoers
vim /etc/sudoers

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

在上面退出一行

git     ALL=(ALL)     ALL

按 Esc键并输出 ==:wq==（含意：保留后退出）

5. 回改权限

chmod 400 /etc/sudoers

6. 设置 git 账户明码

sudo passwd git

输出命令回车后间断输出两次明码即可（不显示，失常），呈现图示即胜利

7. 切换至 git 账户

su git

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

mkdir ~/.ssh
vim ~/.ssh/authorized_keys

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

粘贴后，按 Esc键并输出 ==:wq==（含意：保留后退出）

赋予权限

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

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

ssh -v git@服务器公网 IP

呈现图示内容示意连贯胜利

9. 服务器中创立仓库并实现配置
切换到 root 账户

sudo su root

创立 repo 仓库目录

mkdir /www/repo

赋予权限

    
chown -R git:git /www/repo
chmod -R 755 /www/repo

建设网站根目录hexo

mkdir /www/hexo

赋予权限

chown -R git:git /www/hexo
chmod -R 755 /www/hexo

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

cd /www/repo
git init --bare hexo.git

10. 创立 Git 钩子，用于主动部署

vim /www/repo/hexo.git/hooks/post-receive

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

#!/bin/bash
git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

批改权限

chown -R git:git /www/repo/hexo.git/hooks/post-receive
chmod +x /www/repo/hexo.git/hooks/post-receive

仓库建设结束

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

yum install -y wget &amp;&amp; wget -O install.sh http://download.bt.cn/install/install_6.0.sh &amp;&amp; bash install.sh

中途输出 y，示意持续装置（和下面一样）期待装置实现，会显示登陆网址和初始密码

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

输出初始账户名、明码登陆

进入后，搜寻 Nginx 点击装置（我这里曾经装过了）

网站 –> 增加站点，域名模式xxx.com 无需任何前缀

设置 –> 配置文件，批改红框内容

设置 –> 网站目录，批改为 ==/www/hexo== 并保留

服务器终端，重启服务

service bt restart

至此，服务器端配置实现

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

GitHub Pages 设定

服务器设置

源码如下

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: git@你的域名:/www/repo/hexo.git
  branch: master # 留神此处分支设定, 需在仓库中抉择默认的分支

关上 Putty 工具，连贯服务器赋予权限

chown -R git:git /www/repo/
chown -R git:git /www/hexo/

本地根目录下关上 git bash here 执行命令

hexo clean // 革除缓存
hexo d -g // 疾速部署

呈现图示内容示意部署胜利，等到备案实现后就能够通过域名拜访了

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

购买服务器后，绑定域名后零碎会提醒你没有备案，依据提醒实现即可

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

进入官网在阿里云实现 ICP 备案后，零碎也会提醒你操作

部署实现后，抉择 联网备案登陆

提交网站所有人信息和一些根本资料期待审核通过，最初在网页底部插入代码即可，成果如图

到这里，你的集体网站就胜利上线了，也部署到了服务器。内容会依据大家的反馈状况继续更新！！！

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

参考资料

技术小白如何建站

Picgo+Gitee 搭建集体收费图床

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

序言

本地网站

开发工具

WebStorm

Vscode

框架

Hexo（强烈推荐）

WordPress

本地环境

git

node.js

Hexo

装置

初始化

主题

款式

Butterfly

利用

正式上线

图床

Butterfly 配置

GitHub Pages 配置

服务器选购攻略

阿里云

学生专享

流动专享

腾讯云

学生专享

流动专享

域名

购买

DNS 解析

增加域名

增加解析记录

服务器

购买

部署

明码设定

近程连贯

git 配置

装置 Nginx

Hexo 配置批改

备案

ICP

联网备案