从零开始搭建个人 hexo 主题博客

拥有一台属于自己的服务器和域名

自己的博客,当然要拥有一个自己的服务器和用来访问的域名啦,推荐全在阿里云官网购买即可

点击进入阿里云官网

记得在阿里云进行学生认证,服务器需购买满三个月以上域名才能解析备案

如何连接管理购买的服务器

服务器相当于一台裸机,也不在我们的电脑上,那我们就需要一个连接软件连接到我们购买的服务器。

putty是ssh的一种连接方式,一般是连接linux服务器用的,先建立连接而后打开

点击进入putty下载页面

  • 打开putty,在Host Name中输入服务器的IP地址,在Saved Sessions里面取一个这个IP的名字,点击Save,这样子在白色框内会出现IP名字,下次双击直接进入即可

2

  • 输入登录名以及密码,登录名默认为root,注意密码的输入不会显示出来,输入完密码回车出现这样的页面说明连接成功啦

3

服务器常见工具以及软件的安装

安装git

Git是一款免费、开源的分布式 版本控制系统 ,用于敏捷高效地处理任何或小或大的项目。

  1. Windows下安装软件,我们只需要有exe文件,然后双击,下一步直接OK就可以了。但在Linux下,需要用到的是apt-get命令来安装软件
1
2
apt-get update // 更新
apt-get install git
  1. 这里你在使用GitHub之前需要添加SSHkey,用来验证GitHub远程仓库

配置步骤请参考这里

安装Node

Node.js 你可以理解为一种用JS去写后端程序的框架,语法和JS是一样的,所以它对前端工程师来说是友好的,前端工程师不需要再去掌握另一种比如PHP、Java这样的语法

  1. 点击进入Node下载页面        右击复制链接

4

1
2
cd ~ // 返回home目录
wget 复制的地址 // wget命令用于从网络上下载资源,没有指定目录,下载资源回默认为当前目录
  1. 解压并移动到用户用来保存安装或者手动编译的程序/usr/local目录中,最后删除安装包
1
2
3
4
xz -d node-v8.12.0-linux-x64.tar.xz  // 下载的文件后缀名为xz是使用tar打包后再压缩生成的,使用xz工具命令解压,-d表示解压缩后压缩包消失
tar -xvf node-v8.12.0-linux-x64.tar // 解压包
mv node-v8.12.0-linux-x64 /usr/local/node // node-v8.12.0-linux-x64移到/usr/local目录下并且重命名为node
rm -f node-v8.12.0-linux-x64.tar // 删除包
  1. 执行下面代码显示版本信息即代表安装完成
1
/usr/local/node/bin/node -v

这里可能会有人会提问肯定在其他目录下会用到node的呀,又不是只有在node所在的文件夹才会用到。那么这里我们要为node设置环境变量,通俗的来讲,如果你在其他目录输入有关node的命令行,当前目录下识别不了这行命令,那么就会前往到你设置的环境变量中寻找

  1. 用软连接为node npm设置环境变量,放到usr/local/bin
1
2
ln -s /usr/local/node/bin/node /usr/local/bin
ln -s /usr/local/node/bin/npm /usr/local/bin

为什么上面用apt-get安装的软件安装的都默认在环境变量里了,所以不需要设置软连接

npm是随同Node一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用

  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用

  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

安装Nginx

在之前学校的学习中用过vs2016进行web开发,F5启动,右下角会出现一个IIS来跑你的web站点,显示出网页。那么在Linux环境下,我们选择Nginx

Nginx是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在 BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等

1
apt-get install nginx

服务器安全组的配置

有人会问安装完了Nginx在浏览器输入域名或者IP为什么还是显示找不到网页,这里服务器又涉及到安全组的配置

服务器安全组是一种类似于防火墙的东西,它可以在一定程度上保护你服务器的安全性,安全组可以控制80端口,22端口,21端口,3389端口是否能直接被访问,要想浏览器访问到你的服务器,需要服务器开放80端口,具体操作如下:

  1. 打开阿里云控制台,点击安全组配置

1

  1. 点击配置规则之后你会发现80端口没有配置,点击右上角添加安全组规则

5

当你看到Nginx欢迎页面的时候,就说明你成功啦

6

  1. 这里就有一个问题了,我们看到的这个页面上的html,css内容是存放在哪里呢,我们去找找到sites-enabled目录(只有在sites-enabled目录下的配置文件才能够真正被用户访问),打开这个文件夹,你会发现一个名为default的文件

7

  • vim编辑查看default的内容我们可以发现网站的根目录

8

  • 那我们就顺藤摸瓜进入网站根目录瞅瞅

9

  • 这就是Nginx整个欢迎页面的内容文件

安装Hexo

  1. 做了这么多的前提工作,终于可以着手有关博客的内容了

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

1
npm install -g hexo-cli // 全局安装hexo-cli,hexo的功能封装成命令供我们用户调用就是hexo-cli
  1. 同样为hexo设置软连接
1
ln -s /usr/local/node/bin/hexo /usr/local/bin
  1. 新建hexo博客项目
1
2
3
4
5
6
cd ~
sudo hexo init myhexo // 以管理员身份新建项目
cd myhexo
hexo g // 生成网站静态文件到默认设置的 public 文件夹
rm -rf /var/www/html/
cp -r ~/myhexo/public/ /var/www/html // 替换网站根目录(那个欢迎界面就被替换掉啦)

10

看到这个就说明博客部署成功!!!

配置Git仓库

  1. github中添加仓库

11

打钩代表在仓库生成一个markdown文件,用来描述你的仓库

  1. 服务器配置Git仓库
1
2
3
4
5
6
7
cd ~/myhexo/source // 进入资源文件夹,这个文件夹用来存放内容
rm -rf _posts // _posts就是存放你博客的文件夹
git clone git@github.com:你的github名字/blog.git _posts
cd ~/myhexo
hexo g
rm -rf /var/www/html/
cp -r ~/myhexo/public/ /var/www/html

这时候你会发现今天你的github有了contribution,代表你的项目创建成功啦

0%