使用Hexo搭建个人博客

前言

在搭建个人博客前,我已经在CSDN上写过一些博客了,但一直想搭建一个自己的写作环境,可以自己设置样式,记录一下学习过程,于是趁清明节利用Hexo搭建了我的个人博客,并传到了Github服务器和我自己的阿里云服务器。Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架。以此文章记录一下搭建的过程。

搭建步骤

  • 安装Node.js
  • 安装git
  • 安装Hexo
  • 发布文章
  • MackDown语法
  • 推送网站
  • 更换主题
  • Next主题操作
  • 传入个人服务器阿里云

安装环境准备

Node.js官网上下载windows安装包,安装即可,安装过程中会自动配置环境变量即npm的安装,无需手动配置环境变量,在命令行输入:

1
2
node -v
npm -v

若返回版本号,则安装成功。

接下来安装Hexo,首先创建一个文件夹,可以命名为Blog,这个目录就是以后便存放Hexo框架及自己所发布的博客,在cmd命令行中进入此目录,使用npm命令安装Hexo:

1
npm install -g hexo-cli

安装时间较长,如果想快速安装,可以先安装淘宝镜像的cnpm,再安装Hexo,安装完毕后,初始化博客:

1
hexo init blog

此时可以生成博客了:

1
hexo g

生成后的博客自动发布到public目录下,启动服务浏览:

1
hexo s

在浏览器收入 http://localhost:4000 即可看到初始的Hexo页面了。

写博客

此时的Hexo页面已经自动为我们生成了一篇Hello World文章,如果我们想要自己发布文章,输入命令:

1
hexo new "使用Hexo搭建个人博客"

接下来会发现在blog/source/_post 文件下,会出现名为Hexo搭建个人博客.md的文件,此文件中的内容即为博客内容。

博客内容需要以Markdown语法写作,Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。当然可以使用记事本直接写Markdown文章,这里建议使用MarkDown编辑器书写,我使用的是小书匠编辑器,可以在写文章时同步浏览,更加方便。

图床
当博文中有图片时,若是少量图片,可以直接把图片存放在source文件夹中,但这显然不合理的,因为图片会占据大量的存储的空间,加载的时候相对缓慢 ,这时考虑把博文里的图片上传到某一网站,然后获得外部链接,使用Markdown语法, 完成图片的插入,这种网站就被成为图床。本博客采用的图床为贴图库,注册使用较为方便。

完成博文后,再进行发布即可:

1
2
3
hexo clean
hexo g
hexo e

更换主题

如果你不喜欢Hexo默认的主题,可以更换不同的主题,主题传送门:主题库 本博客使用的是Next主题,可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题,在blog目录中(就是命令行的位置处于blog目录)打开命令行输入:

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开站点的_config.yml配置文件,修改主题为next:

1
theme: next

打开主题的_config.yml配置文件,不是站点主题文件,找到Scheme Settings,next主题有三个样式,本博客使用的是Pisces.

个性化设置

所谓的个性化设置就是根据个人需要添加不同的插件及功能。基本都是在_config.yml配置文件中进行设置即可,在NexT官网上面有详细的教程,参照教程即可一步一步美化自己的博客。

发布博客到GitHub

上面只是在本地预览,接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问,可以直接发布在GitHub上。在GitHub上添加新的repository,必须命名为:[你的用户名.github.io]。
在发布之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件。打开站点的配置文件_config.yml,翻到最后修改为:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/TJtulong/TJtulong.github.io.git
branch: master

最后安装Git部署插件,输入命令:

1
npm install hexo-deployer-git --save

分别输入三条命令:

1
2
3
hexo clean 
hexo g
hexo d

其实第三条的 hexo d 就是部署网站命令,d是deploy的缩写。完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io ,即可访问博客。

发布到阿里云服务器

阿里云服务器为Linux系统,首先在CentOs上安装并配置Nginx:

1
yum install nginx -y

在CentOS上创建一个存放博客静态页面的目录如:/var/www/blog,利用Xftp5将本机blog下的public下的所有文件传入,注意设置编码为utf-8

接下来在CentOS中配置Nginx.conf,将默认目录设置为/var/www/blog,重启Nginx后,输入ip地址即可访问博客。