想来想去,准备搭建一个自己的个人网站,用来放一些教程、笔记什么的,以备以后之需。

搭建个人博客有很多种方法,一是使用现成的博客站点,比如CSDN、博客园这些,使用起来比较方便快捷,属于傻瓜式的博客搭建;二是使用Github Pages,用这个最大的好处就是不需要自己申请服务器和域名,一个GitHub账号就可以搞定,0成本,比较适合学生党;三是自己申请一个服务器和域名,这个方法可定制化程度很高,但是成本相对也高。

这里我使用的是第三种方法,用DigitalOcean+NameCheap搭建域名服务器,用Hexo构建个人博客主页的架构。

准备工作

在DigitalOcean上申请一个服务器

1. 注册DigitalOcean账号

打开DigitalOcean进行账号注册,点这个链接会给你$10-$30的优惠额度,相当于可以免费使用两个月。当然也可以像我一样使用GitHub的学生包优惠,可以直接兑换$50的优惠额度。关于GitHub学生包的申请方法,可以自行谷歌。

不管是否使用GitHub学生包,都需要先注册一个账号,注册账号的时候需要验证你的信用卡信息或者使用PayPal支付$5以证明你有一定的支付能力(使用信用卡不会扣钱)

2. 搭建一个服务器

账号创建成功后,使用GitHub学生包的童鞋可以先在Account-Billing里面兑换自己的优惠额度。然后我们就可以开始创建服务器了。

在Creat里选择Droplets,进入服务器创建的界面。

在这里我选择了Ubuntu18.04(LTS)作为我的服务器,计划选择了$5/mo,基础配置是 1 CPU 1GB RAM 25GB SSD 1000GB的流量,用来搭建个人网站足够了。

对于节点地区,我选择了 Singapore,毕竟大部分是在国内访问,选择Singapore节点会更快一点(当然具体是不是还得看实际测速结果)。

接下来还有一个可选项 Select additional options,虽然不太清楚具体有什么作用,我选择了IPv6和Monitoring这两个。

对于 Authentication,推荐选择使用SSH keys,安全性会更高一些,如何生成SSH公钥,可以参考官方文档。

对于Linux系统,几行命令就可以完成,Windows系统就自行参考相关文档吧。

首先生成SSH公钥

1
ssh-keygen

之后会让你设置个人口令

1
2
3
Enter file in which to save the key (/home/baymrx/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

直接一路回车跳过SSH公钥就生成完毕

使用以下命令查看SSH公钥

1
cat ~/.ssh/id_rsa.pub

这些设置完了,其他的默认就可以,然后就可以点 Creat Droplet

之后会有一个初始化的过程,稍等片刻就可以看到创建完成。

在Namecheap购买一个域名

同样是使用GitHub学生包,会赠送一年的.me域名。进入Namecheap网站,查找自己想注册的.me域名有没有被别人占用,如果没有那么创建一个Namecheap的账号,(免费)购买下来就可以。

随后会让你有一个选择和输入学生邮箱

两者应该没啥区别,在这里我选择Exposure,下面的邮箱不一定非得是美国教育邮箱,在这里填写自己的邮箱(GItHub学生包填写GitHub所使用的邮箱),只要能正常接收邮件就可以。

接下来会有一个认证的过程,输入你地址信息就行。完成后邮箱里会收到一封邮件需要你重置Exposure账户密码

配置本地环境(以Windows中的WSL为例)

1. 安装Node.js

有两种方法:

方法一:

cURL:

1
curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

1
wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。

1
nvm install stable

方法二:

首先在Node.js官网下载(这里我下载的是linux-x64的,版本号是v10.16.0)并进入到下载目录

安装Node.js到指定目录/usr/local/lib/nodejs

1
2
sudo mkdir -p /usr/local/lib/nodejs
sudo tar -xJvf node-v10.16.0-linux-x64.tar.xz -C /usr/local/lib/nodejs/

设置环境变量

1
sudo vim ~/.profile

在文件末尾添加

1
2
3
4
# Nodejs
VERSION=v10.16.0
DISTRO=linux-x64
export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH

更新profile文件

1
. ~/.profile

验证安装是否成功

1
2
3
node -v
npm version
npx -v

2.安装git

一般系统会默认安装git,可使用 git --version查看

如果没安装,使用下面的命令安装

1
2
3
add-apt-repository ppa:git-core/ppa
apt update
apt install git

3. 安装Hexo

使用 npm 安装 Hexo

1
npm install -g hexo-cli

npm在国内的源的加载速度比较慢,可以使用淘宝源换成cnpm

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

##之后的npm命令都可以使用cnpm马来代替

在这里可能会出现权限问题,解决方案是将 /usr/local 目录的所有者变更为当前用户

1
sudo chown -R $(whoami) /usr/local

安装完成后进入指定文件夹,并建立一个blog目录,cd进入这个目录,安装相关的插件依赖

1
2
3
4
mkdir blog
cd blog
hexo init
npm install

连接可能会有些慢,安装完成后可以在本地运行一下试试

1
hexo s   #本地跑一下查看博客效果

初始化完成后会生成一篇默认的文档,它在你博客目录下的/source/_post文件夹中,以md文件存在

1566219869548

Hexo其他相关命令

配置远程服务器(VPS)

1. 连接远程服务器

在自己的终端(之前生成SSH key的设备)中使用SSH连接远程服务器

1
SSH root@[ip_address]   #这里的IP地址为服务器的公网IP

2. 安装Nginx

下载安装Nginx

1
2
3
apt-get update
apt-get upgrade
apt-get install nginx

安装完后启用Nginx

1
service nginx start

随后可以使用服务器的公网IP在自己的浏览器上打开测试

显示 Welcome to nginx!则表示安装成功

怎么将域名连接到服务器(域名解析)

在Namecheap的管理界面打开 Domain List,然后在 Advanced DNSADD NEW RECORD,建立两条记录。

第一条类型为 A Record,host填 @,value填服务器公网的IP

第二条类型为 CNAME Record,host为www,value为申请的域名。如图

保存之后等DNS服务器更新完成,便可以在浏览器使用你自己的域名打开网页。

3. 配置git

创建一个网站的根目录(用于存放网站的部署的静态文件)

1
mkdir /var/www/blog

建立并初始化空的git仓库,只有初始化之后才可以向这个仓库中添加代码

1
2
3
cd /home
git init --bare blog.git
chown -R git:git blog.git

配置git钩子

1
vim /home/blog.git/hooks/post-receive

在其中添加

1
2
3
#!/bin/bash
rm -rf /var/www/blog
git clone /root/blog.git /var/www/blog

完成后保存并退出,然后给这个文件赋予可执行权限

1
chmod +x /home/blog.git/hooks/post-receive

4. 配置Nginx

vim /etc/nginx/conf.d/blog.conf

然后输入

server{
listen 8080;
root /var/www/blog;
}

需要将 /etc/nginx/nginx.conf里面的 include /etc/nginx/sites-enabled/这一行注释掉

修改配置文件

1
vim /etc/nginx/sites-enabled/default

将里面的 root /var/www/html改为root /var/www/blog

保存并退出,重启Nginx

1
service nginx restart

配置本地Hexo

当我们完成了服务器的相关配置之后,就要回到本地配置Hexo

在本机的blog目录中,打开 _config.yml,这是整个Hexo的配置文件

在文件的最后面有一个 deploy,改成如下信息(注意每个冒号后边不要忘了带一个空格!!!)

1
2
3
deploy:
type: git
repo: root@[IP_address]:/home/blog.git #此处的IP为服务器的公网IP

之后保存并退出

创建并发布文档

在本机中,cd进入blog目录

安装git自动部署插件

1
npm install hexo-deployer-git --save

对git进行环境配置,否则会报错。这里的用户名和电子邮件地址自定义即可,目的是在git提交时引用这两条信息,说明是谁提交的更新

1
2
git config --global user.name "username"
git config --global user.email example@example.com

配置完成后便可创建并发布文档

1
2
3
4
hexo new "Hello World"
hexo clean
hexo g
hexo d

g和d是generate和deploy的简写

总结

至此,历时整整一天,查询了很多资料,一个简单的个人博客网站就算是基本上搭建完成了。接下来就可以使用自己的域名访问博客了。emmm虽然刚建起来有一丢丢丑,但是满满的成就感有没有ヽ(゚∀゚)メ(゚∀゚)ノ (丑是可以后天整容的,可以换一个自己喜欢的主题~)

1566220070701

当然,这只能显示最基本的博客内容,还有很多东西需要完善,博客功能的添加,主题的变化等等,再慢慢来吧。

一些需要注意的地方

CentOS和Ubuntu

如果你的VPS系统是CentOS,那么apt-get命令肯定要换成yum

一般来说著名的linux系统基本上分两大类:
1.RedHat系列:Redhat、CentOs、Fedora等
2.Debian系列:Debian、Ubuntu等
RedHat 系列
1 常见的安装包格式 rpm包,安装rpm包的命令是“rpm -参数”
2 包管理工具 yum
3 支持tar包
Debian系列
1 常见的安装包格式 deb包,安装deb包的命令是“dpkg -参数”
2 包管理工具 apt-get
3 支持tar包

Permission denied

在hexo生成静态网页并发布的时候,或者git出现拒绝访问的情况。多半是在安装node.js的时候,使用的权限不同。比如在sudo状态下安装的nodejs在普通用户状态下没法使用,反之亦然。最简单的解决办法就是切换到对应权限的用户进行操作。

当然也并不绝对,还是要具体问题具体对待,多用谷歌查询一下。

番外

对于域名和服务器只有一年的免费使用期,过了这个期限,就要支付高额的费用了。。想一想我一个穷学生怎样才能负担得起,所以决定留一后手——将博客同步部署到GitHub Pages。算是个备份吧,先留个念想,以后有时间再慢慢实现它…

最后留几个链接作为以后博客主题优化以及GitHub Pages搭建的参考

Hexo+GitHub Pages搭建个人博客并配置相关主题

用Hexo搭建博客记录