搭建一个Hexo博客，制作主题模板

这是我参与更文挑战的第1天，活动详情查看： 更文挑战

在使用Hexo搭建博客的时候，有很多朋友可能想要制作一套适合自己的模板，今天我想使用自己所接触的，自己了解到的，梳理一下具体的流程。希望大家多多支持。

hexo建站开始

安装hexo-cli

npm install -g hexo-cli //全局安装hexo-cli
hexo init hexotest //创建一个hexotest 项目
cd hexotest //进入到hexotest
npm install //安装hexo依赖包
复制代码

到这里我们一个简单的hexo博客就创建完成了
我们可以使用以下命令启动，在浏览器中通过localhost:4000查看

hexo server
复制代码

一、创建自己的主题模板

在 themes下创建自己的主题目录 “riseape”

目录

描述

languages

语言

layout

模板布局文件

scripts

脚本文件夹

source

静态资源

二、自定义页面布局

在layout目录下创建test.ejs 模板文件

<div class="riseape-primary">
  <div class="riseape-post">
      <%- page.content %> // 内容部分
  </div>
</div>
复制代码

然后再在根目录下的 source 中创建一个 test.md 页面文件,设置layout 指向 test 模板

---
title: 自定义页面
layout: test
permalink: test.html
---
复制代码

三、配置 _config.yml

theme: riseage //配置自定义主题 
复制代码

配置好主题，我们就开始来启动项目，自定义自己的主题模板吧，我是通过分析默认的模板，如何渲染数据。然后找的网上的一些模板，查看他们开源的github上面的代码，然后自己跟着敲。
最后制作出自己喜欢的风格主题

四、编辑文章

在source>_posts目录下添加md文件发布自己的文章。

文章的头部内容部分设置

---title: 封装一个axiosexcerpt: '简单封装一个axios公共库，平常项目可以直接引用，减少axios的一些基础配置，方便项目能够简单快速的利用axios请求后端数据，处理一些错误信息'toc: truetag: ['axios']category: ['vue']cover: https://cn.vuejs.org/images/logo.png---
复制代码

五、打包发布到github

通过hexo generate 打包

打包成功后，把Public 目录文件上传到github仓库  

5.1 创建github仓库

• 创建一个***.github.io的仓库名，后续可以通过这个地址直接访问自己的博客

• 复制仓库地址，然后再本地public初始化git

git init 

git remote add origin 仓库地址

git add .

git commit -m ‘备注’

git push origin master

六、总结

到这里，我们就完成了使用hexo 自定义模板，搭建自己的博客论坛，网上有很多博主开发好的模板，可以直接安装使用，但是有时候，别人的不一定完全适合自己，自己想要制作一套自己独一无二的模板，就可以自行开发模板然后进行安装。