现在是互联网逐渐发展，已经出现了很多可以供自己写博客的网站，大家可以在上面 发表自己的文章，供自己记录或者是供他人阅读。但是，可不可以自己搭建一个只属于自己的个人博客网站呢？这篇文章就带你从0开始搭建一个自己的个人博客网站，并部署到属于自己服务器。这里有一点要说的是，没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。

博客框架Hexo介绍：

---

Hexo是一个快速，简介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。

Hexo博客框架的优点

---

• 速度极快：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
• 支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
• 一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
• 插件和可扩展性：这个也是hexo很强大的一个地方，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo博客框架搭建：

---

我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。

1.安装Git

直接使用yum安装即可，在命令行输入 yum -y install git

完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：

2.安装Node.js

Node.js是一种运行在服务端的JavaScript，是一个基于Chrome JavaScript运行时建立的一个平台。

Hexo基于Node.js，所以安装Node.js是必须的一个操作，安装步骤如下：

2.1：下载安装包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    

        1
    

2.2：解压缩软件包并配置环境变量：

#解压 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移动到/usl/lcoal目录下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #创建软链接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加环境变量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #让环境变量生效  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

2.3：测试是否安装成功：

在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：

3.安装并使用Hexo

Hexo的安装较为简单，使用如下命令安装

npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化

#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安装好之后的一个目录结构：

目录文件说明：

_config.yml：网站的配置信息，您可以在此配置大部分的参数。

package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds：模版文件夹。当您新建文章时Hexo 会根据 scaffold 来建立文件Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes：主题 文件夹。Hexo 会根据主题来生成静态页面。

查看hexo的版本以及对应的数据：

3.2生成静态文件，并开启Hexo服务：

进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：

可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：

4.初步使用Hexo：

---

使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：

# Site
title: QIMING.INFO #博客网站的标题
subtitle:          #博客网站的副标题
description:       #你的网站描述
keywords:          #网站的关键词  
author:            #作者的名字
language:          #博客网站使用的语言
timezone:          #网站时区  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

我自己的修改如下供大家参考，这里的修改没有太大的限制：

4.1：开始使用Hexo发布自己的第一篇博客！

执行下面的目录创建一篇新文章：

hexo new post <文章标题>  


    

        1
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件

4.2:编辑文章

进入到上面说的那个目录下可以看到我们创建的博客文件：

直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：

title：标题

tage：标签

categories：分类

date：时间

这些标注大家在-----区域可以进行使用

4.3：发布文章

输入如下命令，生成静态网页，静态网页会存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。

5.主题的选择：

主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。

---

将Hexo部署上线到服务器：

---

如果是有服务器的小伙伴，也可以将Hexo部署到服务器供全网访问，服务器的购买这里就不多说，阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话，就需要将上面的全部操作，在你的服务器系统上面执行，之后我们使用Nginx（反向代理服务器）进行部署。

Nginx安装：

Nginx是一款高性能的 HTTP 和反向代理服务器，这里我们采用编译安装的方式,按照下面的指引依次执行命令

#安装gcc编译环境： yum install -y gcc-c++ #安装zlib-devel库： yum install -y zlib-devel #安装OpenSSL密码库： yum install -y openssl openssl-devel #安装pcre正则表达式库：编译nginx，需要需要指定pcre的路径，这里我们选择安装稳定版本的。 下载地址：https://ftp.pcre.org/pub/pcre/ #选择对应的版本下载下来之后上传到我们的服务器，也可以使用wget直接下载 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

下载编译安装nginx：

nginx下载官网：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #编译指定安装路径需要进入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  这是支持https的一个模块，就是可以使用https：//这样去访问。 make && make install #编译安装  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

启动nginx服务：

#启动： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式启动  -c #测试： /usr/local/nginx/sbin/nginx -t #这个用于测试nginx的语法是否有问题 显示is successful即为成功。 #关闭： /usr/local/nginx/sbin/nginx -s stop #继续输入以下命令使Nginx开机自动启动： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我们需要配置服务器公网ip，编辑配置文件。

之后再重启nginx服务，开启hexo服务，这个时候使用公网的ip就可以访问到我们的hexo服务了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：csdn  

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务