手把手带你搭建自己的hexo个人博客（一）

前言

我之前看到了好多人都有个人博客，自己也蛮感兴趣，所以自己搭建 了一个个人博客。 一般博客系统分为两种：

• 动态博客系统：

  优点：
  可以在线编辑，在线操作，可以实现用户注册等操作
  缺点：

  1. 搭建不易，操作复杂易出错
  2. 需要服务器，需要较高的成本
  3. 后台数据管理，如果服务器不是自己的，租来到期的数据库被删了…

• 静态博客

  与之相反的就是静态的博客了，搭建简单，后台文件本地管理就行了，快速，简洁而高效。

静态博客介绍

• 静态博客框架有多种 hexo，hugo等等，我个人使用的时hexo，原因时它相对来说跟火一点~ 出问题了方便在网上差错。

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

搭建提前准备

1. node.js 安装 : node.js下载网站
   

2. Git安装 Git下载

3. Github创建个人仓库

创建Github个人仓库时要注意的格式为：accountname.github.io ,
accountname必须要和你的Github账号名称一致，大小写不用区分 以我个人的为例：

我自己的已经建立过了，他就是提示 already exits

了解hexo的基本命令

刚刚做好的准被工作，马上就可以来建立属于自己的hexo博客了，在此之气先了解一下hexo中的基本命令吧~

• 初始化hexo博客

   hexo init 
  

• 生成静态文件

   hexo generate
  

  hexo generate 可以简化 hexo g

• 启动服务器，用于本地查看预览

   hexo server
  

  hexo server 简化为 hexo s

• 将自己的hexo博客部署到远端

    hexo deploy
  

  hexo deploy 简化为 hexo d

• 清除当前的静态文件

    hexo clean
  

• 新建一篇文章

    hexo new "blogname"
  

  hexo new 简化为 hexo n

安装hexo过程

使用Git bush 进行以下操作：

1. 安装淘宝的镜像源

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

2. 从npm 安装hexo：

    cnpm install -g hexo -cli
   

3. 跳转到指定你想建立博客目录文件下 初始化生成hexo ：

    hexo init
   

   建立之后目录是这样的：
   

4. 启动 hexo ：

    	hexo s 
   

5. 将hexo部署到GitHub中 安装插件 ：

     cnpm install --save hexo-deployer-git
     npm install hexo-filter-mathjax-ssr --save
   

6. 设置 _config.yml 文件

     type: git
     repo: https://github.com/accoutname/accountname.github.io.git
     branch: master
   

   以我个人为例 我的个人账户名是ZQYnn，那么
   repo: https://github.com/ZQYnn/ZQYnn.github.io.git

   如下图：
   

7. 完成配置文件后 ： hexo d 将 hexo 直接部署到 github 上

注意：

1. 安装git 如果想使用dos 后要配置环境变量 否则部署时会出现 spawn git ENOENT 错误
2. 也可能出现spawn failed 错误 再将博客目录里的.git文件夹删除 进入命令行重新输入 hexo d

初始目录介绍

进入自己的hexo本地博客目录中我们可以看到一下文件的结构

介绍几个主要的文件/文件夹得用途：

• _config.yml
  配置网站基本的信息
• node_modules
  文件资源放置得地方
• source
  资源文件夹，点击进入会看见_post的文件 里面保存的就是markdown格式的文件，以后我们写的文件都会保存到这里
• themes
  保存网页的主题的文件，默认会有一个landscape的主题
• public
  公共的文件夹，保存生成网站信息的文件，用户可以看到此部分

更换主题

在这里我推荐两个认为不错的主题：

• yilia 是一个简约，清新风格的主题
• 个人比较喜欢 next加载出来的动画效果

1. 现在回到本地操作，将主题下载到本地：

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

2. 现在下载完成了主题 再次进入_config.yml文件中：

   theme: next

   

3. 更换next主题的方案，选择themes\next下的_config.yml文件，next中有多种方案可选,选择一个适合字节的，如下图：

查看当前的更改配

1. 清理生成的文件

    hexo clean 
   

2. 再次生成静态文件

    hexo generate 
   

3. 本地查看hexo 博客

    hexo server 
   

此时，通过本地查看已经建立的hexo博客 地址为 localhost:4000
注意：开启localserver，它会自动监听本地的资源变化，更改本地的资源后，直接刷新博客，就可以看见自己修改的内容，以后自己修改添加文件预览时，这么操作就可以了~

推送到远端

想要把刚刚建立的博客推送要远端的话，继续刚刚的步骤

	hexo deploy 

打开刚刚部署的网页就可以看到自己搭建的博客了

在hexo上写文章

写文章有两种方式:

1. 直接通过命令行写 hexo n “articlename” 之后写文章

2. 推荐第二种方式：
   在自己的博客目录下找到source_posts 直接建立markdown格式文件
   在markdown文件开头添加 文章题目和日期即可

    ---
    title: yourtitle
    date: 2019-05-19 17:04:21
    ---
   

结语

以上实现初步建立hexo博客，配置主题，写文章的过程。 接下来的文章中会继续介绍hexo配置主题后的个性化方面的一系列配置，这是是我通过hexo建立的个人博客，欢迎访问，目前萌新，不断学习积累中…