hexo+github+hexo-theme-matery搭建我的博客

时间  2019-12-19
标签 hexo+github+hexo hexo github theme matery 搭建 我的 博客 栏目 Git 繁體版
原文   原文链接

前言

GitHub page提供了免费的服务搭建javascript

  1. 免费域名 xxx.github.io xxx是你的GitHub用户名
  2. 免费的代码存储空间
  3. 全是静态文件，快速访问
  4. git版本管理，能快速回滚或者切换的某个版本

准备工做

注册GitHub帐号

（若是已拥有GitHub帐号 无需从新注册）css

点击sign in 页面的Create an accounthtml

注册页面信息填写：java

注册完成以后直接登陆node

node环境

本地安装nodejs环境，此处就不在详细介绍安装了。react

安装git

为了把本地的网页文件上传到github上面去，咱们须要用到分布式版本控制工具————Git[下载地址]。git

安装选项仍是所有默认，只不过最后一步添加路径时选择Use Git from the Windows Command Prompt，这样咱们就能够直接在命令提示符里打开git了。github

安装完成后在命令提示符中输入git --version验证是否安装成功。shell

window须要安装git bash或者其余工具来支持git命令的使用npm

GitHub博客注册

接下来就是去GitHub上注册一个git page来存放咱们的博客静态页面

点击新增项目

打开新增页面

填写新增信息。

填写注意事项:

  1. name填写XXX.github.io
  2. 上面的XXX就是你的GitHub用户名owner
  3. 必定要填写.github.io后缀 否则就建立成普通项目了

建立完成会自动生成https://gongchenghuigch.github.io/ 这样的访问地址

Repository那么必定要按规则填写 否则后期会出现博客代码提交不上去的问题

若是你的这个page地址已占用看是否能把它迁移到别的page下面

配置SSH key

在本地代码push是须要你的GitHub权限，可是直接使用用户名和密码太不安全了，因此咱们使用ssh key来解决本地和服务器的链接问题。

本地公钥生成

ssh-keygen -t rsa -C "邮箱地址"
复制代码

若是本地目录下面已存在 直接覆盖原有的就能够

GitHub配置

setting>SSH and GPG keys>New SSH key

copy本地刚刚生成的.ssh/id_rsa.pub里面的所有内容

每一个人生成的目录地址多是不同的，能够在ssh生成的时候看到你本地的生成地址

检测是否添加成功

ssh -T git@github.com # 注意邮箱地址不用改
复制代码

若是提示Are you sure you want to continue connecting (yes/no)?，输入yes，而后会看到：

Hi gongchenghuigch! You've successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功

git全局设置

git config --global user.name "xxx"// 你的github用户名，非昵称
git config --global user.email  "xxx@163.com"// 填写你的github注册邮箱
复制代码

使用hexo

简介

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

hexo中文文档

原理

因为github pages存放的都是静态文件，博客存放的不仅是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关连接信息，相信谁都会疯掉，因此hexo所作的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，而后再将有改动的页面提交到github。

安装hexo

npm install -g hexo-cli
复制代码

初始化

在你电脑找一个文件目录下执行

$ hexo init <folder>
$ cd <folder>
$ npm install
复制代码

执行完成会出现如下的目录结构：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
复制代码

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

本地启动

hexo server 或者 hexo s
复制代码

浏览器窗口访问http://localhost:4000 会出现如下页面：

这个是默认主题 比较丑陋；下面会介绍一些我的比较喜欢的主题。

发布

配置_config.yml中有关deploy的部分：

deploy:
  type: git
  repository: git@github.com:gongchenghuigch/gongchenghuigch.github.io.git
  branch: master
复制代码

注意：

repository不要写成git clone的https的地址

错误写法：

deploy:
  type: git
  repository: https://github.com/gongchenghuigch/gongchenghuigch.github.io.git
  branch: master
复制代码

配置完以后直接执行命令：

hexo d
复制代码

执行完命名以后会在本地生成public打包的静态文件和.deploy_git提交git的编译以后的静态文件

public和.deploy_git下编译的静态文件以下：

若是在开发过程当中想看的编译的静态文件直接执行命令：

hexo generate
复制代码

注意：

在发布时若是本地已存在public须要执行hexo clean或者手动删除public目录，否则不会提交最新代码

新增文章

hexo new page test
复制代码

hexo会建立source/test/index.md

hexo new page --path _posts/text "测试页面"
复制代码

hexo会建立source/_posts/text.md同时页面title为“测试页面”

主题个性化设置

我的比较喜欢的主题是hexo-theme-matery，下面也都是基于这个主题的一些配置

主题下载

项目下面执行

git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery
复制代码

更换根目录下的_config.yml配置文件中的theme参数

## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery
复制代码

修改为你刚刚clone到本地要更换的主题

文章头部设置

将/scaffolds/post.md修改成以下代码：

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
summary:
tags:
categories:
---

复制代码

效果示例：

---
title: TypeScript声明文件
date: 2019-09-05 10:29:29
categories: 
- TypeScript
tags: 
- TypeScript
---
复制代码

导航配置

根目录_config.yml配置

title: gongchenghui
subtitle: 浅夏晴空
description: 北冥有鱼，其名为鲲，鲲之大，不知其几千里也；
             化而为鸟，其名为鹏.
keywords: gongchenghui,github
author: 浅夏晴空
language: zh-CN
timezone:
复制代码

主题配置themes/matery/_config.yml

menu:
  主页:
    url: /
    icon: fa-home
  标签:
    url: /tags
    icon: fa-tags
  分类:
    url: /categories
    icon: fa-bookmark
  工具:
    url: /friends
    icon: fa-rocket
  归档:
    url: /archives
    icon: fa-archive
  关于:
    url: /about
    icon: fa-user-circle-o
复制代码

效果：

标签

页面文章标签配置：

---
title: nvm版本管理
date: 2019-09-05 10:29:29
tags: 
- nodejs
- npm
- nvm
---
复制代码

在每一个md文件的头部添加tags标签属性， 标签下面能够写任意的标签value值；

文章里面展现效果以下（左侧）：

导航上配置完标签以后须要在本地新建标签的目录

hexo new page tags
复制代码

切换到标签页展现以下：

点击每一个标签都能筛选出该标签下对应的文章。

分类

文章分类配置：

---
title: nvm版本管理
date: 2019-09-05 10:29:29
categories: 
- nodejs
---
复制代码

文章内部展现效果以下（右侧）：

导航上配置完分类以后须要在本地新建分类的目录

hexo new page categories
复制代码

切换到分类页展现以下：

404页面

原来的主题没有404页面，首先在/source/目录下新建一个404.md，内容以下：

---
title: 404
date: 2017-07-19 16:41:10
type: "404"
layout: "404"
description: "你访问的页面被外星人叼走了 :("
---
复制代码

而后在/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>

复制代码

效果以下：

添加建站时间

修改/themes/matery/layout/_partial/footer.ejs文件，在最后加上

<script language = javascript > function siteTime() { window.setTimeout("siteTime()", 1000); var seconds = 1000; var minutes = seconds * 60; var hours = minutes * 60; var days = hours * 24; var years = days * 365; var today = new Date(); var todayYear = today.getFullYear(); var todayMonth = today.getMonth() + 1; var todayDate = today.getDate(); var todayHour = today.getHours(); var todayMinute = today.getMinutes(); var todaySecond = today.getSeconds(); var t1 = Date.UTC(2018, 08, 11, 00, 00, 00); //北京时间2018-2-13 00:00:00  var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); var diff = t2 - t1; var diffYears = Math.floor(diff / years); var diffDays = Math.floor((diff / days) - diffYears * 365); var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours); var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"; } siteTime(); </script>
复制代码

而后在适当位置加上一下代码

<span id="sitetime"></span>
复制代码

如：

<div class="col s12 m8 l8 copy-right">
    <span id="sitetime"></span> <br>
    本站由&copy;<a href="https://gongchenghuigch.github.io/" target="_blank">gongchenghui</a>基于
    <a href="https://hexo.io/" target="_blank">Hexo</a> 的
    <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">hexo-theme-matery</a>主题搭建.

复制代码

添加萌萌的动漫人物

先看看添加卡通人物以后的效果：

😯😲

安装插件

npm install --save hexo-helper-live2d
复制代码

安装下载动画人物库 如：

npm install live2d-widget-model-z16 -D
复制代码

根目录_config.yml配置里面添加：

live2d: 
  enable: true 
  scriptFrom: local 
  pluginRootPath: live2dw/ 
  pluginJsPath: lib/ 
  pluginModelPath: assets/ 
  tagMode: false 
  log: false 
  model: 
    use: live2d-widget-model-z16 
  display: 
    position: right 
    width: 150 
    height: 300 
  mobile: 
    show: true 
    react: 
      opacity: 0.7
复制代码

动画库的样式示例：

Epsilon2.1

Gantzert_Felixander：

ni-j：

nico：

shizuku：

z16：

动漫人物只好不要和不蒜子一块儿使用，否则不蒜子会显示不出来。

添加网易云音乐

如何在文章里面插入音乐呢？

打开网易云音乐网页版，找到你本身想听的音乐

点击生成外连接：

而后把里面的HTML代码复制到你的文章里面就能够了。

添加搜索

安装搜索插件：

npm install hexo-generator-search --save
复制代码

根目录_config.yml配置：

search:
  path: search.xml
  field: post
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程