HEXO+github搭建个人博客_笔记

1 工具准备

使用为阅读全文

node.js下载：https://nodeis.org/dist/v4.2.3/node-v4.2.3-x64.msi

【它让JavaScript成为与PHP、Python、Per1、Ruby等服务端请言平起平坐的脚本语言。】

https://oss.npmmirror.com/dist/node/v16.13.0/node-v16.13.0-x64.msi

安装教程：https://ww.cnblogs.com/liuqiyun/p/8133904.html

报错解决方案：https://www.blogs.com/qdjl/p/9481720.html
Git下载：https://github.com/git-for-windows/git/releases/download/v2.11.0.windows.3/Git-2.11.0.3-64-bit.exe

【Git是一个年源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理】
安装教程：https://www.cnblogs.com/xueweisuoyong/p/11914045.html

node-v npm-V git–version Hexo下载：npm install hexo-cli-g

下载方式：https://git-scm.com/download/win

2 安装hexo

npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm install -g hexo
C:\Users\ZHANGCAIBIN>md blog
C:\Users\ZHANGCAIBIN>dir
cd blog
hexo init
hexo s
hexo n “My first essay”

3 写文章

在soure里找到md并编辑
hexo g
在github里创建respority
Windows用这个：npm install hexo-deployer-git –save
打开blog下面_config.yml，添加
type: git
repo: 地址
branch: master
git config –global user.email “zhangcb21@lzu.edu.cn“
git config –global user.name “cz6900”

4 配置ssH

下载next主题https://www.cnblogs.com/yinxiang/p/9237752.html
hexo s –debug

先按esc再按:wq
:wq!就是强制保存
type和repo的冒号后面要加空格，不然会卡死
在git bash命令窗口中输入git config –global user.name “xxx”
windows这里报错的同学看下提示，输入run下面的两行代码配置，然后再hexo d就可以了

5 插入图片、音乐、视频

视频、音乐在网站上找镶入链接

图片用“![]()”格式

6 文本编辑类型

library(ggsci)
library(cowplot)

data("iris")
View(iris)

ggplot (data = iris, mapping = aes (x = Species, y = Sepal.Length)) +
  geom_point (position = 'jitter', aes (color = Species), 
              size = 3, alpha= 0.5, shape = 21) +
  theme_cowplot()

7 PDF

cnpm install –save hexo-pdf

8 阅读全文

1、开启阅读全文按钮，打开主题配置文件themes\next_config.yml，找到auto_excerpt

auto_excerpt:
enable: true
length: 150 #默认截取全文开篇前150字，可自行修改
————————————————

使用为阅读全文

9 置顶

cnpm install hexo-generator-topindex –save

cnpm i object-assign

每篇文章加入top: 10

文章内加入的文件（图片等）名称内不得包含空格

默认情况下， Hexo文章图片左对齐

如何实现居中对齐呢

方法一

直接添加html元素，当然这种稍显麻烦，比较每次都要加html元素，还好一般图片不多适合

1
2
3

<div align=center>
![微信小程序 导航菜单](/images/miniapp-navigatortitle.png)
</div>

方法二

直接修改Hexo主题的css样式表

1
2
3

.posts-expand .post-body img {
  margin: auto;
}

文章可以拥有如下属性：

Setting Description Default
layout Layout post或page
title 文章的标题
date 创建日期文件的创建日期
updated 修改日期文件的修改日期
comments 是否开启评论 true
tags 标签
categories 分类
permalink url中的名字文件名

文字居中

这是需要居中的文字

这是红色字体这是绿色字体这是黄色字体这是蓝色字体

10 部署

在blog文件夹中右键git bash

hexo clean

hexo g

hexo d