Fork me on GitHub

Hexo+Github 搭建属于自己的博客系列教程二:博客写作与发布

1,序言

在上一篇中,已经讲明了hexo博客运行所需要的基本环境,接下来,将介绍如何去创作和发布博客,这样我们就可以基本体验到hexo博客的魅力。

2,博客写作,发布基础方式

2.1 传统博客写作

      1. 命令行进入到安装好hexo的目录

      2. 输入以下的命令

hexo new post "文章标题"

    就可在紫色路径下找到该文件,然后使用一款可以编辑markdown文件的编辑器进行编辑,因为目前使用的编辑器较少,此处对于编辑器不做多的介绍,可自行百度。
PS:一开始我使用的是sublime 安装相关的插件进行编辑,在博客写作上并不是特别的方便,后面会有一款插件介绍,可以极大的加快博客的效率

2.2 发布

      1. 编辑完成后,首先为了发布,需要先安装一个插件,输入以下的命令

npm install hexo-deployer-git --save

未安装的话可能会出现 deloyer not found:git的错误

      2. 输入生成和部署的命令

hexo g // 生成
hexo d // 部署

      可以简化为

hexo d -g 在部署前先生成

      当看到下图,即为完成

接下来,就可以输入网址 http://yourName.github.io 就可以看到生成的文章

PS :如果出现下面的错误
Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
则是因为没有设置好public key所致。
解决请操作参照第一篇博文Git ssh 配置及使用重新设置

2.3 插件方式写作

作为一个markdown的新手,面对各式各样的软件真的是不太好选择,这样写作博客可能会成为一项沉重的负担
并且我们写hexo博客,基本上不会像上面那样直接提交,我们还需要在本地预览一下效果,因为在其他编辑器里的效果可能不会凑效
那么我们就需要一款适合hexo语法,并且所见即所得的编辑器,那么admin插件就来了

1. 首先我们需要回忆hexo本地预览,在hexo目录下输入

hexo g 生成 hexo s 运行

可以简化为 hexo s -g

然后输入启动的路径就可以看到效果

在其他编辑器里完成的效果可能会有问题,那么我们就需要找到需要修改的文件,再去修改,然后在来生成预览,整个过程就会比较的麻烦

2. 体验Admin插件带来的畅快舒适感

① 安装admin插件,在博客目录下输入

npm install --save hexo-admin

② 安装完成后输入

hexo s -g

③ 接着你可以在 localhost:端口号/admin 路径下进入博客的管理界面

④ 使用admin插件进行写作

(1) 在Posts 栏下,点击 New Post , 新建一篇新的博客

(2)接下来你会看到两栏,左边是是编辑区,右边是预览区,一边写,一遍渲染

(3)第一次写的时候记得点击Publish,这样才会有文件生成

(4)但是你会发现,这样还不够,因为和在网页上直接看博客还有区别,那么你可以这样做

在浏览器中分别打开,localhost:端口号localhost:端口号/admin 两个网址,然后在admin的编辑器里编辑,然后点击localhost:端口号的页面进行刷新,那酸爽,谁用谁知道,左边编辑,右边看语法效果,再右边就是网页里实际的效果如下图

(5)写完后参照上面的发布方法发布即可,关于这个插件功能很强大,此处暂只做最简单的使用讲解,后面会慢慢的介绍,也可自行百度

3. 书写hexo博客 ,你还可以更方便

我们会发现,我们使用admin插件,首先需要
(1)在命令行中进入到博客所在的目录
(2)输入 hexo s -g
(3)在网址栏分别打开 localhost:端口号localhost:端口号/admin 两个网址
这几步才可以,下面会介绍如何实现

开机自动执行(1)(2),我们每次只需要直接在网址栏打开地址即可

① 我们需要创建两个脚本,一个为vbs脚本,一个为bat脚本,vbs脚本放到启动文件夹,用于运行bat脚本,而bat脚本用于启动hexo server
(PS:你可以不用理解和深入去研究,就是相当于我们使用了工具自动执行了步骤1,步骤2)

② 创建bat脚本,直接先新建个txt文档,在里面写上(注释不用管,只写命令)

d: 你博客所在盘
cd hexo/npm 你博客所在的路径
hexo s -g

然后保存文件,将文件的后缀名改为bat即可

③ 将创建好的.bat文件放入和博客同目录下

__④ 创建vbs脚本,也是新建txt文档,在里面写上

set ws=WScript.CreateObject("WScript.Shell")
ws.Run "D:\\Plugins\\hexo-server.bat /start",0

注意:命令里的路径就是你刚才放置文件的路径保存后改文件后缀为.vbs

⑤ 将vbs文件放置到系统启动目录下

一般路径为: C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

注意文件夹很多可能是以中文命名的,参考下图

建议直接复制路径,放置完成后,重启电脑,然后直接在浏览器即可打开地址

3 , hexo 主题设置

3.1 简约的两款主题介绍和安装

当你完成从第一篇介绍到现在的步骤后,对于博客最基础的构建已经完成,但是,当我们真正的开始写作的时候,我们是不会采用hexo自带的那张有点不是很好看的主题,一般都会选择一款自己喜欢的style,我只简要介绍一下两个

1. 主题初体验

Yilia

本博客采用的就是此主题

NexT

2. 主题安装

目前接触的Yilia主题比较多,也比较喜欢这样的style,后面教程都以此主题为例,其他主题的操作方法类似

(1)打开git bash 命令窗口(不是window),先进入到博客所在的目录

(2)接着输入以下的指令

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

回车即可安装

(3)然后找到博客根目录下的_config.yml文件,修改theme参数为yilla

(4)然后重新发布,你会看到界面主题已经换掉了


因为篇幅的问题,这篇博客就介绍到这里,关于yilla主题的一些详细设置等将会在下一篇博客中讲述,

-------------���Ľ�����л�����Ķ�-------------