#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客

2021年11月24日 阅读数:4
这篇文章主要向大家介绍#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。


你们好,我是坚果,公众号”坚果前端“css


#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战

引子


由于学习IT技术仍是想应用到学习、工做、生活中,让它们更美好,就应该授人以渔,毕竟本身动手了才有收获前端

先给你们分享一下我与个人粉丝的部分聊天记录node

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_02

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_03

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_04

经过这些记录就是告诉你们,不论学历咋样,不论专业是否是计算机,只要有一个爱钻研的心,不惧困难,你均可以搭建属于本身的一个简单博客,linux

在以前我已经有三篇文章对服务器进行了讲解。git

​服务器的做用有哪些,此文带你来了解​程序员

​远程链接Windows服务器​github

​云服务器如何重置系统​npm

正文

今天的这篇教程是基于windows服务器进行的编程

因为帮助的是一位非计算机专业的学生,因此以为windows会更适用json

先来看一下成功后的截图

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_05

前提条件

  • 购买服务器
  • Node.js
  • Git
    固然如何安装git和Npm我也会在本教程指出。

在搭建我的博客以前默认你们已经购买并成功登陆了服务器(搭建我的博客的全部操做中,除对云服务器控制台的相关设置是在咱们本地电脑上操做外,其他均在服务器上进行),

关于如何远程链接本身购买的服务器,你们可观看小编往期发布的教程进行对应操做


小编所使用的是windows操做系统的阿里云服务器,详细参数以下图所示,供你们参考

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_06

搭建博客的前提:安装Node.js和git两个软件

1、首先下载并安装软件Node.js

历史版本网址以下:​​https://nodejs.org/zh-cn/download/releases/​

复制到浏览器打开便可

这里小编推荐你们安装12.12左右的版本,

主要是太新的版本,目前hugo,gitbook。hexo的支持都不太好

截至写这篇文档前,最新的版本为16.13.0#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_07

下图所示,因为页面太多,咱们先点击第4页,以浏览后面的页面,找到12.12左右的版本

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_08

以下图所示,点击至第7页,理由同上


以下图所示,在点击到第10页时,咱们能够看到有12.12左右的版本

此时咱们选择12.12.7版本下载,如图所示点击下载

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_09

跳转至以下页面后点击图上所指的连接进行下载



#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_10下载中,等待安装包下载完成后打开安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_11

点击“打开文件”进行安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_12

若弹出以下页面,点击“是”,容许应用对设备进行更改便可!

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_13

安装界面以下图所示,点击Next

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_14

点击勾选下图所示方框,后继续点击“Next”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_15

选择默认,点击“Next”两次后显示界面以下:

按下图中所示,勾选方框后点击“Next”。




#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_16

点击下图中箭头所指的“Install”按钮进行安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_17

等待安装完成

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_18

点击Finish完成安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_19

安装完成后出现以下弹窗,点击右上角叉号关闭便可!

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_20


按住键盘上的Win+R键,输入命令“cmd”后回车肯定,

紧接着在打开的命令行中输入命令“node -v”后回车肯定,以检查Node.js是否正确安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_21

已安装的软件版本会以下图显示出来,同以前下载的软件版本一致,则证实安装正确

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_22

2、接下来咱们安装另外一个必备软件:git

网址以下:​​https://git-scm.com/​​ 复制到浏览器打开便可

点击图示按钮下载git安装包

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_23

等待下载完成……

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_24

点击“打开文件”运行安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_25

若弹出以下页面,点击“是”,容许应用对设备进行更改便可!

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_26

安装界面以下,一直点击Next,直至安装完成,全部勾选保持默认便可!

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_27

点击Install进行安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_28

等待安装完成

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_29

下图中的方框保持默认或不勾选都可,点击“Finish”按钮,完成安装

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_30

至此,git这一软件咱们也安装完成了!

此外咱们还须要安装用来部署博客的软件,有如下几种可供你们选择,gitbook 、hugo、 hexo 、docifsy。这里小编推荐你们安装hexo这一软件、

固然须要其余教程的,你们也能够

3、安装hexo

官方地址:

​https://hexo.bootcss.com/​

按住键盘上的Win+R键,输入命令“cmd”后回车肯定,

紧接着在打开的命令行中输入命令“npm install hexo-cli -g”后回车肯定

这是全局安装的命令

npm install hexo-cli -g

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_31

运行中,等待安装完成

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_32

待运行完成后输入“hexo version”命令,回车运行

显示以下图所示即为安装正确

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_33

至此,搭建博客所须要的软件咱们已安装完毕,接下来咱们就能够用前面安装好的软件来部署咱们的我的博客了!

4、部署我的博客(建站)

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所须要的文件。

hexo init jianguo
cd jianguo
npm install

新建完成后,指定文件夹的目录以下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

在这儿,不讲解过多的hexo命令以及它的配置

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_34

直接启动服务器。默认状况下,访问网址为: ​​http://localhost:4000/​​。


hexo server

5、对服务器的防火墙进行相关配置

以下图所示,在服务器桌面左下角搜索“防火墙和网络保护”,查找到后点击进入设置

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_35

将页面拉至最低端,点击进入“高级设置”选项

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_36

先点击“入站规则”,而后点击进入“新建规则”选项

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_37

跳转至以下页面,在规则类型一栏下,选中端口后点击“下一步”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_38

咱们在下图所指示的框内输入咱们想要使用的端口,小编这里输入4000做为示范,而后点击“下一步”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_39

跳转至以下页面,咱们选中“容许链接”后继续“下一步”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_40

继续“下一步”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_41

在下图所指出的框内输入名称和对网站的描述(网站的描述也可不填)后点击“完成”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_42

以下图所示,新的规则已经建立成功

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_43

以下图所示,咱们点击“刷新”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_44

至此咱们就完成了对防火墙的相关设置,接下来咱们对阿里云服务器控制台进行相应的设置

若是想偷懒,能够一次性打开全部端口

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_45

6、对云服务器控制台进行相应设置

接下来对云服务器控制台的相关操做咱们须要切回本地电脑并登陆阿里云服务器控制台来进行

登陆阿里云进入到云服务器控制台后,以下图所示,点击进入“实例”一栏后点击咱们云服务器的实例ID进入实例

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_46

切换至以下页面,点击“配置安全组规则”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_47

切换至以下页面,点击“配置规则”

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_48

切换至以下页面,如图所示依次点击进行

我这儿是偷懒作法,全部一次性所有打开了

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_49

跳转至以下界面,将图中所标示的地方同下图配置一致,点击“肯定”,端口配置完成

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_50

上述方式是打开了服务器的全部端口,比较便利,若是你们有安全方面的考虑,

咱们也能够只打开一个端口用于外部访问,步骤以下:

按照下图所示依次点击进行操做

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_51

按照下图所示依次进行配置,由于以前在第五步(对服务器的防火墙进行相关配置)中,咱们设置的端口是4000,因此在“端口范围”à“目的”一栏这里咱们也须要对应设置为4000,其他参数同下图保持一致,点击 “保存”便可

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_52

以下图所示,能够看到咱们规则已经建立完成

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_服务器_53

7、运行以前部署的网站

切换到服务器上,回到以前部署网站的文件夹,右键选择“Git Bash Here”选项,打开git进行运行,输入“hexo s”命令回车运行

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_54

以下图显示,所建的网站已经在服务器上运行了起来,此刻咱们即可以经过咱们所建网站的IP地址在浏览器上进行访问了,网址形如:​​http://8.142.39.12:4000​​ (http://服务器的ip地址:端口)

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_我的博客_55

访问效果以下:

#yyds干货盘点#从0-1教你利用服务器作属于本身的我的博客_日更挑战_56

至此,咱们的我的博客就搭建成功了

要编写博客,咱们还须要一款编辑软件,

7、Typora

小编推荐使用Typora这一软件,

网址为​​https://typora.io/#windows​​​ (​​Typora — a markdown editor, markdown reader.​​)复制至浏览器打开下载便可,

此处再也不赘述。

这个问题就记录到这儿,

这是一个帮助粉丝解决问题的过程,也是程序员在编程之路上的点滴记录,若是那个粉丝想定制更高端的博客,我也会提供相应的教程。


若是你们喜欢的话,能够点赞支持一下。

最后关于服务器,我也写了一本小册,能够关注我,评论获取地址。