使用阿里云服务器+域名+hexo搭建个人博客

如何快速搭建个人博客?

前言

我一直都想拥有一个属于自己的网站,自己的博客;
很开心,我做到了,这里就与大家分享一下我的搭建过程;

• 搭建个人博客大概有以下几个步骤:
• 本地环境配置:安装Node.js,Git,Hexo
• 阿里云服配置:域名备案,添加安全组,域名解析
• 服务器环境配置:安装Node.js,Git,Nginx,Pm2
• github配置webhooks

注:我的本地环境为Win10,云服务器为Centos7

本地环境配置

安装Node.js

node.js是一个后端的JavaScript运行环境，拥有它，就可以编写系统级或者服务器端的 Javascript 代码，交给node去解释执行。

为什么要装node？Hexo本身就是一个JS框架，里面有很多JS脚本，需要node环境去执行。

这里使用的是安装nvm管理node版本的方式，所以先安装nvm,nvm是针对node产生的一个版本控制工具，使用它可以下载和切换不同版本的node.
npm是一种包管理工具，通过npm可以安装各种在npm上传的工具包。在安装node的时候npm会同时安装。
后面会需要使用npm安装如hexo等工具。

安装nvm(Node Version Manager)

1. 下载Windows10版nvm安装版本
   1.1 解压,以管理员身份运行nvm-setup.exe文件
   1.2 安装过程一路next,但要注意安装路径名不能有中文,否则可能出现一些莫名其妙的错误.
   1.3 配置npm和node.js的下载源
   1.3.1 编辑nvm目录下的settings.txt文件,在最后加入如下内容
   node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
   1.4 安装并配置npm及node.js
   1.4.1 命令行输入命令:
   nvm v 检查nvm是否安装成功
   如果出现不是内部或外部命令,检查环境变量
   在系统变量和用户变量加入NVM_HOME(nvm安装目录)和NVM_SYMLINK(node.js安装目录)
   安装node nvm install 8.0.0
   使用node nvm use 8.0.0
   检查node和npm: node -v npm -v
   安装多个node版本并切换: nvm list 安装最新的node.js及配套npmnvm install latest
   如果想要切换:nvm use 想要使用的node版本
2. 命令行的形式安装(推荐使用)
   2.1 安装nvm
   curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | >> bash
   安装完之后,重新执行全局变量文件source ~/.bash_profile
   输入 nvm 能够显示nvm版本或者收到Node Version Manager信息即为安装成功
   如果提示找不到nvm命令或者没有.bash_profile文件，可以手动添加环境变量
   vi ~/.bash_profile
   把这段内容加到文件中
   export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
   再次执行source ~/.bash_profile
   2.2 通过nvm安装node.js
   在安装完毕nvm并配置好环境变量后，就可以通过nvm控制node版本
   查看node版本nvm list-remote
   选择任意版本安装 nvm install v8.11.4
   查看已经安装的node版本 node list
   切换想要使用的版本nvm use v8.11.4
   将此版本设置为默认版本nvm alias default v8.11.4
   验证是否安装成功node --version npm -v

安装Git

安装地址

安装完成后git -version确认

git ssh配置
ssh的配置目的是为了之后部署好代码，上传时不需要每次都输入用户名密码

第一次配置需要你的github用户名和邮箱地址

git config --global user.name “xxxxxx” # 自行替换
git config --global user.email “[email protected]” # 自行替换

执行生成秘钥命令

ssh-keygen -t rsa -b 4096 -C "[email protected]" # 你的 GitHub邮箱地址

一路Enterd,看到这个就OK了

此时~/.ssh文件夹下就会生成id_rsa（私有秘钥）和id_rsa.pub（公有密钥），将公钥复制带粘贴板

pbcopy < ~/.ssh/id_rsa.pub

进入github,settings

左侧框选择SSH and GPG keys

new SSH key,Title随意取,将刚刚粘贴的秘钥放入Key中

完成后,进入命令行,测试配置是否成功

ssh -T [email protected]
The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

YES

Hi xxxxxx! You’ve successfully authenticated, but GitHub does not provide bash access.

完成配置

新建一个github仓库

打开github,找到仓库,新建仓库
Repository name(仓库名)随便写
Description(描述)可写可不写
选择public
直接Create repository(创建)

此处为SSH地址,待会发布hexo时需要

Hexo安装

Hexo是一个博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章生成静态网页,并且有方便的发布系统和各种插件。这里主要是安装hexo-cli及如何生成博客的基本模版，确保安装Hexo时已经安装node和git.

安装方法

使用npm全局安装hexo-cli

sudo npm install -g hexo-cli

验证安装

hexo -v

使用Hexo

在本地新建一个文件夹(就取个名吧,Blog),当成hexo的代码库
进入文件夹,初始化hexo库,在当前文件夹生成网站所需要的文件

hexo -init

安装代码仓库所需要的依赖包

npm install

执行命令本地预览页面效果

hexo generate #也可简写为hexo g
hexo server #简写为hexo s

打开浏览器,输入http://localhost:4000 打开页面,可以看到一个hexo的模板效果

回到命令行,Ctrl+C中断本地服务器,继续操作

hexo new post "first blog" # 注意标题中有空格需要用双引号包起来

这时候会在source/_post文件夹(存放博客文件)中自动创建了一个first-blog.md文件

再次用hexo启动本地服务器

hexo s

通过对source/_post文件夹中的文件进行修改就能更改博客内容

配置hexo的发布

每一次 hexo g 生成代码后,我们需要把它同步到git上,再通过github的webhooks自动同步到服务器

安装hexo的git部署插件

npm install hexo-deployer-git --save

打开项目下的_config.yml文件，该文件是整个站点的配置文件，在文件的最下方，修改deploy配置，这里需要用的之前生成的ssh地址

deploy:
type: git
repo: [email protected]:your_name/blog-web.git # 替换为刚才新建git代码库的ssh链接
branch: master

配置好之后,执行命令,更新代码到github

hexo clean && hexo g # 清楚本来的打包代码并生成出新的

hexo d # hexo deploy的简写命令`

服务器配置

帮助文档

如果你是小白,一点都不懂云服务器,看下面的链接:

1.云服务器ECS入门

2.安全组

3.域名

如果以下的操作还有不懂的建议百度一下,这里便不再赘余.

首先推荐两个实用的Linux远程工具Xshell6,Xftp6

献上破解版

链接：https://pan.baidu.com/s/11O0o3Hnu26tgiAs1ZQBe6Q
提取码：6i44
复制这段内容后打开百度网盘手机App，操作更方便哦

Xshell使用方法

名称随便定,协议SSH,主机就是你的阿里云服务器的公网ip,端口号22

用户名root,密码就是你的云服务器实例的实例密码

这样就能连接上你的云服务器

配置安全组

到云服务控制中心->网络与安全->安全组->配置规则

如果从来没有配置过的可以选择快速创建规则

加入两个必要的安全组:80/80,443/443,授权对象皆为0.0.0.0/0.
还需要添加一个webhooks的端口,随意取一个,就7777吧,配置规则和80/80一样;
也就是要添加三个安全组:80/80,443/443,7777/7777,

域名解析

域名记得备案
域名控制台->域名列表->解析

添加记录->

域名解析后,可以通过域名登录你的网站,而不是公网IP.

安装Node.js

进入云服务器
安装方法和本地环境配置一样,使用命令行方式
通过目录跳转到上面的教程

安装Git

安装命令

sudo yum install git

查看版本确认安装成功

git --version

ssh配置

git config --global user.name "xxxxxx" # 自行替换
git config --global user.email "[email protected]" # 自行替换

执行生成命令秘钥

ssh-keygen -t rsa -b 4096 -C "[email protected]" # 替需要换为你的 GitHub 电子邮件地址

一路Enter到成功

此时~/.ssh文件夹下就会生成id_rsa（私有秘钥）和id_rsa.pub（公有密钥），将公钥复制带粘贴板

cd ~/.ssh
cat id_rsa.pub

登录github网站->头像settings->SSH and GPG keys->New SSH key->将粘贴板上的秘钥粘贴上一个新的key(注意区分本地和服务器的SSH key)

进入服务器端,将github上的代码放入服务器,输入命令行

cd /
mkdir www # 用于存放业务代码
cd www
mkdir myBlog # 用于存放前端代码
cd myBlog
git clone [email protected]:yourname/blog-web.git # 自行替换为用于存放博客代码的仓库ssh地址

现在，我们完成了git的安装及代码库的部署，但是现在代码只是暂时同步了当前仓库的最新内容，但是如果有人在本地推送新的代码上去，服务端需要重新拉取代码

git pull # git代码拉取命令

安装及配置Nginx

何为nginx?
这里使用Nginx就是为了配置反向代理，实现页面访问。

安装CentOS 7 EPEL存储库，EPEL存储库相当于为系统安装一个第三方包源，其中会有一些常用的工具包

sudo yum install epel-release

安装nginx

sudo yum install nginx

YES至安装成功

启动Nginx

sudo systemctl start nginx

设置系统自启nginx

sudo systemctl enable nginx

• 配置nginx,让你的域名直接访问到服务器博客代码,显示博客页面
• 找到nginx配置文件,默认在 /etc/nginx/nginx.conf
• 开始修改配置文件

vi /etc/nginx/nginx.conf # nginx的配置文件路径

server {
listen 80;
server_name www.baidu.com; # 购买的域名
root /www/myBlog/blog-web; # 在服务端的代码路径
include /etc/nginx/default.d/*.conf;
location / {
root /www/myBlog/blog-web;
index index.jsp index.html index.htm;
}
}

不会用vim编辑器?
vim基本用法

重启Nginx

systemctl restart nginx

完成这些配置后,打开浏览器,输入你的域名,就能浏览你的博客页面了

安装pm2

pm2是node的守护进程管理器,安装pm2可以在使用webhooks时创建的服务进行维护
安装

npm install -g pm2 # npm 在装node时已经自动安装
pm2 -v # 查看pm2版本

pm2常用命令

pm2 start # 执行对应路径脚本
pm2 list # 查看看起的进程列表
pm2 restart <name|id> # 重启对应进程
pm2 delete <name|id|‘all’> # 删除对应的进程 all是全部
pm2 logs # 查看进程打印日志
pm2 monit # 监控每个 node 进程的 cpu 和内存使用情况

配置仓库webhooks

git webhooks能够实时的将变化的代码提交到服务器

打开GitHub仓库->Settings

Webhooks->右上角add webhook

URL:http://你的公网ip:7777/
Content type: application/json
Secret:自己的webhook密码(后面要用到)
选择Just the push event.
Add webhook

服务器端口设置监听

登录服务器
创建一个文件夹放置监听服务文件
cd ~
mkdir ListenWebhooks
vi webhook.js # 写入服务
将以下代码放入webhook.js文件

const secret = “刚刚设置webhook时的secret密码”;
const repo = “/www/myBlog/blog-web”;
const http = require(“http”);
const crypto = require(“crypto”);
const exec = require(‘child_process’).exec;
http.createServer(function (req, res) {
req.on(‘data’, function(chunk) {
let sig = “sha1=” + crypto.createHmac(‘sha1’, secret).update(chunk.toString()).digest(‘hex’);
if (req.headers[‘x-hub-signature’] == sig) {
exec(‘cd ’ + repo + ’ && git pull’);
} else {
console.log(‘err:’, ‘signature’, req.headers[‘x-hub-signature’], ‘sig’, sig, ‘time:’, new Date());
});
}
res.end();
}).listen(7777);

使用pm2开启服务
pm2 start ./webhook.js
pm2 list # 查看开启的进程列表

测试webhook
进入github,编辑webhook,Redeliver,成功!

所有配置全部完成.

测试

一般如果测试webhook成功了,所有步骤也就成功了.

• 为了测试效果,可以在本地代码库的source/_post文件夹中随便加入一个md文件
• 接下来进入代码库文件夹,当前文件夹启动命令行(右键 git bash here也可以)
• 输入命令hexo clean && hexo g
• 再输入命令hexo d
• 浏览器输入域名,博客出现md文件的内容的文章即为设置成功

最后,为了使我们的博客变得更加好看,我们可以登录hexo寻找适合自己的主题并设置!

有任何问题可以联系我或者评论