hexo博客搭建教程

hexo

hexo博客

发布日期: 2019-05-26

搭建环境

安装Git
Git官网下载
安装Node.js
Node官网下载
安装Hexo
hexo官网
 Git地址

npm i -g hexo-cli

初始化

新建一个blog文件夹，存放项目文件。
命令行cd到blog目录下，输入hexo init初始化，然后npm i安装必备的组件。
输入hexo g生成静态网页，然后输入hexo s打开本地服务器。
浏览器打开【http://localhost:4000/】就可以看到初始化的博客。

目录结构

node_modules: 依赖包
public：存放生成的页面
scaffolds：模版文件。当你创建一篇新的文章时，hexo会依据模版文件进行创建，主要用在你想在每篇文章都添加一些共性的内容的情况下。
source：用来存放你的文章。除了文章还有一些主要的资源，比如文章里的图片，文件等等东西。这个文件夹最好定期做一个备份，丢了它，整个站点就废了。
themes：主题文件夹
_config.yml 站点配置文件。很多全局配置都在这个文件中。
package.json 应用数据。可以看出hexo版本信息，以及它所默认或者说依赖的一些组件。

GitHub创建个人仓库

廖雪峰Git教程

注册github账号
Git官网
创建一个仓库，仓库名必须为你的用户名.github.io
根据git教程，配置SSH key

将hexo部署到GitHub

安装插件deploy-git
npm install hexo-deployer-git –save

打开Blog根目录下的_config.yml文件，这是博客的配置文件，修改与博客配置相关的各种信息。

修改最后一行的配置

deploy:
type: git
repo: https://github.com/ 你的用户名 /你的用户名.github.io.git
branch: master

部署时，将生成网页通过git方式上传到你对应的链接仓库中。

hexo clean //清除了你之前生成的东西
hexo generate //生成静态文章，可以用 hexo g 缩写
hexo deploy //部署文章，可以用 hexo d 缩写

然后访问你的用户名.github.io

发布新文章

使用命令行安装npm i hexo-deployer-git
hexo new post “title” 在blog\source_posts 的目录，下面生成一个 “title”.md 文件

hexo配置

根目录下的 _config.yml ，是整个 hexo 框架的配置文件，可以在里面修改大部分的配置。
hexo官方配置地址

hexo主题下载
也可以在你的 themes 文件夹下使用 Git clone 命令来下载:
git clone https://github.com/blinkfox/hexo-theme-matery.git

在配置文件中修改theme的值
theme: hexo-theme-matery
文件名和主题文件名称一致

新建默认页面

categories 用来展示所有分类的页面
- hexo new page “categories”
tags 用来展示所有标签的页面
- hexo new page “tags”
about 用来展示关于我和我的博客信息的页面
- hexo new page “about”
about 用来展示关于我和我的博客信息的页面
- hexo new page “about”
contact 用来展示留言板信息的页面
- hexo new page “contact”
friends 用来展示友情连接信息的页面
- hexo new page “friends”
- 需要在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件
[
{
```
"avatar": "",
"name": "",
"introduction": "",
"url": "",
"title": ""
```
}
]
添加404页面
- 在 /source/ 目录下新建一个404.md

---
title: 404
date: 2019-04-17 19:41:10
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

然后在 /themes/matery/layout/ 目录下新建一个 404.ejs 文件

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>